Wprowadzenie do stylów WPF

Jeśli znasz programowanie stron internetowych, używając HTML i CSS, szybko zdasz sobie sprawę, że XAML jest bardzo podobny do HTML: używając tagów definiujesz strukturalny układ swojej aplikacji. Możesz nawet nadać elementom określony wygląd, używając właściwości wbudowanych, takich jak Foreground, FontSize i tak dalej, podobnie jak możesz lokalnie stylizować swoje tagi HTML.

Ale co się dzieje, gdy chcesz użyć dokładnie tego samego rozmiaru i koloru czcionki na trzech różnych kontrolkach TextBlock? Możesz skopiować/wkleić żądane właściwości do każdej z nich, ale co się stanie, gdy trzy kontrolki zmienią się w 50 kontrolek, rozproszonych w kilku oknach aplikacji? A co się stanie, gdy zdasz sobie sprawę, że rozmiar czcionki powinien wynosić 14 zamiast 12?

WPF wprowadza style, które są dla XAML tym czym jest CSS dla HTML. Używając stylów, możesz pogrupować zestaw właściwości i przypisać je do określonych kontrolek lub do wszystkich kontrolek określonego typu. Podobnie jak w CSS, styl może dziedziczyć po innym stylu.

Przykład podstawowego stylu

Porozmawiamy znacznie więcej o wszystkich szczegółach, ale w tym rozdziale wprowadzającym chcę pokazać bardzo podstawowy przykład użycia stylizacji:

<Window x:Class="WpfTutorialSamples.Styles.SimpleStyleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SimpleStyleSample" Height="200" Width="250">
    <StackPanel Margin="10">
        <StackPanel.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Foreground" Value="Gray" />
                <Setter Property="FontSize" Value="24" />
            </Style>
        </StackPanel.Resources>
        <TextBlock>Header 1</TextBlock>
        <TextBlock>Header 2</TextBlock>
        <TextBlock Foreground="Blue">Header 3</TextBlock>
    </StackPanel>
</Window>

Styl definiuję w zasobach mojego panelu StackPanel. Używam właściwości TargetType, aby powiązać go ze WSZYSTKIMI kontrolkami TextBlock w danej przestrzeni (tutaj w StackPanel), a następnie dodaję dwa elementy Setter do stylu. Elementy Setter służą do ustawiania określonych właściwości kontrolek docelowych, w tym przypadku właściwości Foreground i FontSize. Właściwość Property określa która właściwość ma być ustawiona, a właściwość Value określa żądaną wartość.

Zauważ, że ostatnia kontrolka TextBlock ma niebieski tekst zamiast szarego. Zrobiłem tak, aby pokazać, że chociaż kontrolka może uzyskać wygląd z określonego stylu, zawsze możesz ten wygląd zmienić lokalnie w kontrolce - wartości zdefiniowane bezpośrednio w kontrolce zawsze będą miały pierwszeństwo przed wartościami stylu.

Podsumowanie

Style WPF bardzo ułatwiają tworzenie określonego wyglądu, a następnie zastosowanie go w kilku kontrolkach. Chociaż ten pierwszy przykład zawierał styl lokalnie zastosowany wewnątrz jednej kontrolki, w następnych rozdziałach pokażę ci, jak tworzyć style globalne.