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

TemplateBinding in visualstate

1 Answer 662 Views

Buttons

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

Jiri asked on 07 Aug 2013, 09:43 AM

Hi I am having problem with template binding to visualstate. I need to change background color on action MouseOver (specifically Foreground color on Text) is there any way how to do it?
here is my xaml template:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

xmlns:local="clr-namespace:CustomControl">

<Style TargetType="{x:Type local:RadCustomBtn}">

<Setter Property="BorderThickness" Value="0"/>

<Setter Property="BorderBrush" Value="#FF848484"/>

<Setter Property="Background">

<Setter.Value>

<SolidColorBrush Color="#408AD2"/>

</Setter.Value>

</Setter>

<Setter Property="Foreground" Value="Black"/>

<Setter Property="HorizontalContentAlignment" Value="Center"/>

<Setter Property="VerticalContentAlignment" Value="Center"/>

<Setter Property="Padding" Value="3"/>

<Setter Property="CornerRadius" Value="0"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type local:RadCustomBtn}">

<Grid SnapsToDevicePixels="True">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#408AD2"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#679ED2"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="White"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CommonStatesWrapper"/>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#408AD2"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#679ED2"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#408AD2"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="disabledBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="BackgroundVisibility">

<VisualState x:Name="BackgroundHidden">

<Storyboard>

<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OuterBorder"/>

<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="disabledBorder"/>

</Storyboard>

</VisualState>

<VisualState x:Name="BackgroundVisible"/>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStatesGroup">

<VisualState x:Name="Unfocused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">

<DiscreteObjectKeyFrame KeyTime="0:0:0.15">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual">

<LinearDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}">

<Border x:Name="InnerBorder" BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding InnerCornerRadius}"/>

</Border>

<Border x:Name="disabledBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="#FFE0E0E0" CornerRadius="{TemplateBinding CornerRadius}" Visibility="Collapsed"/>

<!--<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Style="{DynamicResource radButton_style_label}"/>-->

<StackPanel Orientation="{TemplateBinding Orientation}" HorizontalAlignment="Center">

<Viewbox>

<StackPanel Width="{TemplateBinding IconWidth}" Height="{TemplateBinding IconHeight}" Visibility="{TemplateBinding IconVisibility}">

<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Icon}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Style="{DynamicResource radButton_style_label}"/>

</StackPanel>

</Viewbox>

<StackPanel Width="auto" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical">

<TextBlock Text="{TemplateBinding Text}" Foreground="{TemplateBinding Foreground}" FontSize="40"></TextBlock>

</StackPanel>

<Border x:Name="CommonStatesWrapper">

<Border x:Name="FocusVisual" BorderBrush="#FFFFFF" BorderThickness="1" Background="Transparent" CornerRadius="{TemplateBinding CornerRadius}" Opacity="0" Visibility="Collapsed">

<Border x:Name="FocusInnerVisual" BorderBrush="Transparent" BorderThickness="1" CornerRadius="{TemplateBinding InnerCornerRadius}"/>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

1 Answer, 1 is accepted

answered on 09 Aug 2013, 11:11 AM

Buttons-CustomTemplate.zip

Hello Jiri,

In order to change the foreground of the button you need to animate the Foreground property of the ContetnPresenter called "Content. As the ContentPresenter does not have a build in Foreground property you need to use the attached property of the TextBlock.Foreground, like follows:

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"

Storyboard.TargetProperty="(TextBlock.Foreground)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource MouseOverBrush}" />

</ObjectAnimationUsingKeyFrames>

I have attached a sample with modified RadButton style to meet your criteria for you convenience.

I hope this information helps.

Kind regards,
Kiril Vandov
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>