Xamarin.Forms Kurz k Gridu

Článek
Developer (Začátečník)
9 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.FormsGrid
Zadat sloupce a řádky pro Grid
Rozložit obsah do více řádků nebo více sloupců v objektu Grid

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

8 min zbývá

V rozložení Grid jsou podřízené položky uspořádané do řádků a sloupců poměrné nebo absolutní velikosti. Ve výchozím nastavení obsahuje Grid jeden řádek a jeden sloupec.

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

Důležité

Fragmenty kódu C# a XAML v tomto kurzu vyžadují, aby řešení mělo název GridTutorial. 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 GridTutorial 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="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
Tento kód deklarativně definuje uživatelské rozhraní pro stránku, která se skládá z objektu Label v objektu Grid. Objekt Grid ve výchozím nastavení umisťuje svá podřízená zobrazení do jedné pozice. Objekt Grid obsahující více podřízených zobrazení by proto měl určovat sloupce a řádky, což si probereme v dalším cvičení. Vlastnost Margin pak označuje pozici vykreslení objektu Grid v rámci objektu ContentPage.

Poznámka:

Kromě vlastnosti Margin je možné pro objekt Grid nastavit také vlastnost Padding. Hodnota vlastnosti Padding určuje vzdálenost mezi hranicemi objektu Grid a jeho podřízenými objekty. 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 objektu , naleznete v tématuXamarin.Forms MřížkaGrid.

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

Důležité

Fragmenty kódu C# a XAML v tomto kurzu vyžadují, aby řešení mělo název GridTutorial. 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 GridTutorial 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="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
Tento kód deklarativně definuje uživatelské rozhraní pro stránku, která se skládá z objektu Label v objektu Grid. Objekt Grid ve výchozím nastavení umisťuje svá podřízená zobrazení do jedné pozice. Objekt Grid obsahující více podřízených zobrazení by proto měl určovat sloupce a řádky, což si probereme v dalším cvičení. Vlastnost Margin pak označuje pozici vykreslení objektu Grid v rámci objektu ContentPage.

Poznámka:

Kromě vlastnosti Margin je možné pro objekt Grid nastavit také vlastnost Padding. Hodnota vlastnosti Padding určuje vzdálenost mezi zobrazeními v objektu Grid. 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 objektu , naleznete v tématuXamarin.Forms MřížkaGrid.

Zadání sloupců a řádků

6 min zbývá

Visual Studio
Visual Studio pro Mac

V souboru MainPage.xaml můžete úpravou deklarace objektu Grid definovat sloupce a řádky a vložit do nich obsah:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
Tento kód definuje sloupce a řádky pro objekt Grid a umisťuje instance objektu Label do specifických sloupců a řádků. Data sloupců a řádků jsou uložená ve vlastnostech ColumnDefinitions a RowDefinitions, což jsou kolekce objektů ColumnDefinition a RowDefinition. Šířka každého objektu ColumnDefinition se nastavuje vlastností ColumnDefinition.Width a výška každého objektu RowDefinition se nastavuje vlastností RowDefinition.Height. Platné hodnoty šířky a výšky jsou:
- Auto, která nastaví rozměr sloupce nebo řádku podle obsahu.
- Poměrné hodnoty, které nastaví rozměry sloupců a řádků jako poměrnou část zbývajícího místa. Poměrné hodnoty jsou označeny tím, že mají na konci *.
- Absolutní hodnoty, které nastaví rozměry sloupců a řádků pomocí konkrétních pevných hodnot.
V kódu výše má proto každý sloupec šířku poloviny objektu Grid, zatímco každý řádek má výšku 50 jednotek nezávislých na zařízení.

Pozice každého objektu Label v objektu Grid je určená pomocí připojených vlastností Grid.Column a Grid.Row, s indexy začínajícími nulou. První sloupec je proto sloupec 0 a první řádek je řádek 0. U prvního objektu Label tyto připojené vlastnosti chybí, protože všechna podřízená zobrazení, která je nenastavují, se automaticky vykreslí ve sloupci 0 a v řádku 0.

Poznámka:

