Übung: Verwenden von Ressourcen auf Seitenebene

  • 5 Minuten

Alle Übungen in diesem Modul beziehen sich auf die vorgefertigte TipCalculator-Anwendung . Sie werden diese App im Verlauf dieses Moduls ändern und verbessern. In dieser Übung verwenden Sie Ressourcen auf Seitenebene, um wiederholte Werte aus XAML-Code (Extensible Application Markup Language) zu entfernen.

In diesem Modul wird das .NET 9.0 SDK verwendet. Stellen Sie sicher, dass .NET 9.0 installiert ist, indem Sie in Ihrem bevorzugten Befehlsterminal den folgenden Befehl ausführen:

dotnet --list-sdks

Die daraufhin angezeigte Ausgabe sieht in etwa wie im folgenden Beispiel aus:

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

Stellen Sie sicher, dass eine Version aufgeführt wird, die mit 9 beginnt. Wenn keine aufgeführt ist oder der Befehl nicht gefunden wird, installieren Sie das neueste .NET 9.0 SDK.

Öffnen der Startprojektmappe

  1. Klonen oder Herunterladen des Übungs-Repositorys von GitHub.

    Hinweis

    Es empfiehlt sich, den Übungsinhalt in einen kurzen Ordnerpfad wie z. B. „C:\dev“ zu klonen oder herunterzuladen. So vermeiden Sie, dass vom Build generierte Dateien die maximale Pfadlänge überschreiten.

  2. Öffnen Sie die Startlösung aus dem Ordner "übung1/TipCalculator " mithilfe von Visual Studio, oder öffnen Sie diesen Ordner direkt in Visual Studio Code.

  3. Stellen Sie sicher, dass die Erstellung und Ausführung in Ihrer Umgebung funktioniert. Jede Plattform ist in Ordnung.

  4. Nehmen Sie sich ein paar Minuten Zeit, um die Anwendung zu prüfen und auszuführen, damit Sie verstehen, wie sie sich verhält.

    Die Anwendung stellt zwei Seiten bereit. Die Seite "StandardTipPage " ist ein einfacher Tipprechner. Sie geben einen Wert ein, und die Seite berechnet das Trinkgeld (15 %) und den fälligen Gesamtbetrag. Die folgende Abbildung zeigt die Anwendung, die auf einem Android-Gerät ausgeführt wird:

    Screenshot der Standardmäßigen Tippseite der Tipprechner-App, die unter Android ausgeführt wird.

    Mit den Schaltflächen "Hell " und " Dunkel " können Sie das Farbdesign der Seite ändern. Die Standardeinstellung ist das Thema „Hell“. Wenn Sie "Dunkel" auswählen, werden die Farben für den Hintergrund und den Text umgekehrt.

    Mit der Schaltfläche Benutzerdefinierten Rechner verwenden wird die Anzeige auf die Seite CustomTipPage umgeschaltet. Diese Seite ermöglicht es Ihnen, den Prozentsatz des Trinkgeldes mit Hilfe eines Schiebereglers zu variieren. Sie können auch die Schaltflächen 15% und 20% auswählen, um den Tipp basierend auf vordefinierten Raten zu berechnen.

    Screenshot der benutzerdefinierten Tippseite des Tipprechners in Android.

Suchen von Wiederholungen in XAML

  1. Öffnen Sie die Datei "StandardTipPage.xaml ".

  2. Suchen Sie das XAML-Markup, das die Hintergrundfarbe des LayoutRoot-Rasters festlegt. Beachten Sie, dass es einen fest codierten Wert verwendet.

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

  3. Suchen Sie das XAML-Markup, mit dem die Textfarbe der Beschriftungen in der „linken Spalte“ auf Navy und die Schriftgröße auf 22 gesetzt wird. Beachten Sie, dass diese Werte in drei Bezeichnungen verwendet werden.

    <!-- 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. Suchen Sie den XAML-Code, der die Farbe der Bezeichnungen in der „rechten Spalte“ auf Navy und den Schriftgrad auf 22 festlegt. Beachten Sie, dass diese Werte in zwei Bezeichnungen verwendet werden.

    Einige der Eigenschaftseinstellungen scheinen eine logische Gruppe zu bilden. Die Kombination aus „Navy“ und „22“ beispielsweise wird in vielen Beschriftungen verwendet.

    <!-- 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"   ... />

    Berücksichtigen Sie die Arbeit beim Ändern der Werte "TextColor " und "FontSize ". Sie müssten diesen an fünf Stellen ändern.

Definieren von Ressourcen

Lassen Sie uns nun Ressourcen in XAML erstellen, damit Sie damit beginnen können, einen Teil des sich wiederholenden Codes zu entfernen, den Sie in der Anwendung gefunden haben.

  1. Öffnen Sie die Datei "StandardTipPage.xaml ".

  2. Definieren Sie eine Color-Ressource innerhalb eines ContentPage.Resources-Abschnitts. Geben Sie der Ressource eine x:Key-Ressourcen-ID von bgColor und den Wert #C0C0C0 (Sie können auch den Namen der Farbe Silververwenden).

  3. Definieren Sie eine zweite Farbressource . Geben Sie ihm eine x:Key-Ressourcen-ID von fgColor und den Wert #0000AD (Sie könnten auch den Namen der Farbe Navyverwenden).

  4. Definieren Sie eine x:Double-Ressource mit einer ID von fontSize. Legen Sie den Wert dieser Ressource auf 22 fest.

    <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" ...>
        ...

Verwenden von statischen Ressourcen

Nun wenden wir die Ressourcen an, die Sie erstellt haben.

  1. Verwenden Sie die StaticResource-Markierungserweiterung , um die bgColor-Ressource auf die Background-Eigenschaft des LayoutRootGrid-Steuerelements anzuwenden.

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

  2. Wenden Sie die Ressource fgColor auf die Eigenschaft TextColor aller LabelSteuerelemente an, die derzeit die TextColor auf Navy setzen. Ersetzen Sie außerdem den hartcodierten Schriftgrad durch die statische Ressource 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. Führen Sie die Anwendung aus. Vergewissern Sie sich, dass "StandardTipPage " beim Start weiterhin dunklen Text auf einem hellen Hintergrund anzeigt, wie zuvor.

Hinweis

Machen Sie sich an dieser Stelle keine Gedanken über den Stil für CustomTipPage oder für die Designs Hell und Dunkel. Diese Themen werden später noch behandelt.