在WPF ControlTemplate中设置两个嵌套边框元素的动画

我正在尝试为textbox创建新的ControlTemplate。最后，它应该使用几个自定义状态来更改控件的外观。代码片段中的ControlTemplate被剥离到骨头，只是为了说明我的问题

我想使用两个嵌套的边界元素，并在各种视觉状态下设置它们的边界和背景颜色的动画

<Style TargetType="{x:Type TextBox}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="MinHeight" Value="20" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBoxBase}">
                <Border Name="Border" CornerRadius="2" BorderThickness="1" Margin="2">
                    <Border.Background>
                        <SolidColorBrush Color="White" />
                    </Border.Background>
                    <Border.BorderBrush>
                        <SolidColorBrush Color="Black" />
                    </Border.BorderBrush>
                    <Border Name="Inner" CornerRadius="2" Padding="2" BorderThickness="1">
                        <Border.BorderBrush>
                            <SolidColorBrush Color="Blue" />
                        </Border.BorderBrush> 
                        <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Disabled" />
                            <VisualState x:Name="ReadOnly" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                        Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                        <EasingColorKeyFrame KeyTime="0" Value="#FFE8EDF9" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ScrollViewer Margin="0" x:Name="PART_ContentHost" />
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这几乎是可以在internet上找到的控件模板中使用visualstates的基本示例。当谈到鼠标悬停事件时，它不工作，背景也不改变。如果删除内边框，它将按预期工作

---

如果有人能够帮助我使用此模板，我将非常感谢。

您的问题是您将

VisualStateManager.VisualStateGroups

集合附加到内部

边框

元素，因此当您删除内部

边框

时，

VisualStateGroups

集合再次连接到外部的

边框

，这就是它仍然有效的原因。要修复它，只需将其移动到外部

边框中即可：

<Style TargetType="{x:Type TextBox}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="MinHeight" Value="20" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBoxBase}">
                <Border Name="Border" CornerRadius="2" BorderThickness="1" Margin="2" Background="White" BorderBrush="Black">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Disabled" />
                            <VisualState x:Name="ReadOnly" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                        <EasingColorKeyFrame KeyTime="0" Value="#FFE8EDF9" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border Name="Inner" CornerRadius="2" Padding="2" BorderThickness="1" BorderBrush="Blue" Background="{x:Null}">
                        <ScrollViewer Margin="0" x:Name="PART_ContentHost" />
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


比我快了几秒钟，谢谢你帮他清理了这些依赖关系，就像黑板上的钉子看到别人xaml里的噪音一样+感谢你为他清理了这些依赖，就像黑板上的钉子一样。。。哈哈。。。我完全明白你的意思。为了完成这个答案，要知道事件是由你正在控制的控件（或你正在做的任何其他动作）捕获的。可能发生的情况是，您的第二个边框正在捕获mouseOver事件，并对其进行处理，然后防止其调谐或冒泡。为了帮助您解决这类问题，请尝试使用像XAMLSpy这样的工具，看看在运行时真正发生了什么您建议的答案是为我创造了奇迹。非常感谢你。下次我在连接VisualStateManager时会非常小心。实际上，您将VisualStateGroup从内部边界移到了外部边界，而不是相反（如您在回答中所述）。这正是它的归属。