This is a migrated thread and some comments may be shown as answers.

CalendarButtonStyle SelectionChrome style

1 Answer 27 Views
DatePicker
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 23 Apr 2014, 01:10 PM
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

1 Answer, 1 is accepted

Sort by
0
Kalin
Telerik team
answered on 24 Apr 2014, 01:16 PM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
DatePicker
Asked by
Joe
Top achievements
Rank 1
Answers by
Kalin
Telerik team
Share this question
or