Övning: Skapa din första XAML-sida

Slutförd

Tekniker från ditt elbolag gör regelbundet kundbesök för att reparera apparater och utföra andra elektriska underhållsuppgifter. En del av appen gör det möjligt för teknikern att göra anteckningar om besöket. Den visar en enkel redigerare där teknikern kan ange informationen och spara dem.

På Android ser appen ut så här:

Du har blivit ombedd att lägga till ytterligare funktioner på den här sidan. Innan du börjar vill du förstå hur sidan skapades, så att du tittar på källkoden. Du märker att användargränssnittet skapades helt med hjälp av C#-kod. Även om den här metoden fungerar intermingles koden som hanterar layouten med den kod som styr hur användargränssnittet fungerar. Du inser att det snart finns en risk för att de två aspekterna av appen låses ihop, vilket gör framtida underhåll svårt och eventuellt gör appen mer bräcklig när fler funktioner läggs till. Du bestämmer dig för att separera användargränssnittets design från användargränssnittslogik genom att extrahera C#-koden som definierar layouten från appen och ersätta den med en XAML-sida.

Den här modulen använder .NET 8.0 SDK. Kontrollera att du har .NET 8.0 installerat genom att köra följande kommando i önskad kommandoterminal:

dotnet --list-sdks

Utdata som liknar följande exempel visas:

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

Kontrollera att en version som börjar med 8 visas. Om inget visas eller om kommandot inte hittas installerar du den senaste .NET 8.0 SDK:t.

Granska den befintliga appen

1. Klona GitHub-lagringsplatsen för den här övningen lokalt på datorn.

   Kommentar

   Det är bäst att klona eller ladda ned övningsinnehållet till en kort mappsökväg, till exempel C:\dev, för att undvika att bygggenererade filer överskrider den maximala sökvägslängden.

2. Flytta till mappen exercise1 i din lokala kopia av lagringsplatsen.

3. Öppna Notes.sln Visual Studio-lösningsfilen i den här mappen eller mappen i Visual Studio Code.

4. I fönstret Solution Explorer expanderar du projektet Anteckningar, expanderar filen MainPage.xaml och öppnar filen MainPage.xaml.cs.

5. Granska klassen MainPage som definierats i den här filen. Konstruktorn innehåller följande kod som skapar användargränssnittet:

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

   Användargränssnittet består av en VerticalStackLayout som innehåller en Label, Editoroch en Grid med tre kolumner. Den första kolumnen innehåller saveButton-kontrollen , den andra är ett blanksteg och den tredje kolumnen har kontrollen deleteButton .

   Följande diagram illustrerar gränssnittets struktur:

   

   Observera att klassen MainPage även innehåller metoder för händelsehantering för knapparna och viss kod som initierar Editor kontrollen. Den här koden skiljer sig inte från användargränssnittsdefinitionen.

6. Skapa och kör appen i Windows, bara för att se hur den ser ut. Välj F5 för att skapa och köra appen.

7. Stäng appen och gå tillbaka till Visual Studio eller Visual Studio Code när du är klar.

Skapa en XAML-version av användargränssnittet

1. Öppna filen MainPage.xaml. Markeringen på den här sidan representerar en tom MAUI-innehållssida:

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

2. Lägg till en VerticalStackLayout kontroll på innehållssidan:

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

3. Lägg till en Label kontroll i VerticalStackLayout. Ange egenskaperna Text, HorizontalTextAlignment och FontAttributes för den här kontrollen enligt nedan:

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

4. Lägg till en Editor kontroll i VerticalStackLayout:

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

5. Lägg till ett underordnat objekt Grid i VerticalStackLayout. Detta Grid bör ha tre kolumner. Den första och den tredje är automatiskt storleksanpassade, medan den andra har en bredd på 30:

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

6. Lägg till en Button i den första kolumnen i den underordnade Grid. Det här är knappen Spara :

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

7. Lägg till en till Button i den tredje kolumnen i den underordnade Grid. Det här är knappen Ta bort :

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

Ta bort layoutkoden från filen bakom koden

1. I fönstret Solution Explorer expanderar du noden MainPage.xaml och öppnar filen MainPage.xaml.cs.

2. Ta bort fältet Redigerare från klassen MainPage.

3. I filen MainPage.xaml.cs tar du bort all kod som skapar användargränssnittselementen i MainPage-konstruktorn och ersätter dem med ett anrop till metoden InitializeComponent . Lägg till kod som kontrollerar om filen som används för att lagra anteckningarna finns, och i så fall läser innehållet och fyller i redigeringskontrollens textfält . Konstruktorn bör se ut så här:

   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. I menyn Skapa väljer du Återskapa lösning. Kontrollera att appen skapas utan fel.

5. Kör programmet. Den bör fungera exakt som tidigare.

6. Om du har tid kan du distribuera och köra appen med Android-emulatorn. Appgränssnittet bör likna det som visas i bilden i början av den här övningen.