WPF visual state transition won't animate - wpf

I am trying to animate the position of an element using visual states. The problem I have is that, rather than animate, it waits the transition period (0.333 seconds) and pops to the end position. What am I doing wrong?
<UserControl x:Class="Namespace.UpdateNotificationView" x:Name="UserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="UpdatesViewState">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.333">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="NoUpdatesState"/>
<VisualState x:Name="UpdatesAvailableState">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Toast">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Toast" Background="#FFFFFBE9" CornerRadius="0,0,20,0" BorderBrush="#FFFFD100" BorderThickness="0,0,2,2" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform Y="-75"/>
</TransformGroup>
</Border.RenderTransform>
<Grid Margin="15,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="/Namespace;component/Skins/Images/Update.png" Width="48" Height="48" Margin="0,0,15,0"/>
<TextBlock TextWrapping="Wrap" Text="Updates Available" Foreground="Black" Grid.Column="1" FontWeight="Bold" VerticalAlignment="Center" FontSize="29.333"/>
</Grid>
</Border>
</Grid>

Related

Handling Togglebutton ControlTemplate

If i use this code:
Eyes on "Path" element
<ToggleButton Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" x:Name="ExpandCollapseButton">
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<Rectangle HorizontalAlignment="Stretch" Height="50" Fill="#FFDBDBDB"/>
<Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Center"
Data="M2,3L9,10 16,3" Stroke="Black" StrokeThickness="6" Fill="#FFDBDBDB"/>
</Grid>
</ControlTemplate>
</ToggleButton.Template>
<ToggleButton.RenderTransform>
<RotateTransform x:Name="RotateButtonTransform"/>
</ToggleButton.RenderTransform>
</ToggleButton>
All shows just fine.
Example:
But when i use whole code with animations, the position is set to Left but it appears on right
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Expander">
<Style TargetType="local:Expander">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Expander">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ViewStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
Storyboard.TargetProperty="ScaleY" To="1" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
Storyboard.TargetProperty="ScaleY" To="0" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
Storyboard.TargetProperty="Angle" To="0" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="#FFDBDBDB" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="1" VerticalAlignment="Center" Content="{TemplateBinding HeaderContent}" Canvas.ZIndex="2"/>
<ToggleButton Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" x:Name="ExpandCollapseButton">
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<Rectangle HorizontalAlignment="Stretch" Height="50" Fill="#FFDBDBDB"/>
<Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Center"
Data="M2,3L9,10 16,3" Stroke="Black" StrokeThickness="6" Fill="#FFDBDBDB"/>
</Grid>
</ControlTemplate>
</ToggleButton.Template>
<ToggleButton.RenderTransform>
<RotateTransform x:Name="RotateButtonTransform"/>
</ToggleButton.RenderTransform>
</ToggleButton>
</Grid>
<ContentPresenter Grid.Row="1" Margin="5" Content="{TemplateBinding Content}" x:Name="Content">
<ContentPresenter.RenderTransform>
<ScaleTransform x:Name="ContentScaleTransform"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When i tap my expander the Path jumps from left to right - where is the problem?
Example:
When position is Center it shows correct
ADDITION:
If i delete animation x:Name="RotateButtonTransform" then Path element is being shown correctly - but i need this transform to rotate the Path
ADDITION 2:
Deleted togglebuttons animation, and added this lines:
To visual state storyboard:
<DoubleAnimation Storyboard.TargetName="RotatePath"
Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
To Path element:
<Path.RenderTransform>
<RotateTransform x:Name="RotatePath"/>
</Path.RenderTransform>
Code somewhy fails...
Error:
An exception of type 'System.InvalidOperationException' occurred in System.Windows.ni.dll but was not handled in user code
Because your ToggleButton spans across 2 columns and you set it HorizontalAlignment to Stretch which means that ToggleButton will have a width of whole header and when you expand and apply 180 rotation that rotates around its centre and what was on the left side is now on the right side upside down. Change HorizontalAlignment on your ToggleButton to Left and that should solve your issue.
If you want to keep ToggleButton stretched then don't rotate button but Path inside it:
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ViewStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="RotateButtonTransform" Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="RotateButtonTransform" Storyboard.TargetProperty="Angle" To="0" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle HorizontalAlignment="Stretch" Height="50" Fill="#FFDBDBDB"/>
<Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Center" Data="M2,3L9,10 16,3" Stroke="Black" StrokeThickness="6" Fill="#FFDBDBDB">
<Path.RenderTransform>
<RotateTransform x:Name="RotateButtonTransform"/>
</Path.RenderTransform>
</Path>
</Grid>
</ControlTemplate>
</ToggleButton.Template>

