CalendarButtonStyle SelectionChrome style

[Joe]

Hello,
I have created a new style for the SelectionChrome of the CalendarButtonStyle however the MouseOver and Pressed Visual States are not working. 

I added the Style to the "SelectionChrome" of the CalendarButtonStyle.

<Chromes:ButtonChrome Style="{StaticResource ButtonChromeCalTacom}" x:Name="SelectionChrome" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" Margin="{StaticResource CalendarButtonButtonChromeMargin}" RenderNormal="False" RenderSelected="{TemplateBinding IsSelected}" RenderFocused="{TemplateBinding IsFocused}" RenderHighlighted="{TemplateBinding IsMouseOver}" />

Here is they style created.

<!-- rek added chrome style for calendar button -->
<SolidColorBrush x:Key="ChromeCalBackground_Normal"/>
<SolidColorBrush x:Key="ChromeCalInnerBorder_Normal"/>
<SolidColorBrush x:Key="ChromeCalOuterBorder_Normal"/>

<SolidColorBrush x:Key="ChromeCalBackground_Pressed" Color="#FF888F5A"/>
<SolidColorBrush x:Key="ChromeCalOuterBorder_Pressed" Color="#FF888F5A"/>
<SolidColorBrush x:Key="ChromeCalInnerBorder_Pressed" Color="#FF888F5A"/>

<SolidColorBrush x:Key="ChromeCalBackground_MouseOver" Color="#FFA8AE81"/>
<SolidColorBrush x:Key="ChromeCalInnerBorder_MouseOver" Color="#FFA8AE81"/>
<SolidColorBrush x:Key="ChromeCalOuterBorder_MouseOver" Color="#FF888F5A"/>

<Style x:Key="ButtonChromeCalTacom" TargetType="Chromes:ButtonChrome">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{StaticResource ChromeCalOuterBorder_Normal}"/>
<Setter Property="Background" Value="{StaticResource ChromeCalBackground_Normal}"/>
<Setter Property="CornerRadius" Value="{StaticResource SplitButton_SpanCornerRadius}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Chromes:ButtonChrome">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ChromeCalOuterBorder_MouseOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="OuterBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ChromeCalBackground_MouseOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ChromeCalInnerBorder_MouseOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ChromeCalBackground_MouseOver}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ChromeCalOuterBorder_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ChromeCalInnerBorder_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ChromeCalBackground_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="OuterBorder" Background="{StaticResource ChromeCalBackground_Normal}" BorderBrush="{StaticResource ChromeCalOuterBorder_Normal}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}">
<Border x:Name="InnerBorder" Background="{StaticResource ChromeCalBackground_Normal}" BorderBrush="{StaticResource ChromeCalInnerBorder_Normal}" BorderThickness="10" CornerRadius="{TemplateBinding InnerCornerRadius}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Thank you,
Craig

[Kalin]

Hi Craig,

The reason for the explained issue is that the other VisualStates of the ButtonChrome are missing and they have been used in the code. So in order to get it working you will need to include everything from the default template and modify it the desired way.

However if you need to optimize the performance by removing the animations of the ButtonChrome, I can suggest you a better approach. What I can do is to replace the ButtonChrome with Borders in the Template of the CalendarButton and modify the VisualStates as required (that approach is used in the Windows8 Theme so you can extract the template from there). For your convenience I have prepared a sample project which demonstrates the exact approach - you will just need to adjust the brushes and colors there. Note that I have used Implicit Styles in the project.

Hope this will help you to achieve the required.

Regards,
Kalin
Telerik