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