Custom Tooltip in WPF Charting ScatterSeries

I'm trying to set a custom tooltip using the WPF charting toolkit. Using the demonstration code from here. The code for the custom tooltip looks like this (sorry verbose):
<Grid>
<Grid.Resources>
<Style
x:Key="MyScatterDataPointStyle"
TargetType="chartingToolkit:ScatterDataPoint">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:ScatterDataPoint">
<Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Opacity="0"
x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MouseOverHighlight"
Storyboard.TargetProperty="Opacity"
To="0.6"
Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="SelectionHighlight"
Storyboard.TargetProperty="Opacity"
To="0.6"
Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="RevealStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Shown">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid
Background="{TemplateBinding Background}">
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop
Color="#77ffffff"
Offset="0"/>
<GradientStop
Color="#00ffffff"
Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border
BorderBrush="#ccffffff"
BorderThickness="1">
<Border
BorderBrush="#77ffffff"
BorderThickness="1"/>
</Border>
<Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
<Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
</Grid>
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl
Content="Custom ToolTip"
FontWeight="Bold"/>
<ContentControl
Content="{TemplateBinding FormattedDependentValue}"/>
</StackPanel>
</ToolTipService.ToolTip>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
The "Data" I'm binding to is a Dictionary, hence the DependentValuePath="Value.X" and IndependentValuePath="Value.Y".
My chart code looks like this:
<chartingToolkit:Chart Name="MyChart">
<chartingToolkit:Chart.Series>
<chartingToolkit:ScatterSeries
ItemsSource="{Binding Data}"
DependentValuePath="Value.X"
IndependentValuePath="Value.Y"
DataPointStyle="{StaticResource MyScatterDataPointStyle}">
<chartingToolkit:ScatterSeries.IndependentAxis>
<chartingToolkit:LinearAxis Name="XAxis" Title="Area Under ROC Curve" Orientation="X" Minimum="0" />
</chartingToolkit:ScatterSeries.IndependentAxis>
<chartingToolkit:ScatterSeries.DependentRangeAxis>
<chartingToolkit:LinearAxis Name="YAxis" Title="Calibration Error" Orientation="Y" Minimum="0" />
</chartingToolkit:ScatterSeries.DependentRangeAxis>
</chartingToolkit:ScatterSeries>
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
I would like the tooltip to be of the form String.Format("{0}: {1}, {2}", Key, Value.X, Value.Y); (i.e the key followed the value). Any idea how to do this? Currently the tooltip just shows the dependent value.
I think this question has the answer you are looking for
WPF toolkit charting : Customize datapoint label
Basically you want to add more entries to your ToolTipService.ToolTip declaration
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl
Content="Custom ToolTip"
FontWeight="Bold"/>
<ContentControl
Content="{TemplateBinding Key}"/><!--I am not sure what the correct property will be Key is a guess-->
<ContentControl
Content="{TemplateBinding IndependentValue}"/>
<ContentControl
Content="{TemplateBinding DependentValue}"/>
</StackPanel>
</ToolTipService.ToolTip>

How to change the grouping title from property name to something more descriptive

