Udostępnij za pośrednictwem

Obraz

  • Artykuł

Interfejs użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) Image wyświetla obraz, który można załadować z pliku lokalnego, identyfikatora URI lub strumienia. Obsługiwane są również standardowe formaty obrazów platformy, w tym animowane pliki GIF i lokalne pliki skalowalnej grafiki wektorowej (SVG). Aby uzyskać więcej informacji na temat dodawania obrazów do projektu aplikacji .NET MAUI, zobacz Dodawanie obrazów do projektu aplikacji .NET MAUI.

Image definiuje następujące właściwości:

  • Aspect, typu Aspect, definiuje tryb skalowania obrazu.
  • IsAnimationPlaying, typu bool, określa, czy animowany plik GIF jest odtwarzany, czy zatrzymany. Wartość domyślna tej właściwości to false.
  • IsLoading, typu bool, wskazuje stan ładowania obrazu. Wartość domyślna tej właściwości to false.
  • IsOpaque, typu bool, wskazuje, czy aparat renderowania może traktować obraz jako nieprzezroczystym podczas renderowania. Wartość domyślna tej właściwości to false.
  • Source, typu ImageSource, określa źródło obrazu.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że można je stylizować i być obiektem docelowym powiązań danych.

Uwaga

Ikony czcionek można wyświetlić za pomocą Image elementu , określając dane ikony czcionki jako FontImageSource obiekt. Aby uzyskać więcej informacji, zobacz Wyświetlanie ikon czcionek.

Klasa ImageSource definiuje następujące metody, które mogą służyć do ładowania obrazu z różnych źródeł:

  • FromFile Zwraca obiekt FileImageSource , który odczytuje obraz z pliku lokalnego.
  • FromUri Zwraca ten kod UriImageSource , który pobiera i odczytuje obraz z określonego identyfikatora URI.
  • FromStream Zwraca obiekt StreamImageSource , który odczytuje obraz ze strumienia, który dostarcza dane obrazu.

W języku XAML obrazy można załadować z plików i identyfikatorów URI, określając nazwę pliku lub identyfikator URI jako wartość ciągu dla Source właściwości. Obrazy można również ładować ze strumieni w języku XAML za pomocą niestandardowych rozszerzeń znaczników.

Ważne

Obrazy będą wyświetlane w pełnej rozdzielczości, chyba że rozmiar Image obiektu jest ograniczony przez jego układ lub HeightRequest właściwość or WidthRequest Image jest określona.

Aby uzyskać informacje o dodawaniu ikon aplikacji i ekranie powitalnym do aplikacji, zobacz Ikony aplikacji i Ekran powitalny.

Ładowanie obrazu lokalnego

Obrazy można dodawać do projektu aplikacji, przeciągając je do folderu Resources\Images projektu, gdzie jego akcja kompilacji zostanie automatycznie ustawiona na MauiImage. W czasie kompilacji rozmiar obrazów wektorów jest zmieniany na poprawne rozwiązania dla platformy docelowej i urządzenia oraz dodawane do pakietu aplikacji. Jest to konieczne, ponieważ różne platformy obsługują różne rozdzielczości obrazów, a system operacyjny wybiera odpowiednią rozdzielczość obrazu w czasie wykonywania na podstawie możliwości urządzenia.

Aby zachować zgodność z regułami nazewnictwa zasobów systemu Android, wszystkie lokalne nazwy obrazów muszą mieć małe litery, uruchomić i kończyć się znakiem litery i zawierać tylko znaki alfanumeryczne lub podkreślenia. Aby uzyskać więcej informacji, zobacz Omówienie zasobów aplikacji w developer.android.com.

Ważne

Program .NET MAUI konwertuje pliki SVG na pliki PNG. W związku z tym podczas dodawania pliku SVG do projektu aplikacji .NET MAUI należy odwoływać się do niego z pliku XAML lub C# z rozszerzeniem png.

Przestrzeganie tych reguł nazewnictwa i umieszczania plików umożliwia załadowanie i wyświetlenie obrazu następującego kodu XAML:

<Image Source="dotnet_bot.png" />

Równoważny kod języka C# to:

Image image = new Image
{
    Source = ImageSource.FromFile("dotnet_bot.png")
};

Metoda ImageSource.FromFile wymaga argumentu string i zwraca nowy FileImageSource obiekt, który odczytuje obraz z pliku. Istnieje również niejawny operator konwersji, który umożliwia określenie nazwy pliku jako string argumentu dla Image.Source właściwości:

Image image = new Image { Source = "dotnet_bot.png" };

Ładowanie obrazu zdalnego

Obrazy zdalne można pobrać i wyświetlić, określając identyfikator URI jako wartość Source właściwości:

<Image Source="https://aka.ms/campus.jpg" />

Równoważny kod języka C# to:

Image image = new Image
{
    Source = ImageSource.FromUri(new Uri("https://aka.ms/campus.jpg"))
};

Metoda ImageSource.FromUri wymaga argumentu Uri i zwraca nowy UriImageSource obiekt, który odczytuje obraz z obiektu Uri. Istnieje również niejawna konwersja identyfikatorów URI opartych na ciągach:

Image image = new Image { Source = "https://aka.ms/campus.jpg" };

Buforowanie obrazów

Buforowanie pobranych obrazów jest domyślnie włączona, a buforowane obrazy są przechowywane przez 1 dzień. To zachowanie można zmienić, ustawiając właściwości UriImageSource klasy.

