Introduction
Styles in WPF is the most one of the important feature, because of the style we also prefer WPF over normal Win Form. This article explains details about WPF styles, type of styles and various ways of defining styles.
Getting Started
In WPF style is used to design a WPF control like background color, border color etc. it enables the sharing of properties, resources, and event handlers between instances of a type. Normally a style is an unique object which is used to style WPF controls. Each WPF element contains a number of Dependency Properties.
A dependency property defines the basic behavior and looks of the control in UI. Styles maintains a collection of Setters which enumerates a DependencyProperty with its value, thus you can say a style is a collection of DependencyProperty settings which when applied on a Target will change the behavior of it.
There are mainly two way to creating style in WPF that are Behind code and XAML Code
Style in Code Behind
Style style = new Style { TargetType = typeof(Button) };
style.Setters.Add(new Setter(Button.BackgroundProperty, Brushes.Blue));
style.Setters.Add(new Setter(Button.ForegroundProperty, Brushes.White));
style.Setters.Add(new Setter(Button.PaddingProperty,8.4));
style.Setters.Add(new Setter(Button.MarginProperty, 4));
Style in XAML
<Style x:Key="myStyle" TargetType="Button">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="8,4" />
<Setter Property="Margin" Value="4" />
</Style>
Type of Style
There are two types of styles available in WPF one is Explicit andImplicit style.
A control can have a style defined in the application and applied to its Style property. If your control is using a Style to define its look and feel or basically your control has set an object of Style into its Style property, then it is using an ExplicitStyle.
On the other hand, if your control takes the style from external environment (Theme) and the Style property is set to Null, then your control is using Implicit Style.
Various Ways of Defining Style
In WPF style can be defined in various ways, based on the scope,Location, Use and restriction WPF divided the ways of defining style that are explained below.
Application-wide styles
If you want your styles to be used all over the application, across different windows, you can define it for the entire application. This is done in the App.xaml file that Visual Studio has likely created for you, and it's done just like in the window-wide example:
<Application x:Class="SpireOffice.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:SpireOffice" StartupUri="MainWindow.xaml"> <Application.Resources> <Style TargetType="Button"> <Setter Property="Background" Value="Black"></Setter> <Setter Property="Foreground" Value="White"></Setter> <Setter Property="Padding" Value="8,4"></Setter> <Setter Property="Margin" Value="4"></Setter> </Style> </Application.Resources> </Application>Window-wide styles
When it is required that style should be apply only to the controls those are exists in the same window, where style also exists.
<Window x:Class="SpireOffice.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:SpireOffice" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <Style TargetType="Button"> <Setter Property="Background" Value="Black"></Setter> <Setter Property="Foreground" Value="White"></Setter> <Setter Property="Padding" Value="8,4"></Setter> <Setter Property="Margin" Value="4"></Setter> </Style> </Window.Resources> <Grid> <Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="211,102,0,0" Click="button_Click"/> </Grid> </Window>The above style will only be available to the controls those are in the current window.
Local child control style
When you want your style should be available or apply to the child controls, than you can define the style this way. Using the Resources section of a control, you can target child controls of this control and child controls of those child controls and so on.
<Grid> <Grid.Resources> <Style TargetType="Button"> <Setter Property="Background" Value="Black"></Setter> <Setter Property="Foreground" Value="White"></Setter> <Setter Property="Padding" Value="8,4"></Setter> <Setter Property="Margin" Value="4"></Setter> </Style> </Grid.Resources> </Grid>The above style will be available to the controls whose are comes under the grid and will not be available to controls those are not come under the grid controls means the child control of grid can use this style.
Local control specific style
When we are defining style directly in the controls is called Local control specific style and the style only available only for that particular controls in WPF. Below XAML code describes how to declare style in Local control specific style way.
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="211,102,0,0" Click="button_Click"> <Button.Style> <Style TargetType="Button"> <Setter Property="Background" Value="Black"></Setter> <Setter Property="Foreground" Value="White"></Setter> <Setter Property="Padding" Value="8,4"></Setter> <Setter Property="Margin" Value="4"></Setter> </Style> </Button.Style> </Button>Explicitly using styles
When we are defining style in any resource and providing key value to the style, this type of defining is called Explicitly using styles. This style can be applied to a particular controls in WPF by its key value.
Window x:Class="SpireOffice.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:SpireOffice" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <Style TargetType="Button" x:Key="mybuttonstyle"> <Setter Property="Background" Value="Black"></Setter> <Setter Property="Foreground" Value="White"></Setter> <Setter Property="Padding" Value="8,4"></Setter> <Setter Property="Margin" Value="4"></Setter> </Style> </Window.Resources> <Grid> <Button x:Name="button" Style="{StaticResource mybuttonstyle}" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="211,102,0,0" Click="button_Click"/> </Grid> </Window>The above code declared a style in windows resource and apply into a button control. This style will not be applied any of this windows child controls by default.
Related Articles
Summary
In the above of this article we have discussed about style, type of style and different ways of declaring style in WPF, hope you got the discussion details.
Thanks