CalendarButtonStyle SelectionChrome style

2 posts, 0 answers
  1. Joe
    Joe avatar
    31 posts
    Member since:
    Apr 2012

    Posted 23 Apr 2014 Link to this post

    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
  2. Kalin
    Admin
    Kalin avatar
    1207 posts

    Posted 24 Apr 2014 Link to this post

    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.
     
  3. DevCraft banner
Back to Top