Button Style and template

This page describes the creation & integration of a WPF Button Style/Template inside a SB/XA Theme.

Please refer to this page for the principle of SB/XA Theme and to this page for a list of controls you can template.

Illustration
This schema illustrate the structure of defined elements.



The XXTheme file
In this file, you just include the call to the Resource Dictionaries tha define the Style/Template for the button (and other controls). The important lines are bolded. The INCLUDE statement works the same as a BASIC INCLUDE. When the server contructs the actual resource dictionary all the INCLUDEd files are inserted at the appropriate location. In the two examples, WPFButton.xaml and XXButton.xaml, there is a subtle difference in the two files. WPFButton.xaml must be a ResourceDictionary not just a snippet of a ResourceDictionary as XXButton.xaml is.

      ...   ...    

The XXButton.xaml file
This file defines the SBButton Style and template, based on the default set provided by SB/XA. It then calls the WPF Template inside the style.

  < !-- here you can define properties styles -->  < !-- we test if sb+ define the button as a image ; if not ; load the XXButtonTemplate -->             < !-- define the Stylename to be used under SB+ ; used to load the SBControlStyle with XXButtonStyle  '''''' </Style>

The WPFButton.xaml file
<ResourceDictionary  xmlns=...>

< !-- Graphics effect defn --> <Storyboard x:Key="OverButton"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="OutButton"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <LinearGradientBrush x:Key="ClickBackground" StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="1" Color="#FFBB44"/> <GradientStop Offset="0" Color="#F29400"/> </LinearGradientBrush> <SolidColorBrush x:Key="NormalBackground" Color="#999999"/> <SolidColorBrush x:Key="OuterBorderOverBackground" Color="#FFFFFF"/> <SolidColorBrush x:Key="OuterBorderOverBrush" Color="#FFFFFF"/> <SolidColorBrush x:Key="OverButtonBackground" Color="#F29400"/> <SolidColorBrush x:Key="NormalOuterBorder" Color="#999999"/> <SolidColorBrush x:Key="OuterBorderFocused" Color="#FFFFFF"/> <SolidColorBrush x:Key="OuterBorderDisabled" Color="#666666"/> <SolidColorBrush x:Key="ForegroundTextColor" Color="#000000"/> <SolidColorBrush x:Key="ForegroundOverTextColor" Color="#FFFFFF"/> <LinearGradientBrush x:Key="DisabledBackground" StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="#eeeeee"/> <GradientStop Offset="1" Color="#cccccc"/> </LinearGradientBrush>

< !-- Template --> <ControlTemplate x:Key="XXButtonTemplate" TargetType="{x:Type Button}"> <Grid> <Border x:Name="OuterBd" Background="{StaticResource NormalBackground}" BorderBrush="{StaticResource NormalOuterBorder}" BorderThickness="1" CornerRadius="0"> <Grid> <Border x:Name="glow" Width="Auto" HorizontalAlignment="Stretch" Background="{StaticResource OverButtonBackground}" CornerRadius="0" Opacity="0"/> <ContentPresenter x:Name="ButtonContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="3" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" TextBlock.Foreground="{StaticResource ForegroundTextColor}"/> </Grid> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="OuterBd" Property="Background" Value="{StaticResource OuterBorderOverBackground}"/> <Setter TargetName="OuterBd" Property="BorderBrush" Value="{StaticResource OuterBorderOverBrush}"/> <Setter TargetName="ButtonContentPresenter" Property="TextBlock.Foreground" Value="{StaticResource ForegroundOverTextColor}"/> <Trigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource OverButton}"/> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource OutButton}"/> </Trigger.ExitActions> </Trigger> <Trigger Property="IsPressed" Value="true"> <Setter TargetName="glow" Property="Background" Value="{StaticResource ClickBackground}"/> </Trigger> <Trigger Property="IsKeyboardFocused" Value="true"> <Setter TargetName="OuterBd" Property="BorderBrush" Value="{StaticResource OuterBorderFocused}"/> <Setter TargetName="ButtonContentPresenter" Property="TextBlock.Foreground" Value="{StaticResource ForegroundOverTextColor}"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter TargetName="OuterBd" Property="BorderBrush" Value="{StaticResource OuterBorderDisabled}"/> <Setter TargetName="OuterBd" Property="Background" Value="{StaticResource DisabledBackground}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate>

< !- Preview KX --> <Style TargetType="{x:Type Button}"> <Setter Property="Background" Value="{StaticResource NormalBackground}"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Foreground" Value="White"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Padding" Value="1"/> <Setter Property="Margin" Value="5"/> <Setter Property="Height" Value="25"/> <Setter Property="Template" Value="{StaticResource XXButtonTemplate}"/> </Style> </ResourceDictionary>