Geeks With Blogs
Agilist Mercenary Loosely Coupled Human Code Factory

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>

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.

Original post is available along with other technical ramblings.

Shout it kick it on DotNetKicks.com Posted on Monday, March 22, 2010 5:22 PM WPF | Back to top


Comments on this post: Styles for XAML (Silverlight & WPF)

# re: Styles for XAML (Silverlight & WPF)
Requesting Gravatar...
Hi, at http://www.xamltemplates.net/ you can find styles for all the WPF and Silverlight controls.
Left by Xaml Templates on Mar 23, 2010 2:02 AM

Your comment:
 (will show your gravatar)


Copyright © GeekAgilistMercenary | Powered by: GeeksWithBlogs.net