Style

Style można porównać do CSS stosowanego podczas tworzenia stron internetowych. Dzięki temu w jednym miejscu webmaster ustala w jaki sposób poszczególne części witryny będą wyświetlane na stronie. W WPF style umożliwiają ustawienie każdej właściwości typu dependency.

Prosty przykład przypisania stylu do przycisku:

<Window x:Class="WpfApplication4.MainWindow"

       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <Style x:Key="MyButton">

            <Setter Property="Control.FontSize" Value="20" />

            <Setter Property="Control.FontStyle" Value="Italic" />

            <Setter Property="Control.Width" Value="100" />

            <Setter Property="Control.Height" Value="50" />

        </Style>

    </Window.Resources>

    <Grid>

        <Button Style="{StaticResource ResourceKey=MyButton}">Button</Button>

    </Grid>

</Window>

Jak można zauważyć istnieje kilka właściwości stylu które można ustawić:

Setters - pozwalają na przypisanie danych właściwości kontrolce

Triggers - pozwalają na automatyczną zmianę ustawień stylu (np. kiedy zmienić się właściwość można zmienić wygląd itp)

Resources - pozwala na wykorzystanie zasobów (np. jeżeli mamy zamiar zmienić dużą ilość właściwości)

BasedOn - pozwala dziedziczyć inne style

TargetType - pozwala na przypisanie stylu do elementów danego typu w sposób całkowicie automatyczy

Oprócz przypisywania stylu Właściwością, możliwe jest także przypisanie zdarzeniom. Nie jest to tak często stosowana technika, jednak aby kiedyś spotykając taką metodę nie być zdziwionym, krótki przykład:

<Window x:Class="WpfApplication4.MainWindow"

       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <Style x:Key="MyButton">

            <Setter Property="Control.FontSize" Value="20" />

            <Setter Property="Control.FontStyle" Value="Italic" />

            <Setter Property="Control.Width" Value="100" />

            <Setter Property="Control.Height" Value="50" />

            <EventSetter Event="Button.Click" Handler="Click" />

        </Style>

    </Window.Resources>

    <Grid>

        <Button Style="{StaticResource ResourceKey=MyButton}">Button</Button>

    </Grid>

</Window>

Sam kod obsługi zdarzenia:

        public void Click(object sender, EventArgs e)

        {

            MessageBox.Show("You click me!");

        }

Po kliknięciu na przycisk otrzymamy następujący efekt:

Style mogą po sobie dziedziczyć. Jeżeli chcemy wykorzystać jakiś styl do budowy np. przycisku, a następnie reużyć go do zbudowania przycisku ale z czerwoną czcionką można to zrobić w następujący sposób:

<Window x:Class="WpfApplication4.MainWindow"

       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <Style x:Key="MyButton">

            <Setter Property="Control.FontSize" Value="20" />

            <Setter Property="Control.FontStyle" Value="Italic" />

            <Setter Property="Control.Width" Value="100" />

            <Setter Property="Control.Height" Value="50" />

            <EventSetter Event="Button.Click" Handler="Click" />

        </Style>

        <Style x:Key="MyRedButton" BasedOn="{StaticResource ResourceKey=MyButton}">

            <Setter Property="Control.Foreground" Value="Red" />

        </Style>

    </Window.Resources>

    <Grid>

        <Button Style="{StaticResource ResourceKey=MyButton}">Button</Button>

        <Button Style="{StaticResource ResourceKey=MyRedButton}" Margin="202,215,200,46">RedButton</Button>

    </Grid>

</Window>

Wynik:

Triggers

Umożliwiają one automatyczną zmianę stylu w przypadku zmiany np. jakiejś właściwości.

Do dyspozycji mamy kilka rodzajów trigerów:

Trigger - najprostszy wariant, wywołuje się w momencie zmiany określonej właściwości

MultiTrigger - jak wyżej z tą różnicą, że można określić kilka monitorowanych właściwości

DataTrigger - używamy go w przypadku bindowania danych

MultiDataTrigger - podobnie jak MultiTrigger

EventTrigger - pozwala na uzyskanie animacji w przypadku zajścia zdarzenia

Zobaczmy na przykład wykorzystania Triggerów:

W tym przykładzie po najechaniu na przycisk, jego kolor zmieni się na żółty:

<Window x:Class="WpfApplication4.MainWindow"

       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <Style x:Key="MyButton">

            <Style.Setters>

                <Setter Property="Control.FontSize" Value="20" />

                <Setter Property="Control.FontStyle" Value="Italic" />

                <Setter Property="Control.Width" Value="100" />

                <Setter Property="Control.Height" Value="50" />

                <EventSetter Event="Button.Click" Handler="Click" />

            </Style.Setters>

            <Style.Triggers>

                <Trigger Property="Control.IsMouseOver" Value="True" >

                    <Setter Property="Control.Background" Value="Yellow" />

                </Trigger>

            </Style.Triggers>

        </Style>

        <Style x:Key="MyRedButton" BasedOn="{StaticResource ResourceKey=MyButton}">

            <Setter Property="Control.Foreground" Value="Red" />

        </Style>

    </Window.Resources>

    <Grid>

        <Button Style="{StaticResource ResourceKey=MyButton}">Button</Button>

        <Button Style="{StaticResource ResourceKey=MyRedButton}" Margin="202,215,200,46">RedButton</Button>

    </Grid>

</Window>

Korzystanie ze styli jest proste i intuicyjne. Przy użyciu narzędzia Blend można ułatwić sobie ich tworzenie.