Template States
<UserControl x:Class='SilverlightApplication3.MainPage'
xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
xmlns:d='http://schemas.microsoft.com/expression/blend/2008'
xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'
mc:Ignorable='d'
d:DesignWidth='640'
d:DesignHeight='480'>
<UserControl.Resources>
<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
<Grid RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1"></ScaleTransform>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.2" />
<VisualTransition To="Normal" From="MouseOver" GeneratedDuration="0:0:0.7">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform"
Storyboard.TargetProperty="ScaleX">
<LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="0"></LinearDoubleKeyFrame>
<LinearDoubleKeyFrame KeyTime="0:0:0.7" Value="1"></LinearDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0:0:0" Storyboard.TargetName="ButtonBackgroundBrush" Storyboard.TargetProperty="Color"
To="Orange" />
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimation Duration="0:0:0" Storyboard.TargetName="ButtonBackgroundBrush" Storyboard.TargetProperty="Color"
To="Red"
/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0:0:0" Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color"
To="Black"
/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBorder" BorderThickness="3" CornerRadius="15">
<Border.BorderBrush>
<SolidColorBrush x:Name="BorderBrush" Color="Orange"></SolidColorBrush>
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush x:Name="ButtonBackgroundBrush" Color="Red"></SolidColorBrush>
</Border.Background>
<ContentPresenter
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="4,5,4,4" />
</Border>
<Rectangle x:Name="FocusVisualElement" Stroke="Black" Margin="8" Opacity="0"
StrokeThickness="1" StrokeDashArray="1 2"></Rectangle>
</Grid>
</ControlTemplate>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Template" Value="{StaticResource ButtonTemplate}"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="FontSize" Value="15"></Setter>
</Style>
</UserControl.Resources>
<StackPanel x:Name="LayoutRoot">
<Button Content="Custom Button" Style="{StaticResource ButtonStyle}"></Button>
<Button Content="Another Custom Button" Style="{StaticResource ButtonStyle}" ></Button>
</StackPanel>
</UserControl>
Related examples in the same category
