MAUI怎么使用Visual State Manager MAUI控件状态管理

来源:这里教程网 时间:2026-02-21 17:38:01 作者:

MAUI 使用 Visual State Manager(VSM)管理控件状态,核心是通过声明式 XAML 定义不同状态下的外观变化,无需写大量代码就能响应用户交互。关键不是“能不能改样式”,而是“在哪改、改哪些状态、怎么复用”。

常见控件支持的状态有哪些

所有继承自 VisualElement 的控件(如 Entry、Button、Label)都默认支持以下通用状态:

Normal:默认状态,必须定义(即使不写 Setter,也建议显式声明) Disabled:控件
IsEnabled="False"
时触发
Focused:获得键盘或输入焦点时(比如点击 Entry 后光标出现) PointerOver:仅在桌面平台(Windows/macOS)鼠标悬停时生效

部分控件还有专属状态:

Button:额外支持
Pressed
CheckBox / RadioButton:支持
IsChecked
/
Checked
Unchecked
Switch:支持
On
Off
CollectionView / CarouselView:支持
Selected
CurrentItem
等导航相关状态

两种写法:直接写在控件里 or 提取为样式资源

推荐优先用样式资源(

Style
),便于复用和维护;调试阶段可先写在控件内快速验证。

✅ 写在控件内(适合单点调试):

<Entry Placeholder="请输入">
  <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
      <VisualState x:Name="Normal">
        <VisualState.Setters>
          <Setter Property="BackgroundColor" Value="White"/>
        </VisualState.Setters>
      </VisualState>
      <VisualState x:Name="Focused">
        <VisualState.Setters>
          <Setter Property="BackgroundColor" Value="#F0F8FF"/>
          <Setter Property="FontSize" Value="20"/>
        </VisualState.Setters>
      </VisualState>
    </VisualStateGroup>
  </VisualStateManager.VisualStateGroups>
</Entry>

✅ 提取为隐式样式(推荐用于全项目统一):

<ContentPage.Resources>
  <Style TargetType="Entry">
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="VisualStateManager.VisualStateGroups">
      <VisualStateGroupList>
        <VisualStateGroup x:Name="CommonStates">
          <VisualState x:Name="Normal">
            <VisualState.Setters>
              <Setter Property="BackgroundColor" Value="White"/>
            </VisualState.Setters>
          </VisualState>
          <VisualState x:Name="Disabled">
            <VisualState.Setters>
              <Setter Property="BackgroundColor" Value="#F5F5F5"/>
              <Setter Property="TextColor" Value="#999"/>
            </VisualState.Setters>
          </VisualState>
        </VisualStateGroup>
      </VisualStateGroupList>
    </Setter>
  </Style>
</ContentPage.Resources>

这样所有

Entry
都自动应用该状态逻辑,不用每个都重复写。

状态切换是自动的,但得确保条件成立

VSM 不需要手动调用“切换状态”,只要控件属性变化满足内置规则,就会自动激活对应状态:

设置
IsEnabled="False"
→ 自动进入
Disabled
状态
点击 Entry 或按 Tab 进入 → 触发
Focused
鼠标移入 Button → 在 Windows/macOS 上触发
PointerOver
(iOS/Android 不支持)
按下 Button → 自动进入
Pressed
(松开后自动回退到 Normal 或其他当前有效状态)

⚠️ 注意:如果某个状态没生效,先检查是否拼错状态名(比如写成

Focus
而非
Focused
),或目标平台是否支持(如
PointerOver
在移动端无效)。

自定义状态(进阶用法)

除了内置状态,你还可以定义自己的状态组和状态,配合代码控制:

<Button Text="切换主题">
  <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ThemeStates">
      <VisualState x:Name="Light">
        <VisualState.Setters>
          <Setter Property="BackgroundColor" Value="White"/>
          <Setter Property="TextColor" Value="Black"/>
        </VisualState.Setters>
      </VisualState>
      <VisualState x:Name="Dark">
        <VisualState.Setters>
          <Setter Property="BackgroundColor" Value="#121212"/>
          <Setter Property="TextColor" Value="White"/>
        </VisualState.Setters>
      </VisualState>
    </VisualStateGroup>
  </VisualStateManager.VisualStateGroups>
</Button>

然后在后台 C# 中切换:

VisualStateManager.GoToState(myButton, "Dark");

适用于主题切换、表单步骤高亮等场景。

基本上就这些。状态管理不复杂,但容易忽略平台差异和状态命名一致性。把常用状态提前定义好,后续开发会省不少事。

相关推荐