Xamarin.Forms Kurz StackLayout

Č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 .

V tomto kurzu se naučíte:

Vytvořte v XAML.Xamarin.FormsStackLayout
Určit orientaci objektu StackLayout
Ovládat zarovnání a rozšíření podřízených zobrazení v rámci objektu StackLayout

V sadě Visual Studio 2019 nebo Visual Studio pro Mac vytvoříte jednoduchou aplikaci, která předvádí, jak zarovnat ovládací prvky v objektu StackLayout. 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í objektu StackLayout

9 min zbývá

V rozložení StackLayout jsou podřízené položky uspořádané vodorovně nebo svisle do jednorozměrného zásobníku. Ve výchozím nastavení má objekt StackLayout svislé uspořádání.

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 StackLayoutTutorial.

Důležité

Fragmenty kódu C# a XAML v tomto kurzu vyžadují, aby řešení mělo název StackLayoutTutorial. 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 StackLayoutTutorial 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="StackLayoutTutorial.MainPage">
    <StackLayout Margin="20,35,20,25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>
</ContentPage>
```
Tento kód deklarativně definuje uživatelské rozhraní pro stránku, která se skládá ze tří instancí Label v objektu StackLayout. Objekt StackLayout umístí svá podřízená zobrazení (instance Label) do jednoho řádku, který je ve výchozím nastavení svisle orientovaný. Vlastnost Margin pak označuje pozici vykreslení objektu StackLayout v rámci objektu ContentPage.

Poznámka:

Kromě vlastnosti Margin je možné pro objekt StackLayout nastavit také vlastnosti Padding a Spacing. Hodnota vlastnosti Padding určuje vzdálenost mezi zobrazeními v objektu StackLayout a hodnota vlastnosti Spacing určuje velikost mezery mezi jednotlivými podřízenými prvky v objektu StackLayout. Další informace najdete v článku o okrajích a odsazeních.
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:

Další informace o této službě StackLayoutnaleznete v tématu Xamarin.Forms StackLayout.

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 StackLayoutTutorial.

Důležité

Fragmenty kódu C# a XAML v tomto kurzu vyžadují, aby řešení mělo název StackLayoutTutorial. 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 StackLayoutTutorial 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="StackLayoutTutorial.MainPage">
    <StackLayout Margin="20,35,20,25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>
</ContentPage>
```
Tento kód deklarativně definuje uživatelské rozhraní pro stránku, která se skládá ze tří instancí Label v objektu StackLayout. Objekt StackLayout umístí svá podřízená zobrazení (instance Label) do jednoho řádku, který je ve výchozím nastavení svisle orientovaný. Vlastnost Margin pak označuje pozici vykreslení objektu StackLayout v rámci objektu ContentPage.

Poznámka:

Kromě vlastnosti Margin je možné pro objekt StackLayout nastavit také vlastnosti Padding a Spacing. Hodnota vlastnosti Padding určuje vzdálenost mezi zobrazeními v objektu StackLayout a hodnota vlastnosti Spacing určuje velikost mezery mezi jednotlivými podřízenými prvky v objektu StackLayout. Další informace najdete v článku o okrajích a odsazeních.
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:

Další informace o této službě StackLayoutnaleznete v tématu Xamarin.Forms StackLayout.

Určení orientace

6 min zbývá

Visual Studio
Visual Studio pro Mac

V MainPage.xaml upravte deklaraci StackLayout tak, aby byla zarovnaná se svými podřízenými objekty vodorovně místo svisle:

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

Tento kód nastaví vlastnost Orientation na Horizontal.

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šimněte si, že instance Label v rámci StackLayout jsou nyní zarovnané vodorovně místo svisle.

V MainPage.xaml upravte deklaraci StackLayout tak, aby byla zarovnaná se svými podřízenými objekty vodorovně místo svisle:

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

Tento kód nastaví vlastnost Orientation na Horizontal.

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šimněte si, že instance Label v rámci StackLayout jsou nyní zarovnané vodorovně místo svisle.

Ovládání zarovnání a rozšíření

4 min zbývá

Velikost a umístění podřízených zobrazení v rámci StackLayout závisí na hodnotách podřízených zobrazení HeightRequest a WidthRequest vlastností a na hodnotách a vlastnostechHorizontalOptions.VerticalOptions

Vlastnosti HorizontalOptions a VerticalOptions je možné nastavit na pole ze struktury LayoutOptions, která zapouzdřuje dvě předvolby rozložení:

Zarovnání – upřednostňované zarovnání podřízeného zobrazení, které určuje jeho pozici a velikost v rámci jeho nadřazeného rozložení.
Rozšíření – určuje, jestli má podřízené zobrazení využít extra prostor, pokud je k dispozici (používá ho jenom objekt StackLayout).

