Friday, September 23, 2011

WPF Styles

Styles can be used to define a standard color and sizing scheme of an application. It is analogous to StyleSheets in Web application. You can define properties like background color, foreground color, height, width, in short, any dependency property of the control.

Style is the primary class for using Styles in WPF. IT has following properties:
  • Setters - Used to set properties or events of controls
  • TargetType - Used to define the control for which the style is created
  • BasedOn - To base your style on an existing style
  • Resources - collection of local resources
  • Triggers - A set of actions/setters getting executed when a change occurs
Setters
Setters are of two types
1) Property Setters
2) Event Setters
 
Property Setters are defined as follows:
        <Setter Property="Button.Background" Value="Blue"/>

You can define n no of Setters in a style. Also you can use the TargetType property to define the type of control for which the style is designed. Example,

 <Style TargetType="{x:Type TextBox}">
            <Setter Property="Height" Value="25"/>
            <Setter Property="Width" Value="200"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Background" Value="Yellow"/>
</Style>

Event Setters are used to define handler for specific events. Although mostly we prefer to write events in control definition itself, like,
<Button Name="btnClick" Content="Click Me" Click="btnClick_Click" />

But it never hurts to learn more.
<EventSetter Event="MouseEnter" Handler="btnMouseEnter"/>

Styles can be applied in various ways.
1) Directly as in built style of a control. Example,
     <Label Content="Styles Demo" >
            <Label.Style>
                <Style>
                    <Setter Property="Label.Foreground" Value="Green"/>
                    <Setter Property="Label.FontSize" Value="20"/>
                    <Setter Property="Label.FontWeight" Value="Bold"/>
                </Style>
            </Label.Style>
        </Label>

2) Styles can be defined in a resource collection, for example, inside <Window.Resources> tags. And they can be given an ID or key, so that they are referenced easily.
<Window.Resources>
        <Style x:Key="buttonStyle">
            <Setter Property="Button.Background" Value="Black"/>
            <Setter Property="Button.Foreground" Value="White"/>
            <Setter Property="Button.Height" Value="30"/>                    
        </Style>
</Window.Resources>

<Grid>
       <Button Content="Click Me" Style="{StaticResource buttonStyle}" />
</Grid>

3) You can also set style for all the same type of controls on a window. This can be done by jus defininf the target type. That means if we define a style with target type as Button, it will apply to all buttons on the window even if they dnt reference them. (Note, however, TargetType property can also be used in conjunction with x:Key property)

 <Style TargetType="{x:Type TextBox}">
            <Setter Property="Height" Value="25"/>
            <Setter Property="Width" Value="200"/>
            <Setter Property="Background" Value="Yellow"/>
</Style>

4) Finally, we can apply style through code. That is simple too..

//Create Style
 //Create Setter
firstSetter.Property =
firstSetter.Value =
 //Add Setters to style objectwinStyle.Setters.Add(firstSetter);


//Apply style on windowWindow1.Style = winStyle;

===========================================================================================


Setter firstSetter = new Setter();Window.BackgroundProperty;Brushes.Pink;

Style winStyle = new Style();

No comments:

Post a Comment