Oefening: Een stijl maken en toepassen

6 minuten

In deze oefening definieert en past u een stijl op paginaniveau toe in de toepassing TipCalculator.

Deze oefening is een voortzetting van de vorige oefening. Gebruik uw bestaande oplossing als uitgangspunt voor deze stappen of open het TipCalculator-project in de map exercise3/TipCalculator in de opslagplaats die u in de eerste oefening hebt gekloond.

Een stijl definiëren

Laten we beginnen met het implementeren van een tekenstijl 'grootte 22 vet' voor de etiketten. Sla de stijl op in een woordenlijst op paginaniveau.

Open in het Project TipCalculator het bestand StandardTipPage.xaml .

Voeg na de bestaande resources een stijl toe aan de resourcewoordenlijst van de pagina. Gebruik een x:Key-waarde van infoLabelStyle en een TargetType-waarde van Label.

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

Voeg een Setter-exemplaar toe waarmee de eigenschap FontSize van de stijl wordt ingesteld op de waarde in de fontSize-resource.

Voeg nog een setter toe waarmee de eigenschap FontAttributes wordt ingesteld op Vet.

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

De stijl toepassen

Zoek de drie labelbesturingselementen die gebruikmaken van een FontSize-waarde van {StaticResource fontSize} en een FontAttributes-waarde van Bold. Verwijder deze eigenschapstoewijzingen uit de labels.

Gebruik de markeringsextensie StaticResource om de stijl infoLabelStyle toe te wijzen aan deze drie labels:

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

De app uitvoeren. De app moet er precies zo uitzien als voorheen. De lettertypekenmerken voor de labels worden nu echter ingesteld met een stijl.

De tekenstijl wijzigen

Laten we eens kijken hoe u stijlen eenvoudig kunt bijwerken.

Ga terug naar uw stijl in de resourcewoordenlijst en wijzig de fontSize-resource in 32.
Voer de app opnieuw uit om de wijzigingen weer te geven. De drie labels voor Factuur, Tip en Totaal moeten groter zijn.
Wijzig de fontSize-resource weer in 22.

Een basisstijl maken

Laten we de implementatie van de pagina StandardTipPage uitbreiden door een basisstijl toe te voegen. U definieert een nieuwe stijl met waarden die overlappen met de stijl die u in de vorige stappen hebt gemaakt. Vervolgens herstructureer u deze nieuwe stijl in het volgende deel van deze oefening.

Open het bestand StandardTipPage.xaml .
Voeg nog een stijl toe aan de resourcewoordenlijst van de pagina. Gebruik een x:Key-waarde van baseLabelStyle en een TargetType-waarde van Label.

Belangrijk

Definieer deze stijl boven de infoLabelStyle-stijl . Deze positionering is later belangrijk wanneer u deze stijl overdraft. Een stijl kan alleen overnemen van een andere stijl die al binnen het bereik valt.

Voeg een setter toe waarmee de eigenschap FontSize wordt ingesteld. U ziet dat deze setter een herhaling is van de setter uit de eerdere infoLabelStyle.

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

Pas de nieuwe baseLabelStyle toe op de twee labels op de pagina waarop de berekende bedragen voor de tip en het totaal worden weergegeven. Verwijder de expliciete FontSize-instellingen van deze labels. De volgende code laat een voorbeeld zien.

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

Voer de toepassing uit. Controleer of de waarden voor de berekende tip en de totale bedragen (met de waarden 0,00) nog steeds correct zijn opgemaakt.

Stijlovername gebruiken

U bent nu klaar om uw stijlen te herstructureren met behulp van overname. Met herstructurering kunt u het herhaalde gebruik van de FontSize-setter elimineren.

Open het bestand StandardTipPage.xaml .
Zoek de infoLabelStyle-stijl in de resourcewoordenlijst van de pagina. Zorg ervoor dat deze stijl zich onder de baseLabelStyle in de resourcewoordenlijst bevindt.

Stel de eigenschap BasedOn voor de stijl infoLabelStyle in op baseLabelStyle. Verwijder de setter voor FontSize. U hebt deze niet meer nodig omdat deze stijl nu de instelling FontSize over neemt van de basisstijl.

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

Notitie

De volgorde van de resources in de resourcewoordenlijst is belangrijk. De baseLabelStyle-stijl moet worden gedefinieerd voor alle andere stijlen die ernaar verwijzen, anders werkt de overname van stijlen niet.