C# WPF VisualStateManager独立事件触发按钮动画失效问题

你的代码存在4个直接导致动画失效的错误：

• ViewModel中定义的ScanButton属性是你手动new出来的空FrameworkElement对象，和XAML中实际渲染、命名为ScanButton的按钮控件没有任何关联，调用VisualStateManager.GoToElementState时操作的是从未挂载到视觉树的空对象，不可能触发界面效果。
• 你将VisualStateManager.VisualStateGroups直接附加在Button控件实例上，但WPF规则要求控件的自定义视觉状态必须定义在控件的ControlTemplate内部根节点上，直接挂在控件实例上的状态组不会被VisualStateManager识别；同时你引用了第三方MaterialDesign按钮样式，外部附加的VisualState会被样式内的模板逻辑完全覆盖。
• 动画中引用的Stop1、Stop2两个GradientStop对象从未在当前XAML命名域内定义，动画找不到目标依赖属性，会直接静默失败。
• ViewModel层直接持有UI元素引用违反MVVM设计原则，会引发内存泄漏、单元测试失效等问题。

优先选择符合MVVM规范的方案1，小项目快速迭代可以用方案2。

方案1：附加属性+模板状态绑定（推荐，符合MVVM） #

不要在ViewModel中操作UI元素，通过绑定布尔属性触发状态切换，步骤如下：

1. 修改ViewModel代码，移除UI元素引用，新增动画控制属性：

class ScanningViewModel : BindableBase
{
    private bool _isScanPromptActive;
    /// <summary>
    /// 控制是否触发按钮引导动画的开关属性
    /// </summary>
    public bool IsScanPromptActive
    {
        get => _isScanPromptActive;
        set => SetProperty(ref _isScanPromptActive, value);
    }

    private void SomeOtherCommand_Execute()
    {
        // 需要触发引导动画时设为true
        IsScanPromptActive = true;
    }

    private void StopScanPrompt()
    {
        // 引导完成后关闭动画
        IsScanPromptActive = false;
    }

    // 原有ScanDocumentCommand等业务逻辑保留
}

2. 修改按钮XAML，自定义控件模板，将视觉状态、动画目标对象全部定义在模板内部，通过触发器绑定ViewModel属性切换状态：

<Grid Grid.Row="1" Grid.Column="1" DataContext="{Binding ScanningViewModel}">
    <Button Height="Auto" Margin="10" x:Name="ScanButton"
            HorizontalAlignment="Stretch"
            Style="{DynamicResource MaterialDesignOutlinedButton}"
            Command="{Binding ScanDocumentCommand}">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <!-- 模板根节点，定义动画要修改的边框渐变 -->
                <Border x:Name="RootBorder" CornerRadius="4" BorderThickness="1"
                        Background="{TemplateBinding Background}"
                        Padding="{TemplateBinding Padding}">
                    <Border.BorderBrush>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                            <GradientStop x:Name="Stop1" Color="{DynamicResource MaterialDesignBorder}" Offset="0"/>
                            <GradientStop x:Name="Stop2" Color="{DynamicResource MaterialDesignBorder}" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                    
                    <!-- 保留原有按钮内容 -->
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <materialDesign:PackIcon Kind="SearchAdd" Width="30" Height="30"/>
                        <TextBlock Margin="5,0,0,0" Text="Scanează" VerticalAlignment="Center"/>
                    </StackPanel>

                    <!-- 视觉状态组必须挂在模板根节点上 -->
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="PromptStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="ScanPrompt">
                                <Storyboard>
                                    <ColorAnimation 
                                        To="Pink" 
                                        Storyboard.TargetName="Stop1" Storyboard.TargetProperty="Color" 
                                        Duration="0:0:2" />
                                    <ColorAnimation 
                                        To="Maroon" 
                                        Storyboard.TargetName="Stop2" Storyboard.TargetProperty="Color" 
                                        Duration="0:0:2" />
                                    <ColorAnimation 
                                        To="Red" 
                                        Storyboard.TargetName="Stop1" Storyboard.TargetProperty="Color" 
                                        BeginTime="0:0:2" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
                                    <ColorAnimation 
                                        To="Blue" 
                                        Storyboard.TargetName="Stop2" Storyboard.TargetProperty="Color" 
                                        BeginTime="0:0:2" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Border>

                <ControlTemplate.Triggers>
                    <!-- 绑定ViewModel属性切换视觉状态 -->
                    <DataTrigger Binding="{Binding IsScanPromptActive}" Value="True">
                        <Setter Property="VisualStateManager.VisualState" Value="ScanPrompt"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsScanPromptActive}" Value="False">
                        <Setter Property="VisualStateManager.VisualState" Value="Normal"/>
                    </DataTrigger>
                    <!-- 注意：实际使用时请导出MaterialDesignOutlinedButton的默认模板，保留原有悬停、按下、禁用等状态的触发器，避免丢失原生样式效果 -->
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>

方案2：代码后置直接调用故事板（小项目快速实现） #

如果不想自定义控件模板，可以直接在视图层定义故事板，通过代码后置触发，不需要使用VisualStateManager：

1. 将动画定义为页面级资源，直接绑定按钮的边框属性作为动画目标：

<Page.Resources>
    <Storyboard x:Key="ScanPromptAnimation" FillBehavior="Stop">
        <ColorAnimation 
            To="Pink" 
            Storyboard.TargetName="ScanButton" 
            Storyboard.TargetProperty="BorderBrush.Color" 
            Duration="0:0:2" />
        <!-- 其余动画片段按需求补全即可，注意目标属性路径要和按钮实际属性匹配 -->
    </Storyboard>
</Page.Resources>

2. 在视图后置代码中监听ViewModel的动画触发事件，直接启动故事板：

public partial class ScanningPage : Page
{
    public ScanningPage()
    {
        InitializeComponent();
        var vm = (ScanningViewModel)DataContext;
        // 监听ViewModel中触发引导的事件
        vm.ScanPromptRequired += (_, _) => 
        {
            ((Storyboard)FindResource("ScanPromptAnimation")).Begin();
        };
    }
}

该方案存在少量View和ViewModel的耦合，仅适合逻辑简单的小型项目。

• 所有自定义VisualState必须定义在ControlTemplate的根元素下，直接附加在控件实例上的状态不会生效，这是WPF VisualStateManager的硬性规则。
• 动画的TargetName必须是当前XAML命名域内存在的元素，跨模板的元素不能直接通过TargetName引用。
• 不要在ViewModel中实例化、存储任何UI元素对象，避免破坏MVVM分层逻辑。

内容的提问来源于stack exchange，提问作者Tiha