Klasa UriImageSource definiuje następujące właściwości:

  • Uri, typu Uri, reprezentuje identyfikator URI obrazu do pobrania na potrzeby wyświetlania.
  • CacheValidity, typu TimeSpan, określa, jak długo obraz będzie przechowywany lokalnie. Wartość domyślna tej właściwości to 1 dzień.
  • CachingEnabled, typu bool, określa, czy buforowanie obrazów jest włączone. Wartość domyślna tej właściwości to true.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że można je stylizować i być obiektem docelowym powiązań danych.

Aby ustawić określony okres pamięci podręcznej, ustaw Source właściwość na UriImageSource obiekt, który ustawia jego CacheValidity właściwość:

<Image>
    <Image.Source>
        <UriImageSource Uri="https://aka.ms/campus.jpg"
                        CacheValidity="10:00:00:00" />
    </Image.Source>
</Image>

Równoważny kod języka C# to:

Image image = new Image();
image.Source = new UriImageSource
{
    Uri = new Uri("https://aka.ms/campus.jpg"),
    CacheValidity = new TimeSpan(10,0,0,0)
};

W tym przykładzie okres buforowania jest ustawiony na 10 dni.

Ładowanie obrazu ze strumienia

Obrazy można ładować ze strumieni za pomocą ImageSource.FromStream metody :

Image image = new Image
{
    Source = ImageSource.FromStream(() => stream)
};

Ważne

Buforowanie obrazów jest wyłączone w systemie Android podczas ładowania obrazu ze strumienia za pomocą ImageSource.FromStream metody . Wynika to z braku danych, z których można utworzyć rozsądny klucz pamięci podręcznej.

Ładowanie ikony czcionki

FontImage Rozszerzenie znaczników umożliwia wyświetlanie ikony czcionki w dowolnym widoku, który może wyświetlać element ImageSource. Zapewnia tę samą funkcjonalność co FontImageSource klasa, ale z bardziej zwięzłą reprezentacją.

Rozszerzenie FontImage znaczników jest obsługiwane przez klasę FontImageExtension , która definiuje następujące właściwości:

  • FontFamily typu string, rodzina czcionek, do której należy ikona czcionki.
  • Glyph typu string, wartość znaku Unicode ikony czcionki.
  • Color typu Color, kolor, który ma być używany podczas wyświetlania ikony czcionki.
  • Size typu double, rozmiar w jednostkach niezależnych od urządzenia ikony czcionki renderowanej. Wartość domyślna to 30. Ponadto tę właściwość można ustawić na nazwany rozmiar czcionki.

Uwaga

Analizator XAML umożliwia FontImageExtension skrót klasy jako FontImage.

Właściwość Glyph jest właściwością zawartości .FontImageExtension W związku z tym w przypadku wyrażeń znaczników XAML wyrażonych za pomocą nawiasów klamrowych można wyeliminować Glyph= część wyrażenia, pod warunkiem, że jest to pierwszy argument.

W poniższym przykładzie FontImage XAML pokazano, jak używać rozszerzenia znaczników:

<Image BackgroundColor="#D1D1D1"
       Source="{FontImage &#xf30c;, FontFamily=Ionicons, Size=44}" />

W tym przykładzie skrócona wersja FontImageExtension nazwy klasy służy do wyświetlania ikony XBox z rodziny czcionek Ionicons w pliku Image:

Screenshot of the FontImage markup extension.

Znak Unicode dla ikony to \uf30c, ale musi zostać uniknięty w języku XAML, a więc staje się znakiem &#xf30c;.

Aby uzyskać informacje na temat wyświetlania ikon czcionek, określając dane ikon czcionki w FontImageSource obiekcie, zobacz Wyświetlanie ikon czcionek.

Ładowanie animowanych plików GIF

Program .NET MAUI obejmuje obsługę wyświetlania małych, animowanych plików GIF. Można to zrobić, ustawiając Source właściwość na animowany plik GIF:

<Image Source="demo.gif" />

Ważne

Chociaż animowana obsługa formatu GIF na platformie .NET MAUI obejmuje możliwość pobierania plików, nie obsługuje buforowania ani przesyłania strumieniowego animowanych plików GIF.

Domyślnie, gdy animowany plik GIF zostanie załadowany, nie będzie odtwarzany. Jest to spowodowane IsAnimationPlaying tym, że właściwość, która kontroluje, czy animowany plik GIF jest odtwarzany, czy zatrzymany, ma wartość falsedomyślną . W związku z tym, gdy animowany plik GIF zostanie załadowany, nie będzie odtwarzany, dopóki właściwość nie zostanie ustawiona IsAnimationPlaying na truewartość . Odtwarzanie można zatrzymać, resetując IsAnimationPlaying właściwość do false. Należy pamiętać, że ta właściwość nie ma wpływu na wyświetlanie źródła obrazu innego niż GIF.

Kontrolowanie skalowania obrazów

Właściwość Aspect określa sposób skalowania obrazu w celu dopasowania go do obszaru wyświetlania i należy ustawić na jeden z elementów Aspect członkowskich wyliczenia:

  • AspectFit - litery pola obrazu (jeśli jest to wymagane), tak aby cały obraz mieścił się w obszarze wyświetlania, z pustym miejscem dodanym do góry/dołu lub boków w zależności od tego, czy obraz jest szeroki, czy wysoki.
  • AspectFill - tworzy wycinki obrazu tak, aby wypełniał obszar wyświetlania przy zachowaniu współczynnika proporcji.
  • Fill - rozciąga obraz do całkowitego i dokładnie wypełnienia obszaru wyświetlania. Może to spowodować zniekształcenie obrazu.
  • Center - wyśrodkuje obraz w obszarze wyświetlania, zachowując współczynnik proporcji.