Monday, December 30, 2013

TemplateBinding to SolidColorBrush won't work when overriding Button ControlTemplate

Hi, I want to create a custom control which will extend the build-in Button and allow user to set the pointer-over Background color. I have added a dependency property of type Brush, and "properly" set the binding in the according visual state of ControlTemplate using TemplateBinding. But it still won't work - when I move mouse over the button, nothing happens.


Here is code:


[Generic.xaml](I've bolded the font of all the related code. )



<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App38">

<Style TargetType="local:ButtonEx">
<Setter Property="Background"
Value="{ThemeResource ButtonBackgroundThemeBrush}" />
<Setter Property="Foreground"
Value="{ThemeResource ButtonForegroundThemeBrush}" />
<Setter Property="BorderBrush"
Value="{ThemeResource ButtonBorderThemeBrush}" />
<Setter Property="BorderThickness"
Value="{ThemeResource ButtonBorderThemeThickness}" />
<Setter Property="Padding"
Value="12,4,12,4" />
<Setter Property="HorizontalAlignment"
Value="Left" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="FontFamily"
Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight"
Value="SemiBold" />
<Setter Property="FontSize"
Value="{ThemeResource ControlContentThemeFontSize}" />

<Setter Property="PointerOverBackground"
Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}" />


<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:ButtonEx">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{TemplateBinding PointerOverBackground}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonPressedBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Margin="3">
<ContentPresenter x:Name="ContentPresenter"
AutomationProperties.AccessibilityView="Raw"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>

</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>



[ButtonEx.cs]



using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;


namespace App38
{
public sealed class ButtonEx : Button
{
public SolidColorBrush PointerOverBackground
{
get { return (SolidColorBrush)GetValue(PointerOverBackgroundProperty); }
set { SetValue(PointerOverBackgroundProperty, value); }
}
public static readonly DependencyProperty PointerOverBackgroundProperty =
DependencyProperty.Register("PointerOverBackground", typeof(SolidColorBrush), typeof(ButtonEx), new PropertyMetadata(null));


public ButtonEx()
{
this.DefaultStyleKey = typeof(ButtonEx);

}
}
}




No comments:

Post a Comment