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 🙂
