Po dłuższej przerwie wracamy do kursu o WPF. Dziś będzie o stylach.

WPF wprowadza nowość w zakresie zmiany wyglądu kontrolek. Wszystkie są stworzone w taki sposób, że logika jest oddzielona od wyglądu. Dzięki temu możemy zmienić wygląd cały czas zachowując funkcjonalność.

Style

Co za pomocą nich możemy uzyskać?
Załóżmy, że chcemy zmienić wygląd przycisków w naszej aplikacji, moglibyśmy zmieniać te same ustawienia dla każdego przycisku oddzielnie, ale za pomocą stylów możemy to zrobić w jednym miejscu i po prostu przypisać nasze ustawienia do każdego przycisku. Zobaczmy na krótki przykład:

<StackPanel.Resources>

    <Style x:Key=”przycisk”>

        <Setter Property=”Button.FontSize” Value=”22″ />

        <Setter Property=”Button.Background” Value=”Orange” />

        <Setter Property=”Button.Width” Value=”60″ />

    Style>

StackPanel.Resources>

Definiujemy sobie, iż nasze przyciski będą na 60 pixeli szeroie,, tło będzie ustawione na kolor pomarańczowy oraz rozmiar fontu ustawimy na 22.
Jak użyć takich ustawień? Zaaplikujemy je do właściwości Style.

<Button Content=”1″ Style=”{StaticResource przycisk}”/>

<Button Content=”2″ Style=”{StaticResource przycisk}”/>

<Button Content=”3″ Style=”{StaticResource przycisk}”/>

<Button Content=”4″ Style=”{StaticResource przycisk}”/>

<Button Content=”5″ Style=”{StaticResource przycisk}”/>

Jaki da nam to efekt?

Oczywiście możemy też ustawiać bardziej skomplikowane właściwości

<Setter Property=”Button.RenderTransform”>

    <Setter.Value>

        <SkewTransform CenterX=”.5″ CenterY=”.5″ AngleX=”-10″ AngleY=”15″ />

    Setter.Value>

Setter>

Dodatkowo jeśli chcemy możemy ograniczyć dany styl, tylko no konkretnej klasy. Jeśli nasz styl zapiszemy jako:

<Style TargetType=”{x:Type Button}”>

    <Setter Property=”FontSize” Value=”22″ />

    <Setter Property=”Background” Value=”Orange” />

    <Setter Property=”Width” Value=”60″ />

    <Setter Property=”RenderTransform”>

        <Setter.Value>

            <SkewTransform CenterX=”.5″ CenterY=”.5″ AngleX=”-10″ AngleY=”15″ />

        Setter.Value>

    Setter>

Style>

Wtedy wszystkie przyciski automatycznie przyjmą ten styl. Oczywiście nadal będziemy mogli zmienić wygląd przycisku na poziomie konkretnego obiektu.

O stylach na dziś tyle. Następnym razem będzie o triggerach.