Skip to main content

WPF Style

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

  1. WPF Dependency Properties
  2. WPF Resource
  3. WPF Binding

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

Comments

Popular posts from this blog

Generate QR Code in WPF

Introduction In my previous two blogs, we have discussed how to display generate and display various barcodes on the web page. In this blog, we are going to demonstrate how to Generate QR Code in the WPF application. Getting Started Here in the demonstration Generate QR Code in WPF , will generate QR code using third party library as there is not inbuilt library provided by Microsoft to generate QR code and will display in WPF image control, In the below, we will see the steps to display QR Code. As I mentioned in the above paragraph that there is no inbuild library provided by Microsoft to generate QR code, I have taken the help of the ZXing library which is a third party free library and available Nuget. This library provides various options to generate barcodes and QR Code from the user-friendly text. Generate QR Code in WPF Here are the steps to generate QR code and let's follow the steps to complete demonstrations. Demonstration:- Generate QR Code Open visual stud

Creating Application in Prism

Introduction This article explains an illustration of creating a windows application in Prism Library(WPF Prism). The solution includes recommended practices and techniques and is the basis for the procedures in Prism. This illustration created in the Visual Studio 2012, It can also developed in the visual studio 2008 and 2010, because wpf supports from .net framework 3.5 to latest version. Microsoft.Practices.Prism.dll. This assembly contains the implementation of the Prism Library core components such as modularity, logging services, communication services, and definitions for several core interfaces. It also contains the implementation of Prism Library components that target WPF applications, including commands, regions, and events. Microsoft.Practices.Prism.UnityExtensions.dll. This assembly contains base and utility classes you can reuse in applications built with the Prism Library that consume the Unity Application Block. For example, it contains a bootstrapper base class

WPF Binding

Introduction This blog describes WPF Binding and the measure elements exist with binding with XAML example in XAML and code-behind. Getting Started Binding helps in WPF to flow data from one object to another object, the object which fetches data is called source and the object which receives the data is called target. The Object a be a UI control or object of a class that means in binding you can bind a property of a class and property of another control to WPF UI controls as well. XAML Example <TextBox x:Name="sourceText" Grid.Row="0" /> <Button Grid.Row="1" Content="{Binding ElementName=sourceText, Path=Text}"/> Code Example Button btn=new Button(); Binding binding = new Binding("Text"); binding.Source = sourceText; btn.SetBinding(Button.ContentProperty, binding); In WPF binding has some measure properties or elements that we are using while developing application or projects, here we are going to d