Ćwiczenie: tworzenie i stosowanie stylu

6 min

W tym ćwiczeniu zdefiniujesz i zastosujesz styl na poziomie strony w aplikacji Kalkulator porad.

To ćwiczenie jest kontynuacją poprzedniego ćwiczenia. Użyj istniejącego rozwiązania jako punktu początkowego dla tych kroków lub otwórz projekt TipCalculator w folderze exercise3/TipCalculator w repozytorium sklonowanym w pierwszym ćwiczeniu.

Definiowanie stylu

Zacznijmy od zaimplementowania stylu czcionki "size 22 Bold" do użycia dla etykiet. Zapisz styl w słowniku na poziomie strony.

W projekcie TipCalculator otwórz plik StandardTipPage.xaml .

Dodaj styl do słownika zasobów strony po istniejących zasobach. Użyj wartości x:Key elementu infoLabelStyle i wartości TargetType etykiety.

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

Dodaj wystąpienie klasy Setter, które ustawia właściwość FontSize stylu na wartość w zasobie fontSize.

Dodaj kolejny zestaw ustawiający właściwość FontAttributes na pogrubioną.

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

Stosowanie stylu

Znajdź trzy kontrolki Label, które używają wartości FontSize {StaticResource fontSize} i FontAttributes wartości Bold. Usuń te przypisania właściwości z etykiet.

Użyj rozszerzenia znaczników StaticResource, aby przypisać styl infoLabelStyle do następujących trzech etykiet:

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

Uruchom aplikację. Aplikacja powinna wyglądać dokładnie tak, jak wcześniej. Jednak atrybuty czcionki dla etykiet są teraz ustawiane za pomocą stylu.

Zmienianie stylu czcionki

Przyjrzyjmy się, jak łatwo aktualizować style.

Wróć do stylu w słowniku zasobów i zmień zasób fontSize na 32.
Uruchom ponownie aplikację, aby wyświetlić zmiany. Trzy etykiety bill, Tip i Total powinny być większe.
Zmień zasób fontSize z powrotem na 22.

Tworzenie stylu podstawowego

Rozszerzmy implementację strony StandardTipPage , dodając styl podstawowy. Definiujesz nowy styl z wartościami, które nakładają się na styl utworzony w poprzednich krokach. Następnie refaktoryzujesz ten nowy styl w następnej części tego ćwiczenia.

Otwórz plik StandardTipPage.xaml.
Dodaj inny styl do słownika zasobów strony. Użyj wartości x:Key baseLabelStyle i wartości TargetType etykiety.

Ważne

Zdefiniuj ten styl powyżej stylu infoLabelStyle . To pozycjonowanie będzie ważne później, gdy dziedziczysz z tego stylu. Styl może dziedziczyć tylko z innego stylu, który jest już w zakresie.

Dodaj element Setter, który ustawia właściwość FontSize. Zwróć uwagę, że ten setter jest powtórzeniem elementu setter z wcześniejszych informacjiLabelStyle.

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

Zastosuj nowy element baseLabelStyle do dwóch etykiet na stronie, które wyświetlają obliczone kwoty dla końcówki i sumy. Usuń jawne ustawienia FontSize z tych etykiet. Poniższy kod przedstawia przykład.

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

Uruchom aplikację. Sprawdź, czy wartości obliczonych porad i łącznych kwot (zawierających wartości 0,00) są nadal poprawnie stylizowany.

Używanie dziedziczenia stylu

Teraz możesz przystąpić do refaktoryzacji stylów przy użyciu dziedziczenia. Refaktoryzacja pozwala wyeliminować powtarzające się użycie metody ustawiającej.

Otwórz plik StandardTipPage.xaml.
Znajdź styl infoLabelStyle w słowniku zasobów strony. Przenieś ten styl poniżej stylu baseLabelStyle w słowniku zasobów.

Ustaw właściwość BasedOn dla stylu infoLabelStyle na baseLabelStyle. Usuń moduł ustawiania dla właściwości FontSize. Nie jest już potrzebny, ponieważ ten styl dziedziczy teraz ustawienie FontSize z stylu podstawowego.

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

Uwaga

Kolejność zasobów w słowniku zasobów jest ważna. Styl baseLabelStyle musi być zdefiniowany, zanim wszelkie inne style odwołujące się do niego w przeciwnym razie dziedziczenie stylu nie będzie działać.

Uruchom aplikację i sprawdź, czy style etykiet i obliczone kwoty są nadal poprawnie stylowane.

Kontynuuj