Szablony w WPF

Jako początkujący programista chciałem tworzyć aplikacje, które będą ładne. Z pomocą przyszła technologia WPF stworzona przez Microsoft. Z jej pomocą udało mi się napisać programy, które cieszyły oko użytkownika. Z czasem niestety zaczęło to być coraz trudniejsze w utrzymaniu, bo wygląd okna był zakodowany w ponad 1500 wierszy, z czego najprostszy opis przycisku to było kilka długich linijek.
Przy kolejnych aplikacjach stwierdziłem, że trzeba coś z tym zrobić. Po przekopaniu internetu udało mi się znaleźć sporo ciekawych informacji o szablonach. Po co mam każdy przycisk opisywać, jak mogę opisać raz i narzucić ten wygląd na całą aplikację?

Zaczynając od początku: musimy do naszego projektu dodać nowy element, a mianowicie Resource Dictionary.

Następnie do pliku App.xaml dodajemy informację o pliku z którego będzie czerpała cała nasza aplikacja:

<Application x:Class="DB.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:DB"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ResourcesTemplate.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

No i teraz najfajniejsza zabawa, czyli doprowadzenie aplikacji do pożądanego wyglądu. Ja często kopiuję kolory z Visual Studio, bo są ładne (przynajmniej w mojej ocenie) i klientom się podobają ze względu na profesjonalny wygląd 🙂

Stworzenie stylu przycisku nie jest może super proste, ale podrzucam gotowy przykład (kopiujcie do woli 😉 ):

    <Color x:Key="ColorText">#c5c5c5</Color>
    <Color x:Key="ColorBackground">#3e3e3e</Color>

    <!-- Button -->
    <Style TargetType="Button">
        <Setter Property="Margin" Value="5"></Setter>
        <Setter Property="FontSize" Value="20"></Setter>
        <Setter Property="Foreground">
            <Setter.Value>
                <SolidColorBrush Color="{StaticResource ColorText}"/>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Border BorderBrush="#2d2d2d" BorderThickness="4" CornerRadius="15" >
                            <Border.Background>
                                <SolidColorBrush Color="{StaticResource ColorBackground}"/>
                            </Border.Background>
                        </Border>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Teraz wszystkie buttony w naszej aplikacji będą wyglądały dokładnie tak samo.

Zamiast kopiować długich linijek opisujących wygląd przycisku wstawimy tylko jego wielkość, wyświetlany tekst i podepniemy eventy. Opis wyglądu staje się znacznie prostszy i bardziej czytelny, a zmiana koncepcji wyglądu to tak naprawdę poprawienie kilku elementów w jednym pliku i cała aplikacja od razu się zmienia. Ot, takie małe czary 🙂