Sdílet prostřednictvím

Image

  • Článek

Uživatelské rozhraní aplikace .NET s více platformami (.NET MAUI) Image zobrazuje obrázek, který lze načíst z místního souboru, identifikátoru URI nebo datového proudu. Podporují se také standardní formáty obrázků platformy, včetně animovaných gifů a místních souborů SVG (Scalable Vector Graphics). Další informace o přidávání obrázků do projektu aplikace .NET MAUI najdete v tématu Přidání obrázků do projektu aplikace .NET MAUI.

Image definuje následující vlastnosti:

  • Aspect, typu Aspect, definuje režim škálování image.
  • IsAnimationPlaying, typu bool, určuje, zda se animovaný obrázek GIF přehrává nebo zastavil. Výchozí hodnota této vlastnosti je false.
  • IsLoading, typu booloznačuje stav načítání image. Výchozí hodnota této vlastnosti je false.
  • IsOpaque, typu bool, označuje, zda vykreslovací modul může s obrázkem zacházet jako s neprůznamnou při vykreslování. Výchozí hodnota této vlastnosti je false.
  • Source, typu ImageSource, určuje zdroj image.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že je možné je stylovat a být cílem datových vazeb.

Poznámka:

Ikony písem lze zobrazit Image zadáním dat ikon písma jako objektu FontImageSource . Další informace naleznete v tématu Zobrazení ikon písem.

Třída ImageSource definuje následující metody, které lze použít k načtení image z různých zdrojů:

  • FromFileFileImageSource vrátí obrázek, který načte obrázek z místního souboru.
  • FromUri vrátí soubor UriImageSource , který stáhne a přečte obrázek ze zadaného identifikátoru URI.
  • FromStreamStreamImageSource vrátí hodnotu, která načte obrázek ze streamu, který poskytuje data obrázku.

V jazyce XAML lze obrázky načíst ze souborů a identifikátorů URI zadáním názvu souboru nebo identifikátoru URI jako řetězcové hodnoty vlastnosti Source . Obrázky lze také načíst z datových proudů v XAML prostřednictvím vlastních rozšíření značek.

Důležité

Obrázky se zobrazí v plném rozlišení, pokud není velikost Image omezena rozložením nebo HeightRequest WidthRequest vlastností zadaného obrázku Image .

Informace o přidávání ikon aplikací a úvodní obrazovce do aplikace najdete v tématu Ikony aplikací a úvodní obrazovka.

Načtení místní image

Obrázky můžete do projektu aplikace přidat tak, že je přetáhnete do složky Resources\Images projektu, kde se akce sestavení automaticky nastaví na MauiImage. V době sestavení se změní velikost vektorových obrázků na správné rozlišení cílové platformy a zařízení a přidá se do balíčku aplikace. To je nezbytné, protože různé platformy podporují různá rozlišení obrázků a operační systém vybírá odpovídající rozlišení obrázků za běhu na základě možností zařízení.

Aby bylo možné dodržovat pravidla pojmenování prostředků Androidu, musí být všechny názvy místních obrázků malými písmeny, začínat a končit znakem písmena a obsahovat pouze alfanumerické znaky nebo podtržítka. Další informace najdete v přehledu prostředků aplikace na developer.android.com.

Důležité

.NET MAUI převádí soubory SVG na soubory PNG. Proto při přidávání souboru SVG do projektu aplikace .NET MAUI by se měl odkazovat z XAML nebo C# s příponou .png.

Dodržování těchto pravidel pro pojmenování a umístění souborů umožňuje, aby následující XAML načetl a zobrazil obrázek:

<Image Source="dotnet_bot.png" />

Ekvivalentní kód jazyka C# je:

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

Metoda ImageSource.FromFile vyžaduje string argument a vrátí nový FileImageSource objekt, který načte obrázek ze souboru. K dispozici je také implicitní převodní operátor, který umožňuje zadat název souboru jako string argument vlastnosti Image.Source :

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

Načtení vzdálené image

Vzdálené image lze stáhnout a zobrazit zadáním identifikátoru URI jako hodnoty Source vlastnosti:

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

Ekvivalentní kód jazyka C# je:

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

Metoda ImageSource.FromUri vyžaduje Uri argument a vrátí nový UriImageSource objekt, který čte obrázek z objektu Uri. Existuje také implicitní převod identifikátorů URI založených na řetězcích:

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

Ukládání obrázků do mezipaměti

Ukládání do mezipaměti stažených imagí je ve výchozím nastavení povolená a uložené obrázky uložené v mezipaměti po dobu 1 dne. Toto chování lze změnit nastavením vlastností UriImageSource třídy.

