Infragistics WPF controls

XAML Basics: Styles

WPF Succinctly Download

 

 

 

 

 

Styles in XAML

If you are a Microsoft Windows developer, chances are you are using XAML with one of the prominent development technologies (WPF, Windows Phone, SilverLight, WinRT).  XAML is a wonderful markup language that provides a whole new look at developing applications for the Microsoft Windows operating system.  In this series, I plan to cover the basics of XAML as they apply to these technologies.  Microsoft has put a lot behind XAML and I think we know that it has a bright future when it comes to Windows development.

What are XAML styles?

You can think of a style in XAML much as you would CSS styles in HTML.  Styles provide a way for you to change the visual properties of a given control or set of controls.  Never before has the developer had this much freedom when it comes to changing the appearance of the standard Windows controls.  Using Styles you can declare the font size and family of all buttons in an application.  You can create style resource files that serve as style libraries that can be shared by applications.

This article will use WPF as the technology when explaining XAML styles, however, most if not all of the principles can be used with the other XAML based technologies.

Defining styles in your application

The way that you define styles is very much the same in WPF, SilverLight, and WinRT applications with subtle differences.  You can define styles at the Window, Page, UserControl, Application, and Resource Dictionary levels.

We will start with an example of a WPF window called MainWindow.xaml.

MainWindow.xaml

<Window x:Class="WPF_styles_article_example.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Orientation="Vertical" >
            <Button Margin="20" Name="btnOne" Content="Button One" 
                    Width="260" Height="40">
            </Button>

            <Button Margin="20" Name="btnTwo" Content="Button two" 
                    Width="260" Height="40">
            </Button>
        </StackPanel>
    </Grid>
</Window>
 

Here's the output

As you can see, we have two buttons contained inside of a StackPanel.  They both share the same height and width.

You typically want a consistent look for all elements of your application.  If you were to follow the method used in this example, you would need to find each button in the entire application to make any changes to the properties of your buttons.  The more properties that are set on the button, the more potential properties that you would need to change.

The XAML style object

Styles are defined in a Style object.  A xaml Style contains a collection of Setter objects.  These Setter objects allow you to specify the control type in which the style should be applied, the property of the control to change, and the property value that you wish to set for the specified control type.  Styles are defined in Resource Dictionaries.  Once you've created your Style and populated the setters to define the properties and property values to be applied, you can then reference this resource in the Style property of the control that you wish style.  

Here is an example of changing the style of a control by binding a style resource to the control's Style property.

<Window x:Class="WPF_styles_article_example.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <!-- Here we define our Style object and populate it's setter collection 
            with property names and values.  Notice that we specify the TargetType as the
            type of control that can use the style.
        -->
        <Style x:Key="CustomButtonStyle"  TargetType="Button">
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="Width" Value="260" />
            <Setter Property="Height" Value="40" />
        </Style>    
    </Window.Resources>
    
    <Grid>
        <StackPanel Orientation="Vertical" >
            <!-- Notice that we have moved all visual property settings into the
                 style resource.  -->
            <Button Margin="20" x:Name="btnOne" Content="Button One" 
                      Style="{StaticResource CustomButtonStyle}" />
            
            <Button Margin="20" Name="btnTwo" Content="Button two" 
                    Width="260" Height="40" />
            
            <!-- Notice that setting the properties on the Button will override 
                 the properties specified in the style. -->
            <Button Margin="20" Name="btnThree" Content="Button three" 
                    Style="{StaticResource CustomButtonStyle}" FontSize="15" 
                    FontFamily="Wide Latin" />

        </StackPanel>
    </Grid>
</Window>

Here's the output

As you can see, we've taken the visual properties of btnOne and moved them into a Style resource.  We specify the x:Key property so that the style resource can be referenced by other controls.  We specify the type of control that can use the style by setting the TargetType property and populate the Style's Setter collection with Setter objects that define property names and values of the style.

You'll also notice that we added a third button and set it's Style property just as we did with btnOne, however, btnThree overrides the properties that we defined in the Style resource.  Properties set at the control level take precedence over the properties defined in the Style resource.

Creating a default style for a specified control type.

In the previous example, we defined a Style resource and referenced the resource key in two of the three control's Style properties.  Since we didn't specify the Style property of btnTwo, it was not effected by the Style's defined Setter property values.

What happens if we wanted to define a default Style for all of the button's for the current Window?  As it turns out, this process is fairly simple.  All we have to do is remove the Style's x:Key property.  This will cause all of the control's of the specified TargetType to apply the specified style.  Here is an example.

<Window x:Class="WPF_styles_article_example.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <!-- I've removed the x:Key attribute to apply the style to 
        all Buttons in the window.
        -->
        <Style TargetType="Button">
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="Width" Value="260" />
            <Setter Property="Height" Value="40" />
        </Style>    
    </Window.Resources>
    
    <Grid>
        <StackPanel Orientation="Vertical" >
           <!-- No styles set -->
            <Button Margin="20" x:Name="btnOne" Content="Button One" />
            
            <Button Margin="20" Name="btnTwo" Content="Button two" />
            
            <Button Margin="20" Name="btnThree" Content="Button three" />

        </StackPanel>
    </Grid>
</Window>

Here's the output

Applying styles across an entire application

The previous examples demonstrate defining the Style resources at the Window level.  The same approach applies to Pages and UserControls.

If you want to make styles available to the entire application, simply create an Application level resource.  

Here is an example.

<Application x:Class="WPF_styles_article_example.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style TargetType="Button">
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="Width" Value="260" />
            <Setter Property="Height" Value="40" />
        </Style>
    </Application.Resources>
</Application>

Here's the output

Conclusion

This concludes the first article in the XAML basics series.  The next article in the series will build on the concept of XAML styles by introducing Control Templates.

Stay tuned!

kick it on DotNetKicks.com

  



Pingbacks and trackbacks (1)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

About the author

My name is Buddy James.  I'm a Microsoft Certified Solutions Developer from the Nashville, TN area.  I'm a Software Engineer, an author, a blogger (http://www.refactorthis.net), a mentor, a thought leader, a technologist, a data scientist, and a husband.  I enjoy working with design patterns, data mining, c#, WPF, Silverlight, WinRT, XAML, ASP.NET, python, CouchDB, RavenDB, Hadoop, Android(MonoDroid), iOS (MonoTouch), and Machine Learning. I love technology and I love to develop software, collect data, analyze the data, and learn from the data.  When I'm not coding,  I'm determined to make a difference in the world by using data and machine learning techniques. (follow me at @budbjames).  

Related links

Month List