Styles for XAML (Silverlight & WPF)
- by GeekAgilistMercenary
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.
