Xamarin.Forms Kurz k obrázku

Článek
Developer (Začátečník)
10 min do dokončení

Než se pustíte do tohoto kurzu, měli byste úspěšně dokončit tyto položky:

Vytvořte svůj první Xamarin.Forms rychlý start k aplikaci .
Kurz k objektu StackLayout

V tomto kurzu se naučíte:

Vytvořte v XAML.Xamarin.FormsImage
Přizpůsobení objektu Image
Zobrazení místního souboru obrázku z projektů pro jednotlivé platformy

V sadě Visual Studio 2019 nebo Visual Studio pro Mac vytvoříte jednoduchou aplikaci, která předvádí, jak zobrazit obrázek a přizpůsobit jeho vzhled. Na následujících snímcích obrazovky je zachycena finální aplikace:

K zobrazení změn uživatelského rozhraní bez opětovného sestavení aplikace použijete také Opětovné načítání za provozu Xamarin.Forms XAML.

Vytvoření obrázku

9 min zbývá

Visual Studio
Visual Studio pro Mac

K dokončení tohoto kurzu byste měli mít Visual Studio 2019 (nejnovější vydanou verzi) s nainstalovanou sadou funkcí Vývoj mobilních aplikací pomocí .NET. Kromě toho budete potřebovat spárovaný Mac pro sestavení aplikace z kurzu v iOSu. Informace o instalaci platformy Xamarin najdete v článku Instalace Xamarinu. Informace o připojení sady Visual Studio 2019 k hostiteli buildu pro Mac najdete v článku Spárování s počítačem Mac pro vývoj na platformě Xamarin.iOS.

Spusťte Visual Studio a vytvořte novou prázdnou Xamarin.Forms aplikaci s názvem ImageTutorial.

Důležité

Fragmenty kódu C# a XAML v tomto kurzu vyžadují, aby řešení mělo název ImageTutorial. Použití jiného názvu způsobí při kopírování kódu z tohoto kurzu do řešení chyby sestavení.

Další informace o knihovně .NET Standard, která se vytvoří, najdete v tématu Anatomie Xamarin.Forms aplikace v podrobném Xamarin.Forms kurzu Rychlý start.
V Průzkumníkovi řešení v projektu ImageTutorial poklikáním otevřete soubor MainPage.xaml. Pak v souboru MainPage.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImageTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>
```
Tento kód deklarativně definuje uživatelské rozhraní pro stránku, která se skládá z objektu Image v objektu StackLayout. Vlastnost Image.Source určuje zobrazovaný obrázek pomocí identifikátoru URI. Vlastnost Image.Source je typu ImageSource, což umožňuje, aby zdrojem obrázků byly soubory, identifikátory URI nebo prostředky. Další informace naleznete v tématu Zobrazení obrázků v průvodci Xamarin.Forms.

Vlastnost HeightRequest určuje výšku objektu Image v jednotkách nezávislých na zařízení.

Poznámka:

Pro tento příklad není nutné vlastnost WidthRequest nastavovat. Ve výchozím nastavení totiž objekt Image zachovává poměr stran obrázku.
Na panelu nástrojů sady Visual Studio stiskněte tlačítko Spustit (trojúhelníkové tlačítko, která se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném vzdáleném simulátoru iOSu nebo emulátoru Androidu:

Poznámka:

Zobrazení Image automaticky ukládá stažené obrázky na 24 hodin do mezipaměti. Další informace naleznete v tématu Stažené ukládání obrázků do mezipaměti v průvodci obrázky Xamarin.Forms .

K dokončení tohoto kurzu byste měli mít Visual Studio pro Mac (nejnovější vydanou verzi) s nainstalovanou podporou pro platformy iOS a Android. Kromě toho budete také potřebovat Xcode (nejnovější vydanou verzi). Další informace o instalaci platformy Xamarin najdete v článku Instalace Xamarinu.

Spusťte Visual Studio pro Mac a vytvořte novou prázdnou Xamarin.Forms aplikaci s názvem ImageTutorial.

Důležité

Fragmenty kódu C# a XAML v tomto kurzu vyžadují, aby řešení mělo název ImageTutorial. Použití jiného názvu způsobí při kopírování kódu z tohoto kurzu do řešení chyby sestavení.

Další informace o knihovně .NET Standard, která se vytvoří, najdete v tématu Anatomie Xamarin.Forms aplikace v podrobném Xamarin.Forms kurzu Rychlý start.
V Oblasti řešení v projektu ImageTutorial poklikáním otevřete MainPage.xaml. Pak v souboru MainPage.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImageTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>
```
Tento kód deklarativně definuje uživatelské rozhraní pro stránku, která se skládá z objektu Image v objektu StackLayout. Vlastnost Image.Source určuje zobrazovaný obrázek pomocí identifikátoru URI. Vlastnost Image.Source je typu ImageSource, což umožňuje, aby zdrojem obrázků byly soubory, identifikátory URI nebo prostředky. Další informace naleznete v tématu Zobrazení obrázků v průvodci Xamarin.Forms.