When adding a PropertyGroupDescription to the PageCollectedView.GroupDescriptions I supply null as the property name, and an IValueConverter. I do this so that I can make a single grouping on a set of property values. Howerver the display shows a leading : before the grouping value in the DataGrid.
In another situation I do group by a single property, so I supply an instance of PropertyGroupDescription with a the property name and no IValueConverter. In that case the display shows the property name a colon and then the grouping value.
I need to be able to programatically set the display of the text that appears before the : to something more meaningful (and in the local language for that matter, but that comes later)
Use These code hope your problem will be solved.
<sdk:DataGrid.RowGroupHeaderStyles>
<Style TargetType="sdk:DataGridRowGroupHeader">
<Setter Property="Cursor" Value="Arrow" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Background" Value="#FFE4E8EA" />
<Setter Property="Height" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:DataGridRowGroupHeader">
<sdk:DataGridFrozenGrid x:Name="Root"
Background="{TemplateBinding Background}">
<sdk:DataGridFrozenGrid.Resources>
<ControlTemplate x:Key="ToggleButtonTemplate"
TargetType="ToggleButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="CollapsedArrow"
Storyboard.TargetProperty="(Stroke).Color"
Duration="0" To="#FF6DBDD1"/>
<ColorAnimation Storyboard.TargetName="ExpandedArrow"
Storyboard.TargetProperty="(Fill).Color"
Duration="0" To="#FF6DBDD1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="CollapsedArrow"
Storyboard.TargetProperty="(Stroke).Color"
Duration="0" To="#FF6DBDD1"/>
<ColorAnimation Storyboard.TargetName="ExpandedArrow"
Storyboard.TargetProperty="(Fill).Color"
Duration="0" To="#FF6DBDD1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="CollapsedArrow"
Storyboard.TargetProperty="Opacity" To=".5"/>
<DoubleAnimation Duration="0"
Storyboard.TargetName="ExpandedArrow"
Storyboard.TargetProperty="Opacity" To=".5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked" />
<VisualState x:Name="Unchecked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="CollapsedArrow"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="ExpandedArrow"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path Stretch="Uniform"
Data="F1 M 0,0 L 0,1 L .6,.5 L 0,0 Z"
Width="5" HorizontalAlignment="Center"
VerticalAlignment="Center" x:Name="CollapsedArrow"
Visibility="Collapsed" Stroke="#FF414345"/>
<Path Stretch="Uniform"
Data="F1 M 0,1 L 1,1 L 1,0 L 0,1 Z" Width="6"
HorizontalAlignment="Center" VerticalAlignment="Center"
x:Name="ExpandedArrow" Fill="#FF414345"/>
</Grid>
</ControlTemplate>
</sdk:DataGridFrozenGrid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CurrentStates">
<VisualState x:Name="Regular"/>
<VisualState x:Name="Current">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisual"
Storyboard.TargetProperty="Opacity"
To="1" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<sdk:DataGridFrozenGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</sdk:DataGridFrozenGrid.ColumnDefinitions>
<sdk:DataGridFrozenGrid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</sdk:DataGridFrozenGrid.RowDefinitions>
<Rectangle Grid.Column="1" Grid.ColumnSpan="5" Fill="#FFFFFFFF" Height="1"/>
<Rectangle Grid.Column="1" Grid.Row="1" x:Name="IndentSpacer" />
<ToggleButton Grid.Column="2" Grid.Row="1" x:Name="ExpanderButton"
Height="15" Width="15" IsTabStop="False"
Template="{StaticResource ToggleButtonTemplate}" Margin="2,0,0,0"/>
<!-- This is START of the First Group Header of the DataGrid -->
<!--<StackPanel Grid.Column="3" Grid.Row="1" Orientation="Horizontal"
VerticalAlignment="Center" Margin="0,1,0,1"
Visibility="{Binding Width, ElementName=IndentSpacer}">
<TextBlock Margin="4,0,0,0" Text="{Binding Name}" Foreground="Red"/>
</StackPanel>-->
<!-- This is END of the First Group Header of the DataGrid -->
<!-- This is START of the Second Group Header of the DataGrid -->
<Grid Grid.Column="3" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,1,0,1"
Visibility="{Binding Width, ElementName=IndentSpacer}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<!--<ComboBox Margin="4,0,0,0" Width="120" ItemsSource="{Binding ItemsSource,ElementName=personDataGrid,Converter={StaticResource ConvToComboBox}}" DisplayMemberPath="text" SelectionChanged="comboSelectionChangeda"/>
<Button Margin="169,0,0,0" Height="15" Name="btn" Content="+" FontSize="9" Foreground="Black" FontWeight="Bold" Click="btn_Click"/>-->
<sdk:Label Content="{Binding ItemsSource,ElementName=personDataGrid,Converter={StaticResource ConvToGender}}"/>
</StackPanel>
</Grid>
<!-- This is END of Second Group Header of the DataGrid -->
<Rectangle Grid.Column="1" Grid.ColumnSpan="5" Fill="#FFD3D3D3" Height="1" Grid.Row="2"/>
<Rectangle x:Name="FocusVisual" Grid.Column="1" Grid.ColumnSpan="4" Grid.RowSpan="3"
Stroke="#FF6DBDD1" StrokeThickness="1"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
IsHitTestVisible="false" Opacity="0" />
<sdk:DataGridRowHeader x:Name="RowHeader" Grid.RowSpan="3" sdk:DataGridFrozenGrid.IsFrozen="True"/>
</sdk:DataGridFrozenGrid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</sdk:DataGrid.RowGroupHeaderStyles>
Here is the Converter class that returns the customise Group Header
public class GenderConv:IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
PagedCollectionView pageView = value as PagedCollectionView;
Person person = pageView.CurrentItem as Person;
string gender = person.Gender.ToString();
return "Sex:"+ gender;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}

