ARTICLE

Control Style in WPF

Posted by Mahak Gupta Articles | WPF February 21, 2012
Control Styles in WPF are used to share the structure and a reusable format, which we can apply in most of our controls.
Reader Level:
Download Files:
 

Control Styles in WPF are used to share the structure in a reusable format, which we can apply in most of our controls. These are the styles which we describe in a particular format and then we use it in our control according to our requirement. The Base is <Window.Resources> XML element which contains a <Style> XML element. The <Style> element contains the <Setter> XML elements. Here we take an example of the Button Control. In this program we set the Style of the Button with the help of a Style Attribute:

<Window x:Class="ControlStylesInWPF.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width
="300">
    <Window.Resources>
        <Style x:Key="BoldStyle">
            <Setter Property="Control.FontSize" Value="10" />
                <Setter Property="Control.FontWeight" Value="Bold" />
                    <Setter Property="Control.BorderThickness" Value="1" />

        </Style>
        <Style x:Key="SmallStyle">
            <Setter Property="Control.FontSize" Value="5" />
                <Setter Property="Control.FontWeight" Value="Normal" />
                    <Setter Property="Control.BorderThickness" Value="2" />
        </Style>
    </Window.Resources>
    <Grid>
        <Button
Style="{StaticResource SmallStyle }"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Grid.Column="0"
Grid.ColumnSpan="1"
Grid.Row="0"
Grid.RowSpan="1"
Margin="43,61,0,0"
Width="75"
Height="23"
Name="btnClick">Click
       
</Button>
    </Grid>
</
Window>

In this example we set the Style Attribute of the Button to SmallStyle:

Style="{StaticResource SmallStyle }"

Here is the output:

CntrlStyWPF1.gif

And if we set it to BoldStyle:

Style="{StaticResource BoldStyle }"

CntrlStyWPF2.gif

We can also set it programmatically:

Here we first define a Click Event on the Button Control:

<Grid>
        <Button
Style="{StaticResource BoldStyle }"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Grid.Column="0"
Grid.ColumnSpan="1"
Grid.Row="0"
Grid.RowSpan="1"
Margin="43,61,0,0"
Width="75"
Height="23"
Name="btnClick" Click="MyFirstClick">Click
       
</Button>
    </Grid>

And then we write the EventHandler in the .cs page:

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
    }
    private void MyFirstClick(object sender, RoutedEventArgs e)
    {
        btnClick.Style = (Style)FindResource("BoldStyle");
    }
}


To change the style SmallStyle To BoldStyle programmatically:

CntrlStyWPF3.gif

After click:

CntrlStyWPF4.gif

Login to add your contents and source code to this article
post comment
     

Thanks

Posted by Mahak Gupta Feb 23, 2012

Hi Mahak. You have presented your article very nicely.

Posted by Stephen Johnson Feb 22, 2012

Good job done Mahak.

Posted by Laura Parker Feb 22, 2012

Thanks for this great useful stuff.

Posted by James Lerdorf Feb 21, 2012
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
Get Career Advice from Experts
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Get Career Advice from Experts