Stylowanie w WPF CZ. 1

Stylowanie w WPF (Windows Presentation Foundation) pozwala na zmianę wyglądu aplikacji bez zmiany jej logiki. Możesz myśleć o stylach jak o zbiorach reguł, które mówią elementom interfejsu, jak mają wyglądać. Stylowanie jest bardzo ważne, bo pozwala na łatwe i szybkie dostosowanie wyglądu aplikacji, a także zapewnia spójność wizualną.

Co to jest styl?

Styl w WPF to zbiór właściwości, które definiują wygląd kontrolki. Możesz ustawić styl dla jednej kontrolki lub dla wszystkich kontrolek danego typu. Styl składa się z klucza (opcjonalnie) i zestawu ustawień, które opisują, jak elementy mają być prezentowane.

Jak używać stylów?

Stylowanie w WPF jest bardzo elastyczne. Możesz tworzyć style bezpośrednio w plikach XAML twojej aplikacji.

Przykład 1: Styl dla Buttona

Załóżmy, że chcesz, aby wszystkie przyciski w twojej aplikacji miały niebieskie tło i biały tekst.

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="Blue"/>
        <Setter Property="Foreground" Value="White"/>
    </Style>
</Window.Resources>

Przykład 2: Styl z kluczem

Jeśli chcesz zastosować styl do konkretnego przycisku, a nie do wszystkich, możesz nadać stylowi klucz.

<Window.Resources>
    <Style x:Key="SpecialButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Green"/>
        <Setter Property="Foreground" Value="Black"/>
    </Style>
</Window.Resources>

<Button Style="{StaticResource SpecialButtonStyle}" Content="Kliknij mnie"/>

Przykład 3: Stylowanie TextBox

Załóżmy, że chcesz, aby wszystkie pola tekstowe miały szare tło i czarny tekst.

<Window.Resources>
    <Style TargetType="TextBox">
        <Setter Property="Background" Value="Gray"/>
        <Setter Property="Foreground" Value="Black"/>
    </Style>
</Window.Resources>

Przykład 4: Dziedziczenie styli

Możesz także tworzyć style bazujące na innych stylach, co jest przydatne, gdy chcesz, aby jeden styl był rozszerzeniem drugiego.

<Window.Resources>
    <Style x:Key="BaseButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Yellow"/>
        <Setter Property="Foreground" Value="Black"/>
    </Style>
    <Style BasedOn="{StaticResource BaseButtonStyle}" TargetType="Button" x:Key="DerivedButtonStyle">
        <Setter Property="FontWeight" Value="Bold"/>
    </Style>
</Window.Resources>

<Button Style="{StaticResource DerivedButtonStyle}" Content="Jestem pogrubiony"/>

Przykład 5: Stylowanie za pomocą Triggers

Triggery pozwalają na zmianę stylu elementu w odpowiedzi na zmiany jego stanu, np. gdy najedziesz na niego myszką.

<Window.Resources>
 <Style TargetType="Button">
     <Setter Property="Background"  Value="DimGray"/>
     <Setter Property="Foreground" Value="#fffbf3"/>
     <Setter Property="FontSize" Value="20"/>
     <Setter Property="Margin" Value="5"/>
     <Setter Property="BorderThickness" Value="0.1"/>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="Button">
                 <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10">
                     <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                 </Border>
                 <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver" Value="True">
                         <Setter Property="Background" Value="Red"/>
                         <Setter Property="Foreground" Value="#fffbf3"/>
                     </Trigger>
                 </ControlTemplate.Triggers>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>
</Window.Resources>

