Předchozí

Další

Cvičení – použití Gridu k vytvoření uživatelského rozhraní

Dokončeno

V tomto cvičení použijete Grid k uspořádání zobrazení v uživatelském rozhraní . Začnete s jinou verzí projektu TipCalculator a upravíte ho, aby bylo uživatelské rozhraní intuitivnější. Tlačítka také přesunete do dolní části stránky. Tentokrát použijete Grid rozložení místo použití VerticalStackLayout a HorizontalStackLayout. Následující obrázek znázorňuje počáteční uživatelské rozhraní a uživatelské rozhraní, které je výsledkem následujících kroků v tomto cvičení:

Otevření úvodního řešení

Úvodní řešení obsahuje plně funkční aplikaci kalkulačky tipů.

1. V sadě Visual Studio otevřete úvodní řešení ve složce exercise3/TipCalculator v úložišti, které jste naklonovali na začátku předchozího cvičení.

2. Otevřete MainPage.xaml. Všimněte si, že všechna zobrazení se zobrazují pomocí jednoho svislého StackLayout panelu:

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:TipCalculator"
                x:Class="TipCalculator.MainPage">
   
       <VerticalStackLayout>
   
           <Label Text="Bill" />
           <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" />
   
           <Label Text="Tip"   />
           <Label x:Name="tipOutput" Text="0.00" />
   
           <Label Text="Total" />
           <Label x:Name="totalOutput" Text="0.00" />
   
           <Label Text="Tip Percentage" />
           <Label x:Name="tipPercent" Text="15%" />
           <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" />
   
           <Button Text="15%" Clicked="OnNormalTip" />
           <Button Text="20%" Clicked="OnGenerousTip" />
   
           <Button x:Name="roundDown" Text="Round Down" />
           <Button x:Name="roundUp"   Text="Round Up" />
   
       </VerticalStackLayout>
   
   </ContentPage>
   
   

Vytvoření rozložení mřížky

1. Změňte panel rozložení na VerticalStackLayout Grid odsazení jednotek 40 .

2. Definujte sedm řádků a dva sloupce pro Grid. Nastavení velikosti všech řádků Auto s výjimkou čtvrtého řádku Čtvrtý řádek by se měl použít Star , aby získal veškeré zbývající místo dostupné v mřížce. Pro oba sloupce použijte Star změnu velikosti.

   <Grid RowDefinitions="Auto, Auto, Auto, *, Auto, Auto, Auto"
         ColumnDefinitions="*, *"
         Padding="40">
       ...
   </Grid>
   

Umístění zobrazení v buňkách

1. Přidejte nastavení pro Grid.Row každé zobrazení a Grid.Column přiřaďte je k příslušné buňce v souboru Grid. Následující snímek obrazovky vám pomůže určit, kam se má každé zobrazení umístit:

   

   Následující příklad ukazuje, jak nastavit pozici faktury Labela billInput Entry zobrazení:

   ...
   <Label Text="Bill" Grid.Row="0" Grid.Column="0"/>
   <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" Grid.Row="0" Grid.Column="1"/>
   ...
   

2. Zarovnejte fakturu Label a Entry nastavením VerticalOptions vlastnosti na Center Popisek.

3. Přidejte do něj Slider nastavení Grid.ColumnSpan tak, aby se rozprostírá mezi dvěma sloupci:

   <Slider ... Grid.ColumnSpan="2" ... />
   

4. Label Vyhledejte text s textem Procento tipu. Nastavte ji tak, aby zabírala levou dolní pozici v jeho obdélníku:

   <Label Text="Tip Percentage" VerticalOptions="End" HorizontalOptions="Start" ... />
   

5. Vyhledejte pojmenovaný Label tipPercent. Nastavte ji tak, aby zabírala pozici v pravém dolním rohu v obdélníku:

   <Label x:Name="tipPercent" VerticalOptions="End" HorizontalOptions="End" ... />
   

6. Margin Nastavte vlastnost pro všechna čtyři tlačítka na 5hodnotu .

Kompletní kód XAML pro stránku by měl vypadat takto:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TipCalculator"
             x:Class="TipCalculator.MainPage">
    <Grid RowDefinitions="Auto, Auto, Auto, *, Auto, Auto, Auto"
          ColumnDefinitions="*, *"
          Padding="40">

        <Label Text="Bill" VerticalOptions="Center" Grid.Row="0" Grid.Column="0"/>
        <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" Grid.Row="0" Grid.Column="1"/>

        <Label Text="Tip" Grid.Row="1" Grid.Column="0"/>
        <Label x:Name="tipOutput" Text="0.00" Grid.Row="1" Grid.Column="1"/>

        <Label Text="Total" Grid.Row="2" Grid.Column="0"/>
        <Label x:Name="totalOutput" Text="0.00" Grid.Row="2" Grid.Column="1"/>

        <Label Text="Tip Percentage" VerticalOptions="End" HorizontalOptions="Start" Grid.Row="3" Grid.Column="0"/>
        <Label x:Name="tipPercent" Text="15%" VerticalOptions="End" HorizontalOptions="End" Grid.Row="3" Grid.Column="1"/>
        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"/>

        <Button Text="15%" Clicked="OnNormalTip" Margin="5" Grid.Row="5" Grid.Column="0"/>
        <Button Text="20%" Clicked="OnGenerousTip" Margin="5" Grid.Row="5" Grid.Column="1"/>

        <Button x:Name="roundDown" Margin="5" Text="Round Down" Grid.Row="6" Grid.Column="0"/>
        <Button x:Name="roundUp"   Margin="5" Text="Round Up" Grid.Row="6" Grid.Column="1"/>

    </Grid>
</ContentPage>

Prozkoumání výsledků

Spusťte aplikaci a podívejte se na rozdíly v uživatelském rozhraní. Použili Grid jste k vylepšení estetické dokumentace stávajícího uživatelského rozhraní. Grid je silnější než StackLayout. Konkrétně Grid usnadňuje zarovnání zobrazení napříč řádky.

Pokračovat