ListBox template tweak needed for horizontal stretching of listbox items

I am trying to use a DataTemplate for ListBox.ItemTemplate for a simple TODO list.
The template for each ListBoxItem is a grid and I want the content for my 2nd column to stretch the remaining width of the listbox. No amount of HorizontalAlignment="Stretch" etc. etc. seems to do the trick and I think I need to modify the template. I've looked at the ListBox extracted Xaml template but cannot see what I need to change.
In this XAML sample you can see a green box that is supposed to stretch the remaining width of the listboxitem, but doesn't.
In XamlPad / WPF this code actually DOES render as expected.
In Silverlight though the box won't stretch.
<ListBox Width="360" Height="150" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="3,0,3,0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="URGENT" Foreground="Red" Margin="5,0,10,0" Grid.Column="0" VerticalAlignment="Center"/>
<Border BorderBrush="Green" BorderThickness="1" Grid.Column="1" HorizontalAlignment="Stretch" Margin="0,2">
<TextBlock Margin="5,2" Text="{Binding}" FontWeight="Bold" />
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<s:String>Take out trash</s:String>
<s:String>Clean car</s:String>
<s:String>Finish TODO list program</s:String>
<s:String>Sleep</s:String>
</ListBox>
You can achieve what you want by defining a ItemContainerStyle for your ListBox :
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Stretch" Margin="3,0,3,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="URGENT" Foreground="Red" Margin="5,0,10,0" Grid.Column="0" VerticalAlignment="Center"/>
<Border BorderBrush="Green" BorderThickness="1" Grid.Column="1" HorizontalAlignment="Stretch" Margin="0,2">
<TextBlock Margin="5,2" Text="{Binding}" FontWeight="Bold" />
</Border>
</Grid>
<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then use this style in your listbox like this :
<ListBox Width="360" Height="150" x:Name="lb" HorizontalContentAlignment="Stretch" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" />
In what you are trying to do , the problem is your grid width is not equivalent to the listbox item.
The problem is the Grid inside the DataTemplate, if you increase its size, you'll start to see that the border grows with it.

WPF Toolkit: Bug in Control Template?

Here's one for all you XAML wizards: The WPF Toolkit Calendar control (June 2009) appears to have a bug. The bug only crops up when you modify the ControlTemplate for the calendar, specifically, the PART_CalendarItem.
At the end of this message, I have included the XAML for a (Blend 3.0) window that declares a Calendar and assigns it a ControlTemplate. The control template is an unmodified copy of the Calendar control template, which I got by editing a copy of the control template (in Blend) for the Calendar control and the PART_CalendarItem control.
In line 78 of the XAML (Marked with a comment "EXCEPTION" below), the VisualStateManager assigns a TextColor to a mouse-over on the Month header of the control. However, in the control template the text color is assigned to the Grid that holds the Month button, rather than the month button itself. That causes an exception in both VS2008 and Blend 3.0 when a calendar is assigned the unmodified control template, as in the XAML below.
I can't quite figure out how to modify the control template to eliminate the bug, short of removing the mouse-over highlighting. I'd like to keep it, but I don't see what the TextColor property should target. Any suggestions? Thanks for your help!
XAML Markup
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Custom="http://schemas.microsoft.com/wpf/2008/toolkit"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
<Style x:Key="CalendarStyle1" TargetType="{x:Type Custom:Calendar}">
<Setter Property="Foreground" Value="#FF333333"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE4EAF0" Offset="0"/>
<GradientStop Color="#FFECF0F4" Offset="0.16"/>
<GradientStop Color="#FFFCFCFD" Offset="0.16"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Custom:Calendar}">
<StackPanel x:Name="PART_Root" HorizontalAlignment="Center">
<Custom:CalendarItem x:Name="PART_CalendarItem" Style="{DynamicResource CalendarItemStyle1}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CalendarItemStyle1" TargetType="{x:Type Custom:CalendarItem}">
<Setter Property="Margin" Value="0,3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Custom:CalendarItem}">
<ControlTemplate.Resources>
<DataTemplate x:Key="DayTitleTemplate">
<TextBlock HorizontalAlignment="Center" Margin="0,6" VerticalAlignment="Center" FontFamily="Verdana" FontSize="9.5" FontWeight="Bold" Foreground="#FF333333" Text="{Binding}"/>
</DataTemplate>
</ControlTemplate.Resources>
<Grid x:Name="PART_Root">
<Grid.Resources>
<SolidColorBrush x:Key="DisabledColor" Color="#A5FFFFFF"/>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="00:00:00" Storyboard.TargetName="PART_DisabledVisual" Storyboard.TargetProperty="Opacity" To="1"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1">
<Border BorderBrush="White" BorderThickness="2" CornerRadius="1">
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="HeaderButtonTemplate" TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="00:00:00" Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8"/> <!-- EXCEPTION -->
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="00:00:00" Storyboard.TargetName="buttonContent" Storyboard.TargetProperty="Opacity" To="0.5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="buttonContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,4,1,9" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" TextElement.Foreground="#FF333333" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="NextButtonTemplate" TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="00:00:00" Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="00:00:00" Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Opacity" To="0.5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1"/>
<Grid>
<Path Fill="#FF333333" Stretch="Fill" HorizontalAlignment="Right" Margin="0,-6,14,0" VerticalAlignment="Center" Width="6" Height="10" Data="M282.875,231.875L282.875,240.375 288.625,236z"/>
</Grid>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="PreviousButtonTemplate" TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="00:00:00" Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="00:00:00" Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Opacity" To="0.5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1"/>
<Grid>
<Path Fill="#FF333333" Stretch="Fill" HorizontalAlignment="Left" Margin="14,-6,0,0" VerticalAlignment="Center" Width="6" Height="10" Data="M288.75,232.25L288.75,240.625 283,236.625z"/>
</Grid>
</Grid>
</ControlTemplate>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="PART_PreviousButton" HorizontalAlignment="Left" Width="28" Height="20" Focusable="False" Grid.Column="0" Grid.Row="0">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="00:00:00" Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="00:00:00" Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Opacity" To="0.5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1"/>
<Grid>
<Path Fill="#FF333333" Stretch="Fill" HorizontalAlignment="Left" Margin="14,-6,0,0" VerticalAlignment="Center" Width="6" Height="10" Data="M288.75,232.25L288.75,240.625 283,236.625z"/>
</Grid>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="PART_HeaderButton" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="10.5" FontWeight="Bold" Focusable="False" Grid.Column="1" Grid.Row="0" Template="{DynamicResource ButtonControlTemplate1}"/>
<Button x:Name="PART_NextButton" HorizontalAlignment="Right" Width="28" Height="20" Focusable="False" Grid.Column="2" Grid.Row="0">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="00:00:00" Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="00:00:00" Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Opacity" To="0.5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1"/>
<Grid>
<Path Fill="#FF333333" Stretch="Fill" HorizontalAlignment="Right" Margin="0,-6,14,0" VerticalAlignment="Center" Width="6" Height="10" Data="M282.875,231.875L282.875,240.375 288.625,236z"/>
</Grid>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Grid x:Name="PART_MonthView" Margin="6,-1,6,6" Visibility="Visible" Grid.ColumnSpan="3" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
<Grid x:Name="PART_YearView" Margin="6,-3,7,6" Visibility="Hidden" Grid.ColumnSpan="3" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
</Grid>
</Border>
</Border>
<Rectangle x:Name="PART_DisabledVisual" Fill="#A5FFFFFF" Stretch="Fill" Stroke="#A5FFFFFF" StrokeThickness="1" RadiusX="2" RadiusY="2" Opacity="0" Visibility="Collapsed"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Visibility" TargetName="PART_DisabledVisual" Value="Visible"/>
</Trigger>
<DataTrigger Binding="{Binding DisplayMode, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type Custom:Calendar}}}" Value="Year">
<Setter Property="Visibility" TargetName="PART_MonthView" Value="Hidden"/>
<Setter Property="Visibility" TargetName="PART_YearView" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding DisplayMode, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type Custom:Calendar}}}" Value="Decade">
<Setter Property="Visibility" TargetName="PART_MonthView" Value="Hidden"/>
<Setter Property="Visibility" TargetName="PART_YearView" Value="Visible"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="00:00:00" Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="00:00:00" Storyboard.TargetName="buttonContent" Storyboard.TargetProperty="Opacity" To="0.5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="buttonContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,4,1,9" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" TextElement.Foreground="#FF333333" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Custom:Calendar HorizontalAlignment="Left" VerticalAlignment="Top" Style="{DynamicResource CalendarStyle1}"/>
</Grid>
</Window>
We just experienced the same thing at work. This doesn't appear to be a bug in the WPFToolkit, rather there is an issue with Expression Blend which crops up because the people who made the original template got a little tricky.
First, go grab the default template. If you download the source they will be in Toolkit-Release/Calendar/Themes/Generic.xaml. The source can be found on the WPF Toolkit CodePlex site.
http://wpf.codeplex.com/
The CalendarItemTemplate has this sort of a setup:
<Style TargetType="primitives:CalendarItem">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:CalendarItem">
...
<Grid Name="PART_Root" >
<Border
...
<Border CornerRadius="1" BorderBrush="#FFFFFFFF" BorderThickness="2">
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
...
<Button x:Name="PART_HeaderButton" Template="{StaticResource HeaderButtonTemplate}"
...
This is the original HeaderButtonTemplate:
<ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
<Grid Cursor="Hand">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="buttonContent" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="buttonContent"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="1,4,1,9"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextElement.Foreground>
<SolidColorBrush x:Name="TextColor" Color="#FF333333"/>
</TextElement.Foreground>
</ContentPresenter>
</Grid>
</ControlTemplate>
The part that concerns us is here:
<ContentPresenter
x:Name="buttonContent"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="1,4,1,9"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextElement.Foreground>
<SolidColorBrush x:Name="TextColor" Color="#FF333333"/>
</TextElement.Foreground>
</ContentPresenter>
Notice the TextElement attached property setter that instantiates the SolidColorBrush. This is the named brush that is targeted by the storyboards.
When you do the "Edit Copy of Template" thing in Blend, it will inline some of the templates so that the Header button template will be set directly instead of being contained in the grid resources.
<Button x:Name="PART_HeaderButton" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="10.5" FontWeight="Bold" Focusable="False" Grid.Column="1" Grid.Row="0">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Cursor="Hand">
I don't know why it does this, when I edit a copy of a template I'm expecting an actual copy of the template. I suppose I understand that sometimes a template is referenced from outside, but in this case it's not - and even if it is it seems more prudent to copy it in its entirety and add it to the style/controltemplate resources. What is worse, as part of the reprocessing Blend modifies the contentpresenter definition in the template, turning it into this:
<ContentPresenter x:Name="buttonContent"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="1,4,1,9"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
TextElement.Foreground="#FF333333" />
So, in other words no more named brush, and the storyboard target is now incorrect.
Fortunately the fix is easy - use the original template as your starting point. Trouble is, blend doesn't like it and won't display because for some reason it can only set this attached property on the contentpresenter as part of the opening tag, not in the expanded mode or whatever it's called. Of course, it's probably quite possible to duplicate the functionality in another manner that is more blendable.
EDIT: Here is a quick way to hack up the template to make it blendable. And it really is a hack, though mostly a harmless one. I don't advocate doing things like this normally, but it does seem to work fine.
<ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
<Grid Cursor="Hand">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="buttonContent" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<!-- A dummy Rectangle that is essentially a container for the TextColor brush -->
<Rectangle Width="0" Height="0">
<Rectangle.Fill>
<SolidColorBrush x:Name="TextColor" Color="#FF333333"/>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter
x:Name="buttonContent"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="1,4,1,9"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextElement.Foreground="{Binding ElementName=TextColor}">
</ContentPresenter>
</Grid>
</ControlTemplate>
The essense of it is to house the brush as part of another object - technically visible if too small to be shown, and then do a binding on the contentpresenter - because it's done in the opening tag Blend doesn't complain. Yeah I know, this sort of smells, but it's the smallest rewrite of the original template that I can see to make it work.

Resources