Övning: Använda resurser på sidnivå

Slutförd

Alla övningar i den här modulen relaterar till det fördefinierade TipCalculator-programmet . Du ändrar och förbättrar den här appen i hela modulen. I den här övningen använder du resurser på sidnivå för att eliminera upprepade XAML-värden.

I den här modulen används .NET 9.0 SDK. Kontrollera att du har .NET 9.0 installerat genom att köra följande kommando i önskad kommandoterminal:

dotnet --list-sdks

Utdata som liknar följande exempel visas:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

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

Öppna startlösningen

1. Klona eller ladda ned övningsrepo från GitHub.

   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ägens längd.

2. Öppna startlösningen från mappen exercise1/TipCalculator med hjälp av Visual Studio eller den här mappen direkt i Visual Studio Code.

3. Kontrollera att den bygger och körs i din miljö. (Alla plattformar är bra.)

4. Det tar några minuter att undersöka och köra programmet så att du förstår hur det fungerar.

   Programmet innehåller två sidor. Sidan StandardTipPage är en enkel tipskalkylator. Du anger ett värde och sidan beräknar tipset (15 %) och den totala förfallna summan. Följande bild visar programmet som körs på en Android-enhet:

   

   Med knapparna Ljus och Mörk kan du ändra färgtemat på sidan. Standardinställningen är temat Ljus. Om du väljer Mörk är färgerna för bakgrunden och texten omvända.

   Knappen Använd anpassad kalkylator växlar visningen till sidan CustomTipPage . På den här sidan kan du variera tipsprocenten med hjälp av ett skjutreglage. Du kan också välja knapparna 15 % och 20 % för att beräkna tipset baserat på fördefinierade priser.

   

Hitta upprepad XAML

1. Öppna filen StandardTipPage.xaml.

2. Leta upp XAML-markering som anger bakgrundsfärgen för LayoutRoot-rutnätet . Observera att det använder ett hårdkodat värde.

   <Grid x:Name ="LayoutRoot" BackgroundColor="Silver" Padding="10">
   

3. Leta upp XAML-markering som anger textfärgen för etiketterna i den "vänstra kolumnen" till Marin och teckenstorleken till 22. Observera att samma värden används på tre etiketter.

   <!-- Left column = static labels -->
   <Label x:Name="billLabel"  Text="Bill"  TextColor="Navy" FontSize="22" ... />
   <Label x:Name="tipLabel"   Text="Tip"   TextColor="Navy" FontSize="22" ... />
   <Label x:Name="totalLabel" Text="Total" TextColor="Navy" FontSize="22" ... />
   

4. Leta reda på XAML-koden som anger färgen på etiketterna i den "högra kolumnen" till Marin och punktstorleken till 22. Observera att samma värden används på två etiketter.

   Vissa egenskapsinställningar verkar utgöra en logisk grupp. Till exempel används kombinationen av Navy och 22 på flera etiketter.

   <!-- Right column = user input and calculated-value output -->
   <Entry ... />
   <Label x:Name="tipOutput"   Text="0.00" TextColor="Navy" FontSize="22"   ... />
   <Label x:Name="totalOutput" Text="0.00" TextColor="Navy" FontSize="22"   ... />
   

   Överväg arbetet med att ändra värdena TextColor och FontSize . Du skulle behöva ändra det på fem platser.

Definiera resurser

Nu ska vi skapa resurser i XAML, så att du kan börja eliminera en del av den upprepade kod som du hittade i programmet.

1. Öppna filen StandardTipPage.xaml.

2. Definiera en färgresurs i avsnittet ContentPage.Resources . Ge resursen ett x:Key-resurs-ID för bgColor och värdet #C0C0C0 (du kan också använda namnet på färgen Silver).

3. Definiera en andra färgresurs . Ge den ett x:Key-resurs-ID för fgColor och värdet #0000AD (du kan också använda namnet på färgen Navy).

4. Definiera en x:Double-resurs med ett ID för fontSize. Ange värdet för den här resursen till 22.

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                ...>
   
       <ContentPage.Resources>
           <ResourceDictionary>
               <Color x:Key="bgColor">#C0C0C0</Color>
               <Color x:Key="fgColor">#0000AD</Color>
               <x:Double x:Key="fontSize">22</x:Double>
           </ResourceDictionary>
       </ContentPage.Resources>
   
       <Grid x:Name ="LayoutRoot" ...>
           ...
   

Använda statiska resurser

Nu ska vi använda de resurser som du skapade.

1. Använd Tillägget StaticResource-markering för att tillämpa bgColor-resursen på egenskapen Background i LayoutRoot Grid-kontrollen.

   ...
   <Grid x:Name ="LayoutRoot" BackgroundColor="{StaticResource bgColor}" Padding="10">
   

2. Använd fgColor-resursen på egenskapen TextColor för alla etikettkontroller som för närvarande anger TextColor till Marin. Ersätt dessutom den hårdkodade teckenstorleken med den statiska resursen fontSize .

   ...
   <!-- Left column = static labels -->
   <Label x:Name="billLabel"  Text="Bill"  TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
   <Label x:Name="tipLabel"   Text="Tip"   TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
   <Label x:Name="totalLabel" Text="Total" TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
   ...
   

3. Kör programmet. Kontrollera att StandardTipPage fortfarande visar mörk text på en ljus bakgrund vid start, precis som tidigare.

Kommentar

Oroa dig inte för formateringen för CustomTipPage eller de ljusa och mörka temana i det här läget. Du kommer att åtgärda dessa problem senare.