Упражнение. Использование макета StackLayout для создания пользовательского интерфейса

Завершено

В этом упражнении для упорядочивания представлений в пользовательском интерфейсе используются StackLayout вложенные контейнеры. На первом снимке экрана показан макет, реализованный при стартовом проекте, а на втором — макет завершенного проекта. Ваша задача — использовать контейнеры StackLayout и LayoutOptions, чтобы превратить стартовый проект в готовую версию.

Обзор стартового решения

Стартовое решение содержит полнофункциональное приложение калькулятора подсказок. Начните с изучения пользовательского интерфейса, чтобы понять, что делает приложение.

1. С помощью Visual Studio откройте начальную версию решения в папке exercise2/TipCalculator в репозитории, клонированного в начале предыдущего упражнения.

2. Создайте и запустите приложение в предпочитаемой операционной системе.

3. Введите число в текстовое поле и посмотрите, как это работает.

4. Поэкспериментируйте с кнопками суммы чаевых и ползуноком.

5. По завершении закройте приложение.

6. Откройте Файл MainPage.xaml. Обратите внимание, что все представления помещаются в один макет VerticalStackLayout, как показано в следующей разметке 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>
   

Исправление пользовательского интерфейса

Теперь, когда вы видели запуск приложения, вы можете сделать его лучше, добавив HorizontalStackLayout контейнеры. Цель состоит в том, чтобы приложение выглядело как снимок экрана в начале нашей лабораторной работы.

1. Откройте файл MainPage.xaml .

2. Добавьте 40 единиц заполнения и 10 единиц интервала в VerticalStackLayout:

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

3. Добавьте HorizontalStackLayout для группировки Label, который говорит Билл, с полем Entry ниже него. Установите свойство Spacing в значение 10.

4. WidthRequest Задайте для билла Label100 значение и VerticalOptions свойство .Center Эти изменения гарантируют, что метка выравнивается по вертикали с полем Entry .

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

5. Добавьте еще один HorizontalStackLayout в группу Label с надписьюLabel Tip с именем tipOutput. Задайте для свойства Spacing значение 10, а для свойства Margin — значение 0,20,0,0.

6. WidthRequest Задайте для подсказки Label значение100

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

7. Используйте HorizontalStackLayout для группировки Label, которая говорит Total, с Label, именуемым totalOutput. Установите свойство Spacing в значение 10.

8. Задайте WidthRequestИтогоLabel на 100

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

9. Добавьте еще один HorizontalStackLayout, чтобы сгруппировать Label, на котором написано Tip Percentage, с Label, имеющим имя tipPercent.

10. VerticalOptions Задайте для этого HorizontalStackLayoutEnd свойства значение и задайте Spacing для 10свойства значение :

11. WidthRequest Задайте значение "Процент"Label

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

12. Используйте HorizontalStackLayout для группировки Button с подписью 15% и Button с подписью 20%.

13. Установите свойство Margin этого параметра StackLayoutна 0,20,0,0, а свойство Spacing установите на 10:

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

14. Добавьте окончательный для группировки HorizontalStackLayout с подписью Button и с подписью Button. Установите свойство Margin этого параметра StackLayoutна 0,20,0,0, а свойство Spacing установите на 10:

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

15. На всех четырех кнопках управления установите свойство HorizontalOptions на Center, а свойство WidthRequest — на 150. Например:

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

Полная разметка языка разметки приложений (XAML) для страницы содержимого должна выглядеть следующим образом:

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

Просмотр результатов

Снова запустите приложение и обратите внимание на различия в пользовательском интерфейсе. Убедитесь, что элементы управления выровнены правильно и правильно расположены.

Чтобы улучшить внешний вид существующего пользовательского интерфейса, мы использовали вложенные контейнеры VerticalStackLayout и HorizontalStackLayout. Данные макеты представляют собой простейшие панели, но их вполне достаточно чтобы создать приемлемый пользовательский интерфейс.