Mezery mezi sloupci a řádky v objektu Grid se dají nastavit pomocí vlastností ColumnSpacing a RowSpacing. Další informace najdete v tématu Mezery v průvodci mřížkouXamarin.Forms.
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 souboru MainPage.xaml můžete úpravou deklarace objektu Grid definovat sloupce a řádky a vložit do nich obsah:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
Tento kód definuje sloupce a řádky pro objekt Grid a umisťuje instance objektu Label do specifických sloupců a řádků. Data sloupců a řádků jsou uložená ve vlastnostech ColumnDefinitions a RowDefinitions, což jsou kolekce objektů ColumnDefinition a RowDefinition. Šířka každého objektu ColumnDefinition se nastavuje vlastností ColumnDefinition.Width a výška každého objektu RowDefinition se nastavuje vlastností RowDefinition.Height. Platné hodnoty šířky a výšky jsou:
- Auto, která nastaví rozměr sloupce nebo řádku podle obsahu.
- Poměrné hodnoty, které nastaví rozměry sloupců a řádků jako poměrnou část zbývajícího místa. Poměrné hodnoty jsou označeny tím, že mají na konci *.
- Absolutní hodnoty, které nastaví rozměry sloupců a řádků pomocí konkrétních pevných hodnot.
V kódu výše má proto každý sloupec šířku poloviny objektu Grid, zatímco každý řádek má výšku 50 jednotek nezávislých na zařízení.

Pozice každého objektu Label v objektu Grid je určená pomocí připojených vlastností Grid.Column a Grid.Row, s indexy začínajícími nulou. První sloupec je proto sloupec 0 a první řádek je řádek 0. U prvního objektu Label tyto připojené vlastnosti chybí, protože všechna podřízená zobrazení, která je nenastavují, se automaticky vykreslí ve sloupci 0 a v řádku 0.

Poznámka:

Mezery mezi sloupci a řádky v objektu Grid se dají nastavit pomocí vlastností ColumnSpacing a RowSpacing. Další informace najdete v tématu Mezery v průvodci mřížkouXamarin.Forms.
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:

Rozložení na více sloupců nebo řádků

2 min zbývá

Visual Studio
Visual Studio pro Mac

V souboru MainPage.xaml můžete úpravou deklarace objektu Grid definovat sloupce a řádky a vložit do nich obsah, který bude zasahovat do více sloupců nebo řádků:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>
```
Tento kód definuje sloupce a řádky pro objekt Grid a umisťuje instance objektu Label do specifických sloupců a řádků. První objekt Label nastavuje přidruženou vlastnost ColumnSpan tak, aby jeho text přesahoval do více sloupců. Vlastnost ColumnSpan je nastavená na hodnotu 2, která představuje počet sloupců, do kterých bude objekt Label zasahovat. Druhý objekt Label nastavuje přidruženou vlastnost RowSpan tak, aby jeho text přesahoval do více řádků. Vlastnost RowSpan je nastavená na hodnotu 2, která představuje počet řádků, do kterých bude objekt Label zasahovat.
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.

Další informace o přeskakování sloupců a řádků naleznete v části Řádky a sloupce v průvodci mřížkouXamarin.Forms.

V souboru MainPage.xaml můžete úpravou deklarace objektu Grid definovat sloupce a řádky a vložit do nich obsah, který bude zasahovat do více sloupců nebo řádků:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>
```
Tento kód definuje sloupce a řádky pro objekt Grid a umisťuje instance objektu Label do specifických sloupců a řádků. První objekt Label nastavuje přidruženou vlastnost ColumnSpan tak, aby jeho text přesahoval do více sloupců. Vlastnost ColumnSpan je nastavená na hodnotu 2, která představuje počet sloupců, do kterých bude objekt Label zasahovat. Druhý objekt Label nastavuje přidruženou vlastnost RowSpan tak, aby jeho text přesahoval do více řádků. Vlastnost RowSpan je nastavená na hodnotu 2, která představuje počet řádků, do kterých bude objekt Label zasahovat.
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.

Další informace o přeskakování sloupců a řádků naleznete v části Řádky a sloupce v průvodci mřížkouXamarin.Forms.

Xamarin.Forms Kurz k Gridu

Vytvoření mřížky

Zadání sloupců a řádků

Rozložení na více sloupců nebo řádků

Gratulujeme!

Další kroky

Xamarin.Forms Kurz k Gridu

Vytvoření mřížky

Zadání sloupců a řádků

Rozložení na více sloupců nebo řádků

Gratulujeme!

Další kroky

Související odkazy