GoToState does not work for ControlTemplate in UserControl

I am totally lost and I would really appreciate your help on this.

My final goal is to create a user control that will contain two control templates. Square and a Circle. Based on a type the control will display one or the other. When the mouse enters the shape the Opacity will change to 0.2.

The first part works but the Opacity does not change. The event is triggered and a GoToState is called, but with no result. The Opacity stays 1.

My XAML:

<UserControl.Resources>

    <ControlTemplate x:Key="TemplateSquare" TargetType="{x:Type local:KeyControl}">

        <Canvas x:Name="MainCanvas" VerticalAlignment="Center" HorizontalAlignment="Center">

            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="CenterRectangle" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To=".2"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Rectangle x:Name="CenterRectangle" Fill="Red" Width="100" Height="100"></Rectangle>

        </Canvas>

    </ControlTemplate>    
</UserControl.Resources> 
<!-- IF I MOVE THE CANVAS HERE THE OPACITY CHANGES ON MOUSE OVER -->

Codebehind:

public partial class KeyControl : UserControl
{
    private bool _isPressed = false;
    private bool _isMouseOver = false;

    public KeyControl()
    {
        InitializeComponent();

        this.Loaded += new RoutedEventHandler(KeyControl_Loaded);
    }


    private void KeyControl_Loaded(object sender, RoutedEventArgs e)
    {
        //this will be set in the Type setter
        this.Template = this.FindResource("TemplateSquare") as ControlTemplate;

        this.MouseEnter += new MouseEventHandler(CorePart_MouseEnter);
        this.MouseLeave += new MouseEventHandler(CorePart_MouseLeave);

        GoToState(false);
    }

    private void GoToState(bool useTransitions)
    {
        if (_isPressed)
            VisualStateManager.GoToState(this, "Pressed", useTransitions);
        else if (_isMouseOver)
            VisualStateManager.开发者_Python百科GoToState(this, "MouseOver", useTransitions);
        else
            VisualStateManager.GoToState(this, "Normal", useTransitions);
    }

    private void CorePart_MouseLeave(object sender, MouseEventArgs e)
    {
        _isMouseOver = false;
        GoToState(true);
    }

    private void CorePart_MouseEnter(object sender, MouseEventArgs e)
    {
        _isMouseOver = true;
        GoToState(true);
    }
}

Can somebody please tell me where the problem could be?

Thank You

---

The UserControl makes it's Content the "root" element, which is used to locate the VisualStateGroups. If you use Reflector and look at UserControl.StateGroupsRoot, you'd see it looks like:

internal override FrameworkElement StateGroupsRoot {
    get {
        return (base.Content as FrameworkElement);
    }
}

While FrameworkElement (and thus most other elements) use:

internal virtual FrameworkElement StateGroupsRoot {
    get {
        return (this._templateChild as FrameworkElement);
    }
}

When setting the Template property, the Content property will still be null. When you move the Canvas to be below Resources, you are setting the Content property. So the visual state groups can be found in that case.

You can work around this by changing your control derive from ContentControl directly, and bypass UserControl. Simply change UserControl references to ContentControl in your XAML and code-behind.