VisualState not called

Question

i have a custom togglebutton with some visual states. I have to override or change the "checked" state and do this in an easy way. But the state isn't shown but called. What i am doing wrong?

Heres my code (sample)

[TemplateVisualState(GroupName = CommonStateGroup, Name = ToggleButton.CheckedNormal)]
public partial class ToggleButton : ToggleButton
{
    internal const String CommonStateGroup = "CommonStates";
    internal const String CheckedNormal = "CheckedNormal";

    protected virtual void ChangeVisualState(bool useTransitions)
    {
        if (this.IsChecked.HasValue && this.IsChecked.Value)
        {
            VisualStateManager.GoToState(this, CheckedNormal, useTransitions);
        }
    }

    protected override void OnChecked(RoutedEventArgs e)
    {
        base.OnChecked(e);
        this.ChangeVisualState(true);
    }

And the Template

               <ControlTemplate x:Key="myTemplate" TargetType="{x:Type vw:ToggleButton}">
    <Grid Background="Transparent">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="CheckedNormal">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckedRectangle">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleButtonCheckedBackgroundThemeBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BackgroundBorder">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleButtonCheckedBorderThemeBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleButtonCheckedForegroundThemeBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="BackgroundBorder" CornerRadius="{TemplateBinding CornerRadius}" BorderBrush="{TemplateBinding BorderBrush}" Margin="3" BorderThickness="{TemplateBinding BorderThickness}">
            <Grid>
                <Rectangle x:Name="CheckedRectangle" StrokeThickness="0"/>
                <Rectangle x:Name="MouseOverRectangle" StrokeThickness="0"/>
                <Border x:Name="BlinkBorder" Background="{TemplateBinding BlinkBrush}" CornerRadius="{TemplateBinding CornerRadius}" Opacity="0"/>
                <ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Grid>
        </Border>
        <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
        <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
    </Grid>
</ControlTemplate>

The template is created in Blend and the state is testet by clicking around in visual states.

I think the behavior is interrupted by the "checked" state.

Your visual state is defined within that grid. It would help to post the `IsChecked` item you are referencing in your code behind. I'm guessing this is in the ContentControl? — JKennedy, Jul 25 '14 at 09:26
The problem is in the CommonStateGroup. I tested it with brushes on the following states: Normal, MouseOver and my custom state won't work together. If I touch into my control the state CheckedNormal will be shown but when I move the mouse or leave the controls border the state normal is called and my checkedstate is lost. So I have to attach events for mouse enter and leave and set visual state via code. — JPOne, Jul 25 '14 at 09:51

score 0 · Accepted Answer · answered Jul 25 '14 at 10:29

My Solution to this:

Adding a "UncheckedNormal" State reacting on Unchecked

Editing the following states: Normal: Visibility of CheckedBorder = Visible

Enabled: Visibility of CheckedBorder = Visible

MouseOver: Visibility of CheckedBorder = Collapsed

CheckedNormal: Visibility of CheckedBorder = Visible Background = CheckedBackgroundBrush

UncheckedNormal: Visibility of CheckedBorder = Visible Background = transparent

VisualState not called

1 Answers1