Упражнение. Создание первой страницы XAML

Завершено

Инженеры вашей компании, которая является энергоснабжающей организацией, регулярно посещают клиентов для ремонта различных устройств и выполнения других задач по обслуживанию электрооборудования. Часть приложения позволяет инженеру делать заметки о посещении. В приложении отображается простой редактор, в котором инженер может ввести сведения и сохранить их.

На устройстве Android приложение выглядит следующим образом:

Вас попросили добавить на эту страницу дополнительные функции. Перед началом работы вы хотите понять, как была создана страница, поэтому вы посмотрите на исходный код. Обратите внимание, что пользовательский интерфейс был создан полностью с помощью кода C#. Хотя этот подход работает, он пересекает код, обрабатывающий макет с кодом, который управляет способом работы пользовательского интерфейса. Вы понимаете, что в ближайшее время существует опасность двух аспектов приложения, которые становятся заблокированными, что затрудняет будущее обслуживание и, возможно, делает приложение более хрупким, так как добавляются дополнительные функции. Вы решили отделить структуру пользовательского интерфейса от логики пользовательского интерфейса, путем извлечения из приложения кода C#, который определяет макет, и заменить его страницей на базе XAML.

В этом модуле используется пакет SDK для .NET 8.0. Убедитесь, что установлен .NET 8.0, выполнив следующую команду в предпочтительном терминале команд:

dotnet --list-sdks

Выходные данные, аналогичные следующему примеру, отображаются:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Убедитесь, что в списке есть версия, которая начинается с цифры 8. Если нет списка или команда не найдена, установите последний пакет SDK для .NET 8.0.

Проверка существующего приложения

1. Специально для этого упражнения клонируйте Репозиторий GitHub, сделайте это локально на своем компьютере.

   Примечание.

   Рекомендуется клонировать или скачать содержимое упражнения в короткий путь к папке, например C:\dev, чтобы избежать превышения максимальной длины пути сборки.

2. Перейдите в папку exercise1 в локальной копии репозитория.

3. Откройте файл решения Notes.sln Visual Studio в этой папке или папке в Visual Studio Code.

4. В окне Обозреватель решений разверните проект Notes, разверните файл MainPage.xaml и откройте файл MainPage.xaml.cs.

5. Проверьте класс страницы MainPage, определенный в этом файле. Конструктор содержит следующий код, создающий пользовательский интерфейс:

   public MainPage()
   {
       var notesHeading = new Label() { Text = "Notes", HorizontalOptions = LayoutOptions.Center, FontAttributes = FontAttributes.Bold };
   
       editor = new Editor() { Placeholder = "Enter your note", HeightRequest = 100 };
       editor.Text = File.Exists(_fileName) ? File.ReadAllText(_fileName) : string.Empty;
   
       var buttonsGrid = new Grid() { HeightRequest = 40.0 };
       buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });
       buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(30.0, GridUnitType.Absolute) });
       buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });
   
       var saveButton = new Button() { WidthRequest = 100, Text = "Save" };
       saveButton.Clicked += OnSaveButtonClicked;
       Grid.SetColumn(saveButton, 0);
       buttonsGrid.Children.Add(saveButton);
   
       var deleteButton = new Button() { WidthRequest = 100, Text = "Delete" };
       deleteButton.Clicked += OnDeleteButtonClicked;
       Grid.SetColumn(deleteButton, 2);
       buttonsGrid.Children.Add(deleteButton);
   
       var stackLayout = new VerticalStackLayout 
       { 
           Padding = new Thickness(30, 60, 30, 30),
           Children = { notesHeading, editor, buttonsGrid }
       };
   
       this.Content = stackLayout;
   }
   

   Пользовательский интерфейс составлен на базе VerticalStackLayout, содержащем Label, Editor и сетку Grid с тремя столбцами. Первый столбец содержит элемент управления saveButton, второй — пробел, а третий — элемент управления deleteButton.

   На следующей схеме показана структура пользовательского интерфейса:

   

   Обратите внимание, что класс MainPage также содержит методы обработки событий для кнопок и некоторый код, который инициализирует Editor элемент управления. Этот код не отличается от кода определения пользовательского интерфейса.

6. Создайте и запустите приложение на Windows, чтобы увидеть, как оно выглядит. Выберите F5 , чтобы создать и запустить приложение.

7. Закройте приложение и вернитесь в Visual Studio или Visual Studio Code после завершения работы.

Создание XAML-версии пользовательского интерфейса.

1. Откройте файл MainPage.xaml. Разметка на этой странице представляет пустую страницу контента MAUI:

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="Notes.MainPage">
   
   </ContentPage>
   

2. Добавьте элемент управления VerticalStackLayout на страницу контента:

   <ContentPage ...>
       <VerticalStackLayout Margin="30,60,30,30">
   
       </VerticalStackLayout>
   </ContentPage>
   

3. Добавьте элемент управления Label в VerticalStackLayout. Задайте свойства Text, HorizontalTextAlignment и FontAttributes этого элемента управления, как представлено ниже:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label Text="Notes"
                  HorizontalOptions="Center"
                  FontAttributes="Bold" />
       </VerticalStackLayout>
   </ContentPage>
   

4. Добавьте элемент управления Editor в VerticalStackLayout:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor x:Name="editor"
                   Placeholder="Enter your note"
                   HeightRequest="100" />
       </VerticalStackLayout>
   </ContentPage>
   

5. Добавьте дочерний элемент Grid в объект VerticalStackLayout. В сетке Grid должно быть три столбца: первый и третий получают размер автоматически, а второй имеет ширину 30:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor .../>
   
           <Grid ColumnDefinitions="Auto, 30, Auto">
   
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

6. Добавьте кнопку Button в первый столбец дочерней сетки Grid. Это — кнопка Сохранить:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor .../>
   
           <Grid ...>                    
               <Button Grid.Column="0"
                       Text="Save" 
                       WidthRequest="100"
                       Clicked="OnSaveButtonClicked" />
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

7. Добавьте еще одну кнопку Button к третьему столбцу дочерней сетки Grid. Это — кнопка Удалить:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor .../>
   
           <Grid ...>                    
               <Button ... />
   
               <Button Grid.Column="2"
                       Text="Delete" 
                        WidthRequest="100"
                       Clicked="OnDeleteButtonClicked" />
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

Удаление кода макета из файла кода программной части

1. В окне Обозреватель решений разверните узел MainPage.xaml и откройте файл MainPage.xaml.cs.

2. Удалите поле Редактор из класса MainPage.

3. В файле MainPage.xaml.cs, в конструкторе MainPage удалите весь код, который создает элементы пользовательского интерфейса, и замените их вызовом метода InitializeComponent. Добавьте код, который проверяет, существует ли файл, используемый для хранения заметок, и если да, считывает содержимое и заполняет текстовое поле элемента управления редактора. Конструктор должен выглядеть следующим образом:

   public partial class MainPage : ContentPage
   {
       string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");
   
       public MainPage()
       {
           InitializeComponent();
   
           if (File.Exists(_fileName))
           {
               editor.Text = File.ReadAllText(_fileName);
           }
       }
   
       ...
   }
   

4. В меню Сборка выберите Собрать решение повторно. Убедитесь, что приложение выполняет сборку без ошибок.

5. Запустите приложение. Оно должно работать точно так же, как и раньше.

6. Если у вас есть время, разверните и запустите приложение с помощью эмулятора Android. Пользовательский интерфейс приложения должен выглядеть так, как показано на изображении в начале этого упражнения.