Przykład 6: Zaokrąglone rogi przycisku

 <Style TargetType="Button" x:Key="numberButtonColor">
     <Setter Property="Background"  Value="DimGray"/>
     <Setter Property="Foreground" Value="#fffbf3"/>
     <Setter Property="FontSize" Value="20"/>
     <Setter Property="Margin" Value="5"/>
     <Setter Property="BorderThickness" Value="0.1"/>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="Button">
                 <Border Background="{TemplateBinding Background}"
           BorderBrush="{TemplateBinding BorderBrush}"
           BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10">
                     <ContentPresenter HorizontalAlignment="Center"
                         VerticalAlignment="Center"/>
                 </Border>
                 <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver" Value="True">
                         <Setter Property="Opacity" Value="0.6"/>
                         <Setter Property="Foreground" Value="#fffbf3"/>
                         <Setter Property="Cursor" Value="Hand"/>
                     </Trigger>
                 </ControlTemplate.Triggers>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

Wyjaśnienie:

<Style TargetType="Button" x:Key="numberButtonColor">

Definiuje styl specyficznie dla obiektów typu Button. Styl ten jest identyfikowany przez klucz numberButtonColor, co pozwala na jego zastosowanie do wybranych przycisków.

    <Setter Property="Background"  Value="DimGray"/>

Ustawia domyślne tło wszystkich przycisków korzystających z tego stylu na kolor DimGray.

    <Setter Property="Foreground" Value="#fffbf3"/>

Określa domyślny kolor tekstu (pierwszoplanowy) na kolor określony kodem heksadecymalnym #fffbf3 (blady beż).

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

Ustawia rozmiar czcionki tekstu na przycisku na 20 punktów.

  <Setter Property="Margin" Value="5"/>

Definiuje margines wokół przycisku, tworząc odstęp o wielkości 5 jednostek z każdej strony.

<Setter Property="BorderThickness" Value="0.1"/>

Ustawia grubość obramowania przycisku na 0.1, co sugeruje bardzo cienką linię wokół przycisku.

<Setter Property="Template">

Zaczyna definicję niestandardowego szablonu (ControlTemplate), który pozwala na pełne dostosowanie wyglądu przycisku.

 <Setter.Value>

Określa wartość dla ustawienia szablonu.

 <ControlTemplate TargetType="Button">

Definiuje szablon, który zostanie zastosowany do przycisków, pozwalając na niestandardowe renderowanie.

<Border Background="{TemplateBinding Background}"
 BorderBrush="{TemplateBinding BorderBrush}"
 BorderThickness="{TemplateBinding BorderThickness}" 
 CornerRadius="10">

Tworzy obramowanie dla przycisku z zaokrąglonymi rogami (CornerRadius="10"), gdzie kolor tła, pędzel obramowania i grubość są powiązane z odpowiednimi właściwościami przycisku.

<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>

ContentPresenter wyśrodkowuje zawartość przycisku (np. tekst) zarówno w poziomie, jak i pionie.

 <ControlTemplate.Triggers>

Rozpoczyna definicję triggerów dla szablonu, które pozwalają na zmianę wyglądu przycisku na podstawie jego stanu.

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

Definiuje trigger, który reaguje, gdy użytkownik najedzie kursorem na przycisk (IsMouseOver).

  <Setter Property="Opacity" Value="0.6"/>

Zmniejsza przezroczystość przycisku do 60%, czyniąc go półprzezroczystym, gdy kursor jest nad nim.

 <Setter Property="Cursor" Value="Hand"/>

Zmienia kursor na ikonę dłoni, wskazując, że przycisk jest klikalny.

Możliwości modyfikacji:

Możesz zmienić wartości Background, Foreground, FontSize, Margin, BorderThickness oraz CornerRadius w zależności od potrzeb.
Można dostosować trigger IsMouseOver, np. zmieniając kolor tła zamiast przezroczystości.

Podsumowanie

Stylowanie w WPF pozwala na elastyczne i łatwe dostosowanie wyglądu aplikacji. Używając styli, możesz zmieniać kolory, czcionki, marginesy i wiele innych właściwości kontrolek bez zmiany ich logiki. Dzięki temu tworzenie atrakcyjnych i spójnych interfejsów użytkownika jest znacznie prostsze.

C#

C# WPF