Vlastnost HeightRequest určuje výšku objektu Image v jednotkách nezávislých na zařízení.

Poznámka:

Pro tento příklad není nutné vlastnost WidthRequest nastavovat. Ve výchozím nastavení totiž objekt Image zachovává poměr stran obrázku.
Na panelu nástrojů sady Visual Studio pro Mac stiskněte tlačítko Spustit (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném simulátoru iOSu nebo emulátoru Androidu:

Poznámka:

Zobrazení Image automaticky ukládá stažené obrázky na 24 hodin do mezipaměti. Další informace naleznete v tématu Stažené ukládání obrázků do mezipaměti v průvodci obrázky Xamarin.Forms .

Přizpůsobení vzhledu

6 min zbývá

Visual Studio
Visual Studio pro Mac

V souboru MainPage.xaml můžete úpravou deklarace objektu Image přizpůsobit jeho vzhled:
```
<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=300, Android=250}"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Tento kód nastaví vlastnost Aspect, která definuje změnu velikosti obrázku, na Fill. Člen Fill je definován ve výčtu Aspect a provede roztažení obrázku tak, aby zcela vyplnil zobrazení bez ohledu na to, jestli bude obrázek zkreslený. Další informace o škálování obrázků najdete v tématu Zobrazení obrázků v průvodci Xamarin.Forms obrázky.

Rozšíření značek OnPlatform umožňuje přizpůsobit vzhled uživatelského rozhraní podle platformy. V tomto příkladu se pomocí rozšíření značek nastaví vlastnosti HeightRequest a WidthRequest na 300 jednotek nezávislých na zařízení v iOSu a na 250 jednotek nezávislých na zařízení v Androidu. Další informace o rozšíření značek OnPlatform najdete v části o rozšíření značek OnPlatform v průvodci využíváním rozšíření značek XAML.

Vlastnost HorizontalOptions pak určuje, že obrázek se má vodorovně zarovnat na střed.
Pokud aplikace stále běží, uložte změny do souboru a uživatelské rozhraní aplikace se v simulátoru nebo emulátoru aktualizuje automaticky. V ostatních případech na panelu nástrojů sady Visual Studio stiskněte tlačítko Spustit (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném vzdáleném simulátoru iOSu nebo emulátoru Androidu:

V sadě Visual Studio zastavte aplikaci.

V souboru MainPage.xaml můžete úpravou deklarace objektu Image přizpůsobit jeho vzhled:
```
<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=300, Android=250}"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Tento kód nastaví vlastnost Aspect, která definuje změnu velikosti obrázku, na Fill. Člen Fill je definován ve výčtu Aspect a provede roztažení obrázku tak, aby zcela vyplnil zobrazení bez ohledu na to, jestli bude obrázek zkreslený. Další informace o škálování obrázků najdete v tématu Zobrazení obrázků v průvodci Xamarin.Forms obrázky.

Rozšíření značek OnPlatform umožňuje přizpůsobit vzhled uživatelského rozhraní podle platformy. V tomto příkladu se pomocí rozšíření značek nastaví vlastnosti HeightRequest a WidthRequest na hodnotu 300 v iOSu a na hodnotu 250 v Androidu. Další informace o rozšíření značek OnPlatform najdete v části o rozšíření značek OnPlatform v průvodci využíváním rozšíření značek XAML.

