WPF中的VisualStateManager是用于管理控件视觉状态切换的核心类，它可以将控件的状态逻辑和视觉表现分离，让控件在不同交互场景下的样式变化更可控、代码结构更清晰。
VisualStateManager的核心作用
VisualStateManager的主要价值体现在以下几个方面：
- 分离状态逻辑和视觉表现：不需要在后台代码中直接修改控件的样式属性，所有状态相关的视觉变化都可以在XAML中定义
- 统一管理控件状态：将控件的所有可能状态集中管理，比如常见的Normal、MouseOver、Pressed、Disabled等状态
- 支持状态切换过渡动画：可以为不同状态之间的切换定义平滑的过渡动画，提升用户体验
- 适配控件模板扩展：当自定义控件模板时，VisualStateManager可以保证状态逻辑和模板的视觉表现正确绑定
核心概念说明
VisualStateGroup
视觉状态组，用于将互斥的状态归类到同一个组中，同一时间一个组只能有一个状态处于激活状态。比如按钮的CommonStates组包含Normal、MouseOver、Pressed、Disabled四个互斥状态。
VisualState
具体的视觉状态，每个状态中可以定义对应的Storyboard，描述该状态下控件的视觉属性变化。比如MouseOver状态下可以定义背景色变浅的动画。
VisualTransition
状态切换过渡，定义从一个状态切换到另一个状态时执行的动画，还可以指定过渡的持续时间。
基础使用示例
下面以自定义一个带状态切换的按钮为例，展示VisualStateManager的基本用法：
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Button Width="120" Height="40" Content="测试按钮">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border x:Name="RootBorder"
Background="LightGray"
CornerRadius="4"
BorderBrush="Gray"
BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<!-- 这里不直接写触发器，改用VisualStateManager -->
</ControlTemplate.Triggers>
<ControlTemplate.Resources>
<!-- 定义VisualStateManager相关的视觉状态 -->
<Style TargetType="Control">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Control">
<Border x:Name="RootBorder"
Background="LightGray"
CornerRadius="4"
BorderBrush="Gray"
BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<!-- VisualStateManager相关定义 -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="RootBorder"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="LightGray"
Duration="0:0:0.2"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="RootBorder"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="LightBlue"
Duration="0:0:0.2"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="RootBorder"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="DarkBlue"
Duration="0:0:0.1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="RootBorder"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="Gray"
Duration="0:0:0.2"/>
</Storyboard>
</VisualState>
<!-- 定义状态切换过渡 -->
<VisualTransition From="Normal" To="MouseOver" Duration="0:0:0.2"/>
<VisualTransition From="MouseOver" To="Normal" Duration="0:0:0.2"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ControlTemplate.Resources>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Window>
后台触发状态切换
如果需要在后台代码中手动触发状态切换，可以调用VisualStateManager的GoToState方法，该方法需要传入控件实例、状态组名称和目标状态名称：
using System.Windows;
using System.Windows.Controls;
namespace WpfApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// 假设有一个按钮实例名为testButton
// 切换到MouseOver状态
VisualStateManager.GoToState(testButton, "CommonStates", "MouseOver", true);
}
}
}
使用注意事项
- 状态名称需要和控件内置的状态名称匹配，比如Button的CommonStates组下的状态名称是固定的，自定义状态需要保证名称一致
- 同一个VisualStateGroup中的状态是互斥的，不能同时激活多个
- 如果不需要过渡动画，可以不定义VisualTransition，状态切换会直接生效
- 自定义控件时，建议在OnApplyTemplate方法中初始化默认状态，避免初始状态不符合预期
WPFVisualStateManagerVisualState控件模板状态切换修改时间：2026-06-13 08:42:38