GoToState 不适用于 UserControl 中的 ControlTemplate

Question

我完全迷失了，我非常感谢你对此的帮助。

我的最终目标是创建一个包含两个控件模板的用户控件。正方形和圆形。根据类型，控件将显示其中一种。当鼠标进入形状时，不透明度将更改为 0.2。

第一部分有效，但不透明度没有改变。该事件被触发并调用 GoToState，但没有结果。不透明度保持为 1。

我的 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 -->

代码隐藏：

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.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);
    }
}

有人可以告诉我问题可能出在哪里吗？

谢谢

Answer 1

UserControl 使其内容成为“根”元素，用于定位 VisualStateGroups。如果您使用 Reflector 并查看 UserControl.StateGroupsRoot，您会看到它看起来像：

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

虽然 FrameworkElement（以及大多数其他元素）使用：

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

设置 Template 属性时，Content 属性仍将为 null。当您将画布移动到资源下方时，您正在设置内容属性。所以在这种情况下可以找到视觉状态组。

您可以通过更改直接从 ContentControl 派生的控件并绕过 UserControl 来解决此问题。只需在 XAML 和代码隐藏中将 UserControl 引用更改为 ContentControl 即可。