Vlastnost HorizontalOptions pak určuje, že obrázek se má vodorovně zarovnat na střed.
Pokud aplikace stále běží, uložte změny do souboru a uživatelské rozhraní aplikace se v simulátoru nebo emulátoru aktualizuje automaticky. V ostatních případech na panelu nástrojů sady Visual Studio pro Mac stiskněte tlačítko Spustit (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném simulátoru iOSu nebo emulátoru Androidu:

V sadě Visual Studio pro Mac zastavte aplikaci.

Zobrazení místního obrázku

4 min zbývá

Soubory obrázků je možné přidat do projektů platformy a odkazovat na ho ze Xamarin.Forms sdíleného kódu. Tato metoda distribuce obrázků je nutná, pokud jsou obrázky pro jednotlivé platformy specifické, například při použití různých rozlišení na různých platformách nebo mírně odlišných vzhledů.

V tomto cvičení upravíte řešení ImageTutorial tak, aby zobrazovalo místní obrázek (namísto obrázku staženého pomocí identifikátoru URI). Místním obrázkem je logo Xamarin, které si můžete stáhnout kliknutím na tlačítko níže.

Stáhnout soubor XamarinLogo.png

Důležité

Pokud chcete použít jeden obrázek na všech platformách, musíte na všech platformách použít stejný název souboru. Mělo by se přitom jednat o platný název prostředku pro Android (to znamená, že jsou povolené jenom malá písmena, číslice, podtržítka a tečky).

Visual Studio
Visual Studio pro Mac

V Průzkumníkovi řešení v projektu ImageTutorial.iOS rozbalte Katalogy assetů a poklikáním otevřete Prostředky. Pak na kartě Assets.xcassets klikněte na tlačítko Plus a vyberte Přidat sadu obrázků:
Na kartě Assets.xcassets vyberte novou sadu obrázků a zobrazí se editor:
Přetáhněte soubor XamarinLogo.png z místního systému souborů do pole 1x v kategorii Univerzální:
Na kartě Assets.xcassets klikněte pravým tlačítkem myši na název nové sady obrázků a přejmenujte ji na XamarinLogo:

Uložte a zavřete kartu Assets.xcassets.
V Průzkumníkovi řešení v projektu ImageTutorial.Android rozbalte složku Prostředky. Potom přetáhněte soubor XamarinLogo.png z místního systému souborů do složky drawable:

Poznámka:

Visual Studio automaticky nastaví akci sestavení pro obrázek na AndroidResource.
V projektu ImageTutorial upravte v souboru MainPage.xaml deklaraci objektu Image tak, aby zobrazoval místní soubor XamarinLogo:
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Tento kód nastaví vlastnost Source na místní soubor, který se má zobrazit. Vlastnost WidthRequest je nastavená na 300 jednotek nezávislých na zařízení pro iOS a 250 jednotek nezávislých na zařízení pro Android. Vlastnost HorizontalOptions pak určuje, že obrázek se má vodorovně zarovnat na střed.

Poznámka:

Při použití obrázků ve formátu PNG v iOSu můžete příponu .png v názvu souboru zadaném ve vlastnosti Source vynechat. Při použití jiných formátů obrázků je přípona nezbytná.
Na panelu nástrojů sady Visual Studio stiskněte tlačítko Spustit (trojúhelníkové tlačítko, která se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném simulátoru iOSu nebo emulátoru Androidu:

V sadě Visual Studio zastavte aplikaci.

Další informace o místních obrázcích naleznete v tématu Místní obrázky v průvodci obrázky Xamarin.Forms .

V Oblasti řešení v projektu ImageTutorial.iOS poklikáním otevřete složku Assets.xcassets. Pak klikněte pravým tlačítkem myši do seznamu prostředků a vyberte Nová sada obrázků:
V seznamu prostředků vyberte novou sadu obrázků a zobrazí se editor:
Přetáhněte soubor XamarinLogo.png z místního systému souborů do pole 1x v kategorii Univerzální:
V seznamu prostředků poklikejte na název nové sady obrázků a přejmenujte ji na XamarinLogo:
V Oblasti řešení v projektu ImageTutorial.Android rozbalte složku Prostředky. Potom přetáhněte soubor XamarinLogo.png z místního systému souborů do složky drawable.
V dialogovém okně Přidat soubor do složky vyberte OK.

Poznámka:

Visual Studio pro Mac automaticky nastaví akci sestavení pro obrázek na AndroidResource.
V projektu ImageTutorial upravte v souboru MainPage.xaml deklaraci objektu Image tak, aby zobrazoval místní soubor XamarinLogo:
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Tento kód nastaví vlastnost Source na místní soubor, který se má zobrazit. Vlastnost WidthRequest je nastavená na 300 jednotek nezávislých na zařízení pro iOS a 250 jednotek nezávislých na zařízení pro Android. Vlastnost HorizontalOptions pak určuje, že obrázek se má vodorovně zarovnat na střed.

Poznámka:

Při použití obrázků ve formátu PNG v iOSu můžete příponu .png v názvu souboru zadaném ve vlastnosti Source vynechat. Při použití jiných formátů obrázků je přípona nezbytná.
Na panelu nástrojů sady Visual Studio pro Mac stiskněte tlačítko Spustit (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném simulátoru iOSu nebo emulátoru Androidu:

V sadě Visual Studio pro Mac zastavte aplikaci.

Další informace o místních obrázcích naleznete v tématu Místní obrázky v průvodci obrázky Xamarin.Forms .