Styles for XAML (Silverlight & WPF)

This is a quick walk through of how to setup things for skinning within a XAML Application. First thing, find the App.xaml file within the WPF or Silverlight Project.

Within the App.xaml file set some default styles for your controls. I set the following for a button, label, and border control for an application I am creating.

Button Control

<Style x:Key="ButtonStyle" TargetType="Button">

    <Setter Property="FontFamily" Value="Arial" />

    <Setter Property="FontWeight" Value="Bold" />

    <Setter Property="FontSize" Value="14" />

    <Setter Property="Width" Value="180" />

    <Setter Property="Height" Value="Auto" />

    <Setter Property="Margin" Value="8" />

    <Setter Property="Padding" Value="8" />

    <Setter Property="Foreground" Value="AliceBlue" />

    <Setter Property="Background" >

        <Setter.Value>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="Black" Offset="0" />

                <GradientStop Color="#FF5B5757" Offset="1" />

            </LinearGradientBrush>

        </Setter.Value>

    </Setter>

</Style>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Label Control

<Style x:Key="LabelStyle" TargetType="Label">

    <Setter Property="Width" Value="Auto"/>

    <Setter Property="Height" Value="28" />

    <Setter Property="Foreground" Value="Black"/>

    <Setter Property="Margin" Value="8"/>

</Style>

Border Control

<Style x:Key="BorderStyle" TargetType="Border">

    <Setter Property="BorderThickness" Value="4"/>

    <Setter Property="Width" Value="Auto"/>

    <Setter Property="Height" Value="Auto" />

    <Setter Property="Margin" Value="0,8,0,0"/>

    <Setter Property="CornerRadius" Value="18"/>

    <Setter Property="BorderBrush">

        <Setter.Value>

            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                <GradientStop Color="CornflowerBlue" Offset="0" />

                <GradientStop Color="White" Offset="1" />

            </LinearGradientBrush>

        </Setter.Value>

    </Setter>

</Style>

These provide good examples of setting individual properties to a default, such as;

<Setter Property="Width" Value="Auto"/>

<Setter Property="Height" Value="Auto" />

Also for settings a more complex property, such as with a LinearGradientBrush;

<Setter Property="BorderBrush">

    <Setter.Value>

        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

            <GradientStop Color="CornflowerBlue" Offset="0" />

            <GradientStop Color="White" Offset="1" />

        </LinearGradientBrush>

    </Setter.Value>

</Setter>

These property setters should be located between the opening and closing <Application.Resources></Application.Resources> tags.

<Application x:Class="ScorecardAndDashboard.App"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

             StartupUri="MainWindow.xaml">

    <Application.Resources>

    </Application.Resources>

</Application>

Now in the pages, user controls, or whatever you are marking up with XAML, for the Style Property just set a StaticResource such as shown below.

     <!-- Border Control -->

<Border Name="borderPollingFrequency" Style="{StaticResource BorderStyle}">

     <!-- Label Control -->

<Label Content="Trigger Name:" Style="{StaticResource LabelStyle}"></Label>

     <!-- Button Control -->

<Button Content="Save Schedule" Name="buttonSaveSchedule"  Style="{StaticResource ButtonStyle}" HorizontalAlignment="Right"/>

That’s it. Simple as that. There are other ways to setup resource files that are separate from the App.xaml, but the App.xaml file is always a good quick place to start. As moving the styles to a specific resource file later is a mere copy and paste.

2 thoughts on “Styles for XAML (Silverlight & WPF)”

XAML Tempaltes says:

March 22, 2010 at 21:05

Hi, at http://www.xamltemplates.net/ you can find styles for WPF and Silverlight controls.

Loading...
Adron says:

March 26, 2010 at 16:44

Thx for the kickbacks, shouts, etc!

Loading...