Cvičení – vytvoření uživatelského rozhraní pomocí StackLayoutu

Dokončeno

V tomto cvičení použijete vnořené StackLayout kontejnery k uspořádání zobrazení v uživatelském rozhraní. První snímek obrazovky ukazuje rozložení implementované počátečním projektem a druhý snímek ukazuje rozložení dokončeného projektu. Vaším úkolem je použít StackLayout kontejnery a LayoutOptions převést počáteční projekt na dokončenou verzi.

Prozkoumání úvodního řešení

Úvodní řešení obsahuje plně funkční aplikaci kalkulačky tipů. Začněte tím, že prozkoumáte uživatelské rozhraní, abyste pochopili, co aplikace dělá.

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

2. Sestavte a spusťte aplikaci v preferovaném operačním systému.

3. Do textového pole zadejte číslo a pomocí aplikace zjistěte, jak funguje.

4. Experimentujte s tlačítky pro velikost tipu a posuvníkem.

5. Až budete hotovi, zavřete aplikaci.

6. Otevřete MainPage.xaml. Všimněte si, že všechna zobrazení jsou umístěna do jednoho VerticalStackLayout, jak ukazuje následující kód XAML:

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

Oprava uživatelského rozhraní

Když jste viděli spuštění aplikace, můžete ji vylepšit přidáním HorizontalStackLayout kontejnerů. Cílem je, aby aplikace vypadala jako snímek obrazovky na začátku testovacího prostředí.

1. Otevřete soubor MainPage.xaml.

2. Přidejte 40 jednotky odsazení a 10 jednotek mezer do VerticalStackLayout:

   <VerticalStackLayout Padding="40" Spacing="10">
   

3. Přidejte do skupiny Label fakturu HorizontalStackLayout s polem Entry pod ním. Nastavte vlastnost Spacing na 10.

4. WidthRequest Nastavte fakturu Label na 100 hodnotu a VerticalOptions vlastnost na Centerhodnotu . Tyto změny zajistí, že je popisek zarovnaný svisle s polem Entry .

   <HorizontalStackLayout Spacing="10">
       <Label Text="Bill" WidthRequest="100" VerticalOptions="Center"/>
       <Entry ... />
   </HorizontalStackLayout>
   

5. Přidejte další HorizontalStackLayout do skupiny Label s názvem Tip s Label názvem tipOutput. Spacing Nastavte vlastnost na 10hodnotu a Margin vlastnost na 0,20,0,0hodnotu .

6. WidthRequest Nastavení tipu Label na100

   <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
       <Label Text="Tip" WidthRequest="100" />
       <Label .../>
   </HorizontalStackLayout>
   

7. HorizontalStackLayout Použijte k seskupení součtu Label s Label názvem totalOutput. Nastavte vlastnost Spacing na 10.

8. WidthRequest Nastavení součtu Label na100

   <HorizontalStackLayout Spacing="10">
       <Label Text="Total" WidthRequest="100"  />
       <Label .../>
   </HorizontalStackLayout>
   

9. Přidejte další HorizontalStackLayout do skupiny Label s názvem Tip Percentage s Label názvem tipPercent.

10. Nastavte vlastnost tohoto HorizontalStackLayout objektu End VerticalOptions a nastavte Spacing vlastnost na 10:

11. WidthRequest Nastavení procentuální Label hodnoty tipu na100

    <HorizontalStackLayout VerticalOptions="End" Spacing="10">
        <Label Text="Tip Percentage" WidthRequest="100"/>
        <Label ... />
    </HorizontalStackLayout>
    

12. HorizontalStackLayout Seskupit Button s titulkem 15 % a titulkem Button 20 %.

13. Nastavte vlastnost tohoto objektu Margin Spacing na 0,20,0,0hodnotu a vlastnost na 10:StackLayout

    <HorizontalStackLayout  Margin="0,20,0,0" Spacing="10">
        <Button Text="15%" ... />
        <Button Text="20%" ... />
    </HorizontalStackLayout>
    

14. Přidejte závěrečnou HorizontalStackLayout skupinu s Button titulkem Zaokrouhlit dolů a Button titulek Zaokrouhlit nahoru. Nastavte vlastnost tohoto objektu Margin Spacing na 0,20,0,0hodnotu a vlastnost na 10:StackLayout

    <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button ... Text="Round Down" />
            <Button ... Text="Round Up" />
    </HorizontalStackLayout>
    

15. Na všech čtyřech ovládacích prvcích tlačítek nastavte HorizontalOptions vlastnost na Center hodnotu a WidthRequest vlastnost na 150hodnotu . Příklad:

    <Button Text="15%" WidthRequest="150" HorizontalOptions="Center" ... />
    

Kompletní kód XAML (Extensible Application Markup Language) pro stránku obsahu by měl vypadat takto:

<?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 Padding="40" Spacing="10">

        <HorizontalStackLayout Spacing="10">
            <Label Text="Bill" WidthRequest="100" VerticalOptions="Center" />
            <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" />
        </HorizontalStackLayout>

        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Label Text="Tip"  WidthRequest="100" />
            <Label x:Name="tipOutput" Text="0.00" />
        </HorizontalStackLayout>

        <HorizontalStackLayout Spacing="10">
            <Label Text="Total" WidthRequest="100"/>
            <Label x:Name="totalOutput" Text="0.00" />
        </HorizontalStackLayout>

        <HorizontalStackLayout VerticalOptions="End" Spacing="10">
            <Label Text="Tip Percentage" WidthRequest="100"/>
            <Label x:Name="tipPercent" Text="15%" />
        </HorizontalStackLayout>
        
        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" />

        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button Text="15%" Clicked="OnNormalTip" WidthRequest="150" HorizontalOptions="Center"/>
            <Button Text="20%" Clicked="OnGenerousTip"  WidthRequest="150" HorizontalOptions="Center"/>
        </HorizontalStackLayout>
        
        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button x:Name="roundDown" Text="Round Down" WidthRequest="150" HorizontalOptions="Center"/>
            <Button x:Name="roundUp"   Text="Round Up" WidthRequest="150" HorizontalOptions="Center"/>
        </HorizontalStackLayout>

    </VerticalStackLayout>

</ContentPage>

Prozkoumání výsledků

Spusťte aplikaci znovu a podívejte se na rozdíly v uživatelském rozhraní. Ověřte, že jsou ovládací prvky správně zarovnané a mají správnou velikost a mezeru.

Použili VerticalStackLayout jste kontejnery HorizontalStackLayout a vylepšili tak estetickou stránku stávajícího uživatelského rozhraní. Tato rozložení jsou nejjednodušší panely rozložení, ale jsou dostatečně výkonné, aby vzniklo rozumné uživatelské rozhraní.