Třída UriImageSource definuje následující vlastnosti:

  • Uri, typu Uripředstavuje identifikátor URI obrázku, který se má stáhnout pro zobrazení.
  • CacheValidity, typu TimeSpan, určuje, jak dlouho bude image uložena místně pro. Výchozí hodnota této vlastnosti je 1 den.
  • CachingEnabled, typu bool, definuje, zda je povolena ukládání obrázků do mezipaměti. Výchozí hodnota této vlastnosti je true.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že je možné je stylovat a být cílem datových vazeb.

Pokud chcete nastavit konkrétní období mezipaměti, nastavte Source vlastnost na UriImageSource objekt, který nastaví jeho CacheValidity vlastnost:

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

Ekvivalentní kód jazyka C# je:

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

V tomto příkladu je doba ukládání do mezipaměti nastavená na 10 dnů.

Načtení obrázku ze streamu

Obrázky je možné načíst z datových proudů pomocí ImageSource.FromStream metody:

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

Důležité

Ukládání obrázků do mezipaměti je v Androidu zakázané při načítání obrázku ze streamu pomocí ImageSource.FromStream metody. Důvodem je nedostatek dat, ze kterých se má vytvořit rozumný klíč mezipaměti.

Načtení ikony písma

Rozšíření FontImage značek umožňuje zobrazit ikonu písma v libovolném zobrazení, které může zobrazit ImageSource. Poskytuje stejné funkce jako FontImageSource třída, ale s stručnější reprezentací.

Rozšíření FontImage značek je podporováno FontImageExtension třídou, která definuje následující vlastnosti:

  • FontFamily typ string, rodina písem, do které patří ikona písma.
  • Glyph typu string, znak unicode hodnota ikony písma.
  • Color typu Color, barva, která se má použít při zobrazení ikony písma.
  • Sizedoubletypu , velikost v jednotkách nezávislých na zařízení u ikony vykresleného písma. Výchozí hodnota je 30. Kromě toho lze tuto vlastnost nastavit na pojmenovanou velikost písma.

Poznámka:

Analyzátor XAML umožňuje FontImageExtension , aby třída byla zkrácena jako FontImage.

Vlastnost Glyph je vlastnost FontImageExtensionobsahu . Proto u výrazů značek XAML vyjádřených složenými závorkami můžete eliminovat Glyph= část výrazu za předpokladu, že se jedná o první argument.

Následující příklad XAML ukazuje, jak použít FontImage rozšíření značek:

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

V tomto příkladu se zkrácená verze FontImageExtension názvu třídy používá k zobrazení ikony XBox z rodiny písem Ionicons v :Image

Screenshot of the FontImage markup extension.

I když znak unicode pro ikonu je \uf30c, musí být uchvácený v XAML a tak se stane &#xf30c;.

Informace o zobrazení ikon písem zadáním dat ikon písma v objektu FontImageSource naleznete v tématu Zobrazení ikon písma.

Načtení animovaných GIFů

.NET MAUI obsahuje podporu pro zobrazování malých animovaných GIFů. Toho dosáhnete nastavením Source vlastnosti na animovaný soubor GIF:

<Image Source="demo.gif" />

Důležité

I když podpora animovaného gifu v .NET MAUI zahrnuje možnost stahovat soubory, nepodporuje ukládání do mezipaměti ani streamování animovaných GIFů.

Ve výchozím nastavení se při načtení animovaného obrázku GIF nepřehraje. Důvodem je IsAnimationPlaying to, že vlastnost, která řídí, zda animovaný GIF je přehrávání nebo zastaven, má výchozí hodnotu false. Proto při načtení animovaného GIF se nepřehraje, dokud IsAnimationPlaying je vlastnost nastavena na true. Přehrávání lze zastavit resetováním IsAnimationPlaying vlastnosti na falsehodnotu . Všimněte si, že tato vlastnost nemá žádný vliv při zobrazení zdroje obrázku jiného než GIF.

Řízení škálování obrázků

Vlastnost Aspect určuje, jak bude obrázek škálován tak, aby odpovídal oblasti zobrazení, a měl by být nastaven na jeden ze členů výčtu Aspect :

  • AspectFit - písmena obrázku (v případě potřeby) tak, aby se celý obrázek vešl do oblasti zobrazení s prázdným místem přidaným do horní/dolní části nebo stran v závislosti na tom, jestli je obrázek široký nebo vysoký.
  • AspectFill - vystřiží obrázek tak, aby vyplnil oblast zobrazení při zachování poměru stran.
  • Fill - roztáhne obrázek úplně a přesně vyplní oblast zobrazení. Výsledkem může být zkreslení obrázku.
  • Center - zacentruje obrázek do oblasti zobrazení a zachová poměr stran.