Übung: Erstellen und Anwenden eines Stils

6 Minuten

In dieser Übung definieren Sie einen Stil auf Seitenebene und wenden ihn in der Anwendung Trinkgeld-Rechner an.

Diese Übung ist eine Fortsetzung der vorherigen Übung. Verwenden Sie entweder Ihre vorhandene Lösung als Ausgangspunkt für diese Schritte, oder öffnen Sie das TipCalculator-Projekt im Ordner exercise3/TipCalculator im Repository, das Sie in der ersten Übung geklont haben.

Definieren eines Stils

Wir beginnen damit, einen Schriftgrad von „Größe 22, fett“ zu implementieren, der für Beschriftungen verwendet wird. Der Stil wird in einem Dictionary auf Seitenebene gespeichert.

Öffnen Sie im TipCalculator-Projekt die Datei StandardTipPage.xaml.

Fügen Sie hinter den vorhandenen Ressourcen einen Stil zum Ressourcenverzeichnis der Seite hinzu. Verwenden Sie infoLabelStyle als Wert für x:Key und Label als Wert für TargetType.

<ContentPage.Resources>
    <ResourceDictionary>
        ...
        <Style x:Key="infoLabelStyle" TargetType="Label">
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

Fügen Sie eine Setter-Instanz hinzu, die die FontSize-Eigenschaft des Stils auf den Wert in der fontSize-Ressource festlegt.

Fügen Sie ein weiteres Setter-Objekt hinzu, das die FontAttributes-Eigenschaft auf Bold festlegt.

<Style x:Key="infoLabelStyle" TargetType="Label">
    <Setter Property="FontSize" Value="{StaticResource fontSize}" />
    <Setter Property="FontAttributes" Value="Bold" />
</Style>

Anwenden des Stils

Suchen Sie die drei Label-Steuerelemente mit einem FontSize-Wert von {StaticResource fontSize} und mit Bold als FontAttributes-Wert. Entfernen Sie diese Eigenschaftenzuweisungen aus den Beschriftungen.

Verwenden Sie die StaticResource-Markuperweiterung, um den folgenden drei Beschriftungen den infoLabelStyle-Stil zuzuweisen:

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

Führen Sie die App aus. Die App sollte genau wie zuvor aussehen. Für die Schriftartattribute der Beschriftungen ist jetzt aber ein Stil festgelegt.

Ändern des Schriftstils

Sehen wir uns einmal an, wie einfach es ist, Stile zu aktualisieren.

Kehren Sie im Ressourcenverzeichnis zu Ihrem Stil zurück, und ändern Sie die fontSize-Ressource in 32.
Führen Sie die App noch mal aus, um die Änderungen zu sehen. Die drei Beschriftungen für Bill, Tip und Total sollten größer sein.
Ändern Sie die fontSize-Ressource wieder in 22.

Erstellen eines Basisstils

Jetzt erweitern wir die Implementierung der StandardTipPage-Seite, indem wir einen Basisstil hinzufügen. Sie definieren einen neuen Stil mit Werten, die sich mit dem Stil überschneiden, den Sie in den vorherigen Schritten erstellt haben. Sie werden diesen neuen Stil im nächsten Teil dieser Übung umgestalten.

Öffnen Sie die Datei StandardTipPage.xaml.
Fügen Sie dem Ressourcenverzeichnis der Seite einen weiteren Stil hinzu. Verwenden Sie baseLabelStyle als Wert für x:Key und Label als Wert für TargetType.

Wichtig

Definieren Sie diesen Stil über den infoLabelStyle-Stil. Diese Positionierung ist später beim Erben von diesem Stil wichtig. Ein Stil kann nur von einem anderen Stil erben, der sich bereits im Bereich befindet.

Fügen Sie ein Setter-Objekt hinzu, das die FontSize-Eigenschaft festlegt. Beachten Sie, dass dies eine Wiederholung des Setters aus dem früheren infoLabelStyle ist.

<ContentPage.Resources>
    <ResourceDictionary>
        ...
        <Style x:Key="baseLabelStyle" TargetType="Label">
            <Setter Property="FontSize" Value="{StaticResource fontSize}" />
        </Style>
        ...
    <ResourceDictionary>
</ContentPage.Resources>

Wenden Sie den neuen baseLabelStyle auf die beiden Beschriftungen auf der Seite an, die die berechneten Beträge für das Trinkgeld und die Gesamtsumme anzeigen. Entfernen Sie die expliziten FontSize-Einstellungen aus diesen Beschriftungen. Der folgende Code enthält hierzu ein Beispiel.

<!-- Right column = user input and calculated-value output -->
...
<Label x:Name="tipOutput"   Text="0.00" TextColor="Navy" Style="{StaticResource baseLabelStyle}" Grid.Row="1" Grid.Column="1" />
<Label x:Name="totalOutput" Text="0.00" TextColor="Navy" Style="{StaticResource baseLabelStyle}" Grid.Row="2" Grid.Column="1" />

Führen Sie die Anwendung aus. Vergewissern Sie sich, dass die berechneten Werte für die Trinkgeld und Gesamtsumme (mit den Werten 0,00) weiterhin ordnungsgemäß formatiert sind.

Verwenden der Stilvererbung

Jetzt können Sie Ihre Stile mithilfe der Vererbung umgestalten. Durch Umgestaltung können Sie die wiederholte Verwendung des Setter-Objekts eliminieren.

Öffnen Sie die Datei StandardTipPage.xaml.
Suchen Sie den infoLabelStyle-Stil im Ressourcenverzeichnis der Seite. Verschieben Sie diesen Stil unter baseLabelStyle im Ressourcenverzeichnis.

Legen Sie die BasedOn-Eigenschaft für den infoLabelStyle-Stil auf baseLabelStyle fest. Entfernen Sie das Setter-Objekt für FontSize. Dieser wird nicht mehr benötigt, da dieser Stil jetzt die FontSize-Einstellung vom Basisstil erbt.

<ContentPage.Resources>
    <ResourceDictionary>
        ...
        <Style x:Key="baseLabelStyle" TargetType="Label">
            <Setter Property="FontSize" Value="{StaticResource fontSize}" />
        </Style>
        <Style x:Key="infoLabelStyle" BasedOn="{StaticResource baseLabelStyle}" TargetType="Label">
            <Setter Property="FontAttributes" Value="Bold" />
        </Style>
    <ResourceDictionary>
</ContentPage.Resources>

Hinweis

Die Reihenfolge der Ressourcen im Ressourcenverzeichnis ist wichtig. Der baseLabelStyle-Stil muss vor allen anderen Stilen definiert werden, die darauf verweisen, da die Stilvererbung sonst nicht funktioniert.