Cvičení: Vytvoření první stránky XAML

Dokončeno

Technici z vaší společnosti power utility pravidelně navštíví zákazníky na opravná zařízení a provádějí další úlohy elektrické údržby. Část aplikace umožňuje technikům psát poznámky o návštěvě. Zobrazí jednoduchý editor, kde může technik zadat podrobnosti a uložit je.

V Androidu aplikace vypadá takto:

Byli jste požádáni o přidání dalších funkcí na tuto stránku. Než začnete, chcete pochopit, jak byla stránka vytvořena, takže se podíváte na zdrojový kód. Všimněte si, že uživatelské rozhraní bylo vytvořeno zcela pomocí kódu jazyka C#. I když tento přístup funguje, prolíná kód, který zpracovává rozložení s kódem, který řídí způsob, jakým uživatelské rozhraní funguje. Uvědomujete si, že před dlouhou dobu hrozí nebezpečí, že se dvě aspekty aplikace zamknou dohromady, což ztíží budoucí údržbu a může být aplikace křehkější, protože se přidávají další funkce. Rozhodnete se oddělit návrh uživatelského rozhraní od logiky uživatelského rozhraní extrahováním kódu jazyka C#, který definuje rozložení z aplikace a nahradí ho stránkou XAML.

Tento modul používá sadu .NET 8.0 SDK. Spuštěním následujícího příkazu v upřednostňovaném příkazovém terminálu se ujistěte, že máte nainstalované rozhraní .NET 8.0:

dotnet --list-sdks

Zobrazí se výstup podobný následujícímu příkladu:

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

Ujistěte se, že je uvedená verze, na 8 které začíná. Pokud žádný není uvedený nebo příkaz nebyl nalezen, nainstalujte nejnovější sadu .NET 8.0 SDK.

Kontrola existující aplikace

1. Naklonujte úložiště GitHub pro toto cvičení místně na počítači.

   Poznámka:

   Nejlepší je naklonovat nebo stáhnout obsah cvičení do krátké cesty ke složce, jako je C:\dev, aby se zabránilo překročení maximální délky cesty vygenerovaných sestavením.

2. Přejděte do složky cvičení1 v místní kopii úložiště.

3. Otevřete soubor řešení Notes.sln sady Visual Studio v této složce nebo ve složce v editoru Visual Studio Code.

4. V okně Průzkumník řešení rozbalte projekt Poznámky, rozbalte soubor MainPage.xaml a otevřete MainPage.xaml.cs soubor.

5. Zkontrolujte třídu MainPage definovanou v tomto souboru. Konstruktor obsahuje následující kód, který vytvoří uživatelské rozhraní:

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

   Uživatelské rozhraní se skládá z nástavce VerticalStackLayout Label, Editora se Grid třemi sloupci. První sloupec obsahuje ovládací prvek saveButton , druhý je mezerník a třetí sloupec obsahuje ovládací prvek deleteButton .

   Následující diagram znázorňuje strukturu uživatelského rozhraní:

   

   Všimněte si, že Třída MainPage obsahuje také metody zpracování událostí pro tlačítka a určitý kód, který inicializuje Editor ovládací prvek. Tento kód se nerozlišuje od definice uživatelského rozhraní.

6. Sestavte a spusťte aplikaci ve Windows, abyste viděli, jak vypadá. Výběrem klávesy F5 sestavte a spusťte aplikaci.

7. Zavřete aplikaci a po dokončení se vraťte do sady Visual Studio nebo Visual Studio Code.

Vytvoření verze XAML uživatelského rozhraní

1. Otevřete soubor MainPage.xaml. Revize na této stránce představuje prázdnou stránku obsahu 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 Přidejte ovládací prvek na stránku obsahu:

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

3. Label Přidejte do ovládacího VerticalStackLayoutprvku . Nastavte vlastnosti Text, HorizontalTextAlignment a FontAttributes tohoto ovládacího prvku, jak je znázorněno níže:

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

4. Editor Přidejte ovládací prvek doVerticalStackLayout:

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

5. Grid Přidejte dítě do souboru VerticalStackLayout. To Grid by mělo mít tři sloupce; první a třetí mají automatickou velikost, zatímco druhá má šířku 30:

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

6. Přidejte do Button prvního sloupce podřízeného Gridsloupce . Toto je tlačítko Uložit :

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

7. Přidejte další Button do třetího sloupce podřízeného Gridsloupce . Toto je tlačítko Odstranit :

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

Odebrání kódu rozložení ze souboru za kódem

1. V okně Průzkumník řešení rozbalte uzel MainPage.xaml a otevřete soubor MainPage.xaml.cs.

2. Odeberte pole Editor z třídy MainPage.

3. V souboru MainPage.xaml.cs v konstruktoru MainPage odeberte veškerý kód, který vytváří prvky uživatelského rozhraní, a nahraďte je voláním InitializeComponent metoda. Přidejte kód, který zkontroluje, jestli soubor použitý k uložení poznámek existuje, a pokud ano, přečte obsah a naplní textové pole ovládacího prvku Editor. Konstruktor by měl vypadat takto:

   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. V nabídce Sestavení vyberte Znovu sestavit řešení. Ověřte, že se aplikace sestaví bez chyb.

5. Aplikaci spusťte. Měla by fungovat přesně jako předtím.

6. Pokud máte čas, nasaďte a spusťte aplikaci pomocí emulátoru Androidu. Uživatelské rozhraní aplikace by mělo vypadat podobně jako na obrázku na začátku tohoto cvičení.