Visual Studio
Visual Studio pro Mac

V souboru MainPage.xaml můžete úpravou deklarace objektu StackLayout nastavit možnosti zarovnání a rozšíření pro jednotlivé objekty Label:

<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>

Tento kód nastaví předvolby zarovnání pro první čtyři instance objektu Label a předvolby rozšíření pro poslední čtyři instance objektu Label. Pole Start, Center, End a Fill se používají k definování zarovnání instancí objektu Label v rámci nadřazeného objektu StackLayout. Pole StartAndExpand, CenterAndExpand, EndAndExpand a FillAndExpand se používají k definování předvoleb zarovnání a určují, jestli zobrazení bude zabírat více místa, pokud je k dispozici v rámci nadřazeného objektu StackLayout.

Poznámka:

Výchozí hodnota vlastností HorizontalOptions a VerticalOptions pro zobrazení je Fill.

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:

Objekt StackLayout respektuje jenom předvolby zarovnání podřízených zobrazení, které jsou v opačném směru k orientaci objektu StackLayout. Pro podřízená zobrazení Label v rámci svisle orientovaného objektu StackLayout se proto nastavují vlastnosti HorizontalOptions na jedno z těchto polí zarovnání:
- Start: Umístí objekt Label na levou stranu objektu StackLayout.
- Center: Zarovná objekt Label v objektu StackLayout na střed.
- End: Umístí objekt Label na pravou stranu objektu StackLayout.
- Fill: Zajistí, aby objekt Label vyplnil celou šířku objektu StackLayout.
Objekt StackLayout může rozšířit podřízená zobrazení jenom ve směru své orientace. Svisle orientovaný objekt StackLayout může proto rozšířit podřízená zobrazení Label, která mají vlastnost VerticalOptions nastavenou na jedno z polí rozšíření. Pro svislé zarovnání to znamená, že každý objekt Label zabírá v rámci objektu StackLayout stejně velké místo. Odlišnou velikost má jenom poslední objekt Label, který má vlastnost VerticalOptions nastavenou na FillAndExpand.

Důležité

Když je využité veškeré místo v objektu StackLayout, nemají předvolby rozšíření žádný vliv.

V sadě Visual Studio zastavte aplikaci.

Další informace o zarovnání a rozšíření naleznete v tématu Možnosti rozložení v Xamarin.Forms.

V souboru MainPage.xaml můžete úpravou deklarace objektu StackLayout nastavit možnosti zarovnání a rozšíření pro jednotlivé objekty Label:

<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>

Poznámka:

Výchozí hodnota vlastností HorizontalOptions a VerticalOptions pro zobrazení je Fill.

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:

Objekt StackLayout respektuje jenom předvolby zarovnání podřízených zobrazení, které jsou v opačném směru k orientaci objektu StackLayout. Pro podřízená zobrazení Label v rámci svisle orientovaného objektu StackLayout se proto nastavují vlastnosti HorizontalOptions na jedno z těchto polí zarovnání:
- Start: Umístí objekt Label na levou stranu objektu StackLayout.
- Center: Zarovná objekt Label v objektu StackLayout na střed.
- End: Umístí objekt Label na pravou stranu objektu StackLayout.
- Fill: Zajistí, aby objekt Label vyplnil celou šířku objektu StackLayout.
Objekt StackLayout může rozšířit podřízená zobrazení jenom ve směru své orientace. Svisle orientovaný objekt StackLayout může proto rozšířit podřízená zobrazení Label, která mají vlastnost VerticalOptions nastavenou na jedno z polí rozšíření. Pro svislé zarovnání to znamená, že každý objekt Label zabírá v rámci objektu StackLayout stejně velké místo. Odlišnou velikost má jenom poslední objekt Label, který má vlastnost VerticalOptions nastavenou na FillAndExpand.

Důležité

Když je využité veškeré místo v objektu StackLayout, nemají předvolby rozšíření žádný vliv.

V sadě Visual Studio pro Mac zastavte aplikaci.

Další informace o zarovnání a rozšíření naleznete v tématu Možnosti rozložení v Xamarin.Forms.

Xamarin.Forms Kurz StackLayout

Vytvoření objektu StackLayout

Určení orientace

Ovládání zarovnání a rozšíření

Gratulujeme!

Další kroky

Xamarin.Forms Kurz StackLayout

Vytvoření objektu StackLayout

Určení orientace

Ovládání zarovnání a rozšíření

Gratulujeme!

Další kroky

Související odkazy