Övning: Skapa och tillämpa ett format

  • 6 minuter

I den här övningen definierar och tillämpar du ett format på sidnivå i tipskalkylatorn.

Den här övningen är en fortsättning på föregående övning. Använd antingen din befintliga lösning som utgångspunkt för de här stegen eller öppna TipCalculator-projektet i mappen exercise3/TipCalculator på den lagringsplats som du klonade i den första övningen.

Definiera ett format

Vi börjar med att implementera teckensnittsformatet "size 22 Bold" för etiketterna. Lagra formatet i en ordlista på sidnivå.

  1. Öppna filen StandardTipPage.xaml i TipCalculator-projektet.

  2. Lägg till ett format i sidans resursordlista efter de befintliga resurserna. Använd värdet x:Key för infoLabelStyle och ett TargetType-värde för Etikett.

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

  3. Lägg till en Setter-instans som anger egenskapen FontSize för formatet till värdet i fontSize-resursen.

  4. Lägg till en annan Setter som anger egenskapen FontAttributes till Fet.

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

Använd formatmallen

  1. Leta upp de tre etikettkontrollerna som använder ett FontSize-värde för {StaticResource fontSize} och ett FontAttributes-värde med fet stil. Ta bort dessa egenskapstilldelningar från etiketterna.

  2. Använd Tillägget StaticResource-markering för att tilldela infoLabelStyle-formatet till följande tre etiketter:

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

  3. Kör appen. Appen bör se exakt ut som den gjorde tidigare. Teckensnittsattributen för etiketterna anges dock nu med ett format.

Ändra teckensnittsformatet

Nu ska vi ta en titt på hur det är enkelt att uppdatera formatmallar.

  1. Gå tillbaka till formatet i resursordlistan och ändra fontSize-resursen till 32.

  2. Kör appen igen för att visa ändringarna. De tre etiketterna för Bill, Tip och Total bör vara större.

  3. Ändra tillbaka fontSize-resursen till 22.

Skapa ett basformat

Nu ska vi utöka implementeringen av sidan StandardTipPage genom att lägga till ett basformat. Du definierar ett nytt format med värden som överlappar formatmallen som du skapade i föregående steg. Sedan omstrukturerar du det här nya formatet i nästa del av den här övningen.

  1. Öppna filen StandardTipPage.xaml.

  2. Lägg till ett annat format i sidans resursordlista. Använd ett x:Key-värde för baseLabelStyle och ett TargetType-värde för Etikett.

    Viktigt!

    Definiera det här formatet ovanför infoLabelStyle-formatmallen. Den här positioneringen är viktig senare när du ärver från det här formatet. Ett format kan bara ärva från ett annat format som redan finns i omfånget.

  3. Lägg till en Setter som anger egenskapen FontSize . Observera att den här settern är en upprepning av setter från den tidigare infoLabelStyle.

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

  4. Använd den nya baseLabelStyle på de två etiketterna på sidan som visar de beräknade beloppen för tipset och summan. Ta bort de explicita FontSize-inställningarna från dessa etiketter. Följande kod visar ett exempel.

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

  5. Kör programmet. Kontrollera att värdena för beräknade tip- och totalbelopp (som innehåller värdena 0,00) fortfarande är korrekt formaterade.

Använd formatarv

Nu är du redo att omstrukturera formatmallarna med hjälp av arv. Med refaktorisering kan du eliminera upprepad användning av FontSize-settern .

  1. Öppna filen StandardTipPage.xaml.

  2. Leta upp formatet infoLabelStyle i sidans resursordlista. Kontrollera att det här formatet ligger under baseLabelStyle i resursordlistan.

  3. Ange egenskapen BasedOn för formatet infoLabelStyle till baseLabelStyle. Ta bort setter för FontSize. Du behöver den inte längre eftersom det här formatet nu ärver inställningen FontSize från basformatet.

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

    Kommentar

    Ordningen på resurserna i resursordlistan är viktig. BaseLabelStyle-formatet måste definieras innan andra formatmallar som refererar till det annars inte fungerar.

  4. Kör appen och kontrollera att formatmallarna för etiketterna och de beräknade beloppen fortfarande är korrekt formaterade.