Trek Innovations

Windows Presentation Foundation Styles

Using WPF styles, we can handle look and feel of the controls. If we are setting styles, mechanically change look and feel of the every control of that type in that application.

 

XAML styling is very similar to HTML and CSS, and you can apply styling in related behavior. For example, we can define the appearance for all buttons (control) in an application; confine it to all buttons on a screen, to a group of buttons, or to apply a special style for just one button. In that case, XAML came into the picture to define the appearance of the controls. Styles are applied to controls. Styles can be applied to an individual Controls, a page or window or in an external file that can be shared by multiple pages, windows, or applications.

We can apply inline styles directly to an element simply by adding the style property

<Button>

  <Button.Style>

   <Style>

   <Setter Property=”Button.Background” Value=”Green”></Setter>

   <Setter Property=”Button.Foreground” Value=”White”></Setter>

   </Style>

   </Button.Style>

    Cancel

</Button>

We can define styles in a current XAML file using <Window. Resources>.  This style we can use at anywhere in the within a current file. Examples as follows

Style1 :

<Window.Resources >

<StyleTargetType=”{x:Type Label}”>

 <Setter Property=”Button.Background” Value=”Blue”></Setter>

<Setter  Property=”Button.Foreground” Value=”White”></Setter>

</Style>

</Window.Resources >

Note : Above style will apply for all the Label components in the current XAML file

 

<Label>Welcome WPF</Label>

<Label>Sample Message</Label>

 

Style2 :

 

Define the style using X:Key

 

<Window.Resources >

   <Style x:Key=”ButtonStyle1″>

   <Setter Property=”Button.Background” Value=”Red”></Setter>

   <Setter  Property=”Button.Foreground” Value=”White”></Setter>

   </Style>

</Window.Resources >

Note : Above style will apply for all the Button components in the current XAML fiile, whereever we use style x:Key.

<Button Style=”{StaticResource ButtonStyle1}”>Yes</Button>

<Button Style=”{StaticResource ButtonStyle2}”>No</Button>

Outputfor inline, Style1 and Style2 mentioned above

 

Resource Dictionary

To define your styles in a separate file, create a XAML file with a root element of <Resource Dictionary>. We can then reference that external XAML file in your application. The following statement shows an example to work with styles using Recourse Dictionary (WPF) file

Add new item for Recourse Dictionary (WPF) to the current project with the name “Dictionary1.xaml” and write the following

<ResourceDictionary xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”>

  <Style x:Key=”MyButtonStyle”>

   <Setter Property=”Button.Background” Value=”Red”></Setter>

   <Setter Property=”Button.Foreground” Value=”Black”></Setter>

  </Style>

  <Style x:Key=”TextBox”>

  <Setter Property=”TextBox.Background” Value=”Yellow”></Setter>

  <Setter Property=”TextBox.Foreground” Value=”Red”></Setter>

  </Style>

  <StyleTargetType=”{x:Type Label}”>

  <Setter Property=”Button.Background” Value=”Blue”></Setter>

  <Setter  Property=”Button.Foreground” Value=”White”></Setter>

  </Style>

</ResourceDictionary>

 

We can refer the above file in another XAML in the following way

 

<Window.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source=”Dictionary1.xaml”/>

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Window.Resources>

<TextBox Style=”{StaticResource TextBox}”>textBox1</TextBox>

<TextBox Style=”{StaticResource TextBox}”>textBox2</TextBox>

<TextBox Style=”{StaticResource TextBox}” >textBox3</TextBox>

 

 

<Button Style=”{StaticResource MyButtonStyle}”>Ok</Button>

<Button Style=”{StaticResource MyButtonStyle}”>Clear</Button>

 

<Label>Label</Label>

<Label>Label</Label>

 

Output for Recourse Dictionary file

 

2 comments