Silverlight - button does not change a color - silverlight

Question

I want to have the following behaviour - when user mouse over on button, text inside button change color. I create the following style + template:
<Style TargetType="blib:ButtonWithImage">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="images/buttonBackground.png"></ImageBrush>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="173"></Setter>
<Setter Property="Height" Value="40"></Setter>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<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="Template">
<Setter.Value>
<ControlTemplate TargetType="blib:ButtonWithImage">
<Border x:Name="Background" CornerRadius="0" Background="Transparent" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<Grid Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="Text" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="#D8FFFFFF"></ColorAnimation>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="Text" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="#D8FFFFFF"></ColorAnimation>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused" />
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<StackPanel Height="Auto" Orientation="Horizontal" Margin="10,3,10,3">
<Image Source="{TemplateBinding ImageSource}" Width="24" Height="24" Stretch="Fill"/>
<TextBlock x:Name="Text" Text="{TemplateBinding Content}" HorizontalAlignment="Left" FontWeight="Bold" Margin="5,0,0,0" VerticalAlignment="Center" FontSize="12" FontFamily="Arial" Foreground="#FFFFF6BB" />
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
but it does not work. Why?

Answer 1

The VisualStateManager.VisualStateGroups property should be attached to the root element in the Template which in this case is Border with the name "Background". Currently you have it on the Grid inside the border but the VisualStateManager won't find it.
Also your ButtonWithImage class must be derived from Button (unless you have your own code to call GoToState) but I suspect you have that already.