Ćwiczenie: Tworzenie pierwszej strony XAML

Ukończone

Inżynierowie z firmy zajmującej się energią regularnie odwiedzają urządzenia do naprawy urządzeń i wykonują inne zadania konserwacji elektrycznej. Część aplikacji umożliwia inżynierowi zapisywanie notatek dotyczących wizyty. Wyświetla on prosty edytor, w którym inżynier może wprowadzić szczegóły i zapisać je.

W systemie Android aplikacja wygląda następująco:

Poproszono Cię o dodanie kolejnych funkcji do tej strony. Przed rozpoczęciem chcesz dowiedzieć się, jak strona została utworzona, aby przyjrzeć się kodowi źródłowemu. Zauważysz, że interfejs użytkownika został utworzony całkowicie przy użyciu kodu języka C#. Mimo że to podejście działa, przeplata kod, który obsługuje układ za pomocą kodu kontrolującego sposób działania interfejsu użytkownika. Zdajesz sobie sprawę, że na długo istnieje niebezpieczeństwo, że dwa aspekty aplikacji stają się zablokowane razem, co utrudnia przyszłą konserwację i ewentualnie sprawia, że aplikacja staje się bardziej krucha, ponieważ dodawane są więcej funkcji. Decydujesz się oddzielić projekt interfejsu użytkownika od logiki interfejsu użytkownika, wyodrębniając kod języka C#, który definiuje układ z aplikacji i zastępując go stroną XAML.

W tym module jest używany zestaw .NET 8.0 SDK. Upewnij się, że masz zainstalowany program .NET 8.0, uruchamiając następujące polecenie w preferowanym terminalu poleceń:

dotnet --list-sdks

Zostanie wyświetlone dane wyjściowe podobne do następującego przykładu:

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

Upewnij się, że na liście znajduje się wersja rozpoczynająca się od 8 . Jeśli żadna z nich nie znajduje się na liście lub polecenie nie zostanie znalezione, zainstaluj najnowszy zestaw SDK platformy .NET 8.0.

Przeglądanie istniejącej aplikacji

1. Sklonuj repozytorium GitHub na potrzeby tego ćwiczenia lokalnie na komputerze.

   Uwaga

   Najlepiej sklonować lub pobrać zawartość ćwiczenia do krótkiej ścieżki folderu, takiej jak C:\dev, aby uniknąć plików wygenerowanych przez kompilację przekraczającą maksymalną długość ścieżki.

2. Przejdź do folderu exercise1 w lokalnej kopii repozytorium.

3. Otwórz plik rozwiązania Notes.sln Visual Studio w tym folderze lub folderze w programie Visual Studio Code.

4. W oknie Eksplorator rozwiązań rozwiń projekt Notatki, rozwiń plik MainPage.xaml i otwórz plik MainPage.xaml.cs.

5. Przejrzyj klasę MainPage zdefiniowaną w tym pliku. Konstruktor zawiera następujący kod, który tworzy interfejs użytkownika:

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

   Interfejs użytkownika składa się z VerticalStackLayout Labelelementu , Editori z trzema Grid kolumnami. Pierwsza kolumna zawiera kontrolkę saveButton , drugą jest odstęp, a trzecia kolumna ma kontrolkę deleteButton .

   Na poniższym diagramie przedstawiono strukturę interfejsu użytkownika:

   

   Należy pamiętać, że klasa MainPage zawiera również metody obsługi zdarzeń dla przycisków i kodu, który inicjuje kontrolkę Editor . Ten kod nie różni się od definicji interfejsu użytkownika.

6. Skompiluj i uruchom aplikację w systemie Windows, aby zobaczyć, jak wygląda. Wybierz pozycję F5 , aby skompilować i uruchomić aplikację.

7. Zamknij aplikację i wróć do programu Visual Studio lub Visual Studio Code po zakończeniu.

Tworzenie wersji XAML interfejsu użytkownika

1. Otwórz plik MainPage.xaml. Znacznik na tej stronie reprezentuje pustą stronę zawartości 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. Dodaj kontrolkę VerticalStackLayout do strony zawartości:

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

3. Dodaj kontrolkę Label do elementu VerticalStackLayout. Ustaw właściwości Text, HorizontalTextAlignment i FontAttributes tej kontrolki, jak pokazano poniżej:

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

4. Dodaj kontrolkę Editor do elementu VerticalStackLayout:

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

5. Dodaj element podrzędny Grid do elementu VerticalStackLayout. Powinno to Grid mieć trzy kolumny; pierwszy i trzeci mają automatycznie rozmiar, a drugi ma szerokość 30:

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

6. Dodaj element do Button pierwszej kolumny podrzędnej Grid. Jest to przycisk Zapisz:

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

7. Dodaj kolejną Button kolumnę do trzeciej kolumny podrzędnej Grid. To jest przycisk Usuń :

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

Usuwanie kodu układu z pliku za pomocą kodu

1. W oknie Eksplorator rozwiązań rozwiń węzeł MainPage.xaml i otwórz plik MainPage.xaml.cs.

2. Usuń pole Edytor z klasy MainPage.

3. W pliku MainPage.xaml.cs w konstruktorze MainPage usuń cały kod, który tworzy elementy interfejsu użytkownika, i zastąp je wywołaniem metody InitializeComponent. Dodaj kod sprawdzający, czy plik używany do przechowywania notatek istnieje, a jeśli tak, odczytuje zawartość i wypełnia pole Text kontrolki Edytor. Konstruktor powinien wyglądać następująco:

   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. W menu Kompilacja wybierz pozycję Kompiluj ponownie rozwiązanie. Sprawdź, czy aplikacja jest kompiluje bez żadnych błędów.

5. Uruchom aplikację. Powinna działać dokładnie tak jak wcześniej.

6. Jeśli masz czas, wdróż i uruchom aplikację przy użyciu emulatora systemu Android. Interfejs użytkownika aplikacji powinien przypominać ten, który pokazano na obrazie na początku tego ćwiczenia.