I’m trying to set up the style for VisualStates on a ToggleButton on Silverlight. Everything works, except the Checked state is not honoring the change in Rectangle.Fill, but the text color change is working fine, so Checked is being triggered.
I want Checked to have the same VisualState as Pressed, and Pressed works fine, but when the ToggleButton is Pressed and the state is then Checked, Rectangle.Fill reverts back to the beginning state rather than what I have defined for the Checked state. Any help is much appreciated.
<UserControl.Resources>
<Style x:Key="ToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<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="ToggleButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#E3E9F1" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
<ColorAnimation Duration="0" To="#E3E9F1" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
<ColorAnimation Duration="0" To="#C2C7D0" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
<ColorAnimation Duration="0" To="#A8B0BB" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#FFD6DCE6" Storyboard.TargetProperty="Color" Storyboard.TargetName="scb"/>
<ColorAnimation Duration="0" To="#FF0C6297" Storyboard.TargetProperty="Color" Storyboard.TargetName="dse"/>
<ColorAnimation Duration="0" To="#0F72B0" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
<ColorAnimation Duration="0" To="#127DC5" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
<ColorAnimation Duration="0" To="#249CD5" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
<ColorAnimation Duration="0" To="#2AAEEA" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation Duration="0" To="#FFD6DCE6" Storyboard.TargetProperty="Color" Storyboard.TargetName="scb"/>
<ColorAnimation Duration="0" To="#FF0C6297" Storyboard.TargetProperty="Color" Storyboard.TargetName="dse"/>
<ColorAnimation Duration="0" To="#0F72B0" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
<ColorAnimation Duration="0" To="#127DC5" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
<ColorAnimation Duration="0" To="#249CD5" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
<ColorAnimation Duration="0" To="#2AAEEA" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="ThemesButton"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="ThemesButton" Height="40" Stroke="#80858C" StrokeThickness="0.75" UseLayoutRounding="False" Width="174">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#E3E9F1" Offset="0"/>
<GradientStop Color="#C2C7D0" Offset="0.09"/>
<GradientStop Color="#A8B0BB" Offset="0.75"/>
<GradientStop Color="#ABB2BC" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="ButtonText" TextWrapping="Wrap" Text="{TemplateBinding Content}" FontFamily="Calibri" FontSize="18.5" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Foreground>
<SolidColorBrush Color="#FF555555" x:Name="scb" />
</TextBlock.Foreground>
<TextBlock.Effect>
<DropShadowEffect BlurRadius="0" Color="#FFE6E6E6" ShadowDepth="1" x:Name="dse" />
</TextBlock.Effect>
</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<ToggleButton Style="{StaticResource ToggleButtonStyle}" Content="Test" />
Actually, the style is changing, but as you have the mouse over the button, the MouseOver animation is triggered after the Checked animation. You can remove the MouseOver animation to get the behavior you want, however the style won’t change when you hover on the button.
With a ToggleButton you can’t have different styles on MouseOver because this state belongs to the common states. You could create your own control to support this, though. This same question has already been asked here.