WPF中的VisualState(视觉状态)

以前在设置控件样式或自定义控件时,都是使用触发器来进行样式更改。触发器可以在属性值发生更改时启动操作。

像这样:

<Style TargetType="ListBoxItem"><Setter Property="Opacity" Value="0.5" /><Setter Property="MaxHeight" Value="75" /><Style.Triggers><Trigger Property="IsSelected" Value="True"><Trigger.Setters><Setter Property="Opacity" Value="1.0" /></Trigger.Setters></Trigger></Style.Triggers></Style>

还可以使用VisualState类来进行样式更改

VisualState类实现了可以让控件始终处于特定的状态的功能。例如,当鼠标在控件的表面上移动时,该控件被视为处于MouseOver状态。 没有特定状态的控件被视为处于 Normal 状态。

状态分为多个组,前面提到的MouseMove状态和Normal属于 CommonStates 状态组(VisualStateGroup)。 大多数控件都有两个状态组:CommonStates和 FocusStates。 

在应用于控件的每个状态组中,控件始终处于每个组的一种状态。但是,控件不能处于同一组中的两种不同状态。

完整的状态可以参照下表:

VisualState 名称VisualStateGroup 名称描述
NormalCommonStates默认状态。
MouseOverCommonStates鼠标指针悬停在控件上方。
PressedCommonStates已按下控件。
DisabledCommonStates已禁用控件。
FocusedFocusStates控件有焦点。
UnfocusedFocusStates控件没有焦点。

注意:

1、VisaulState只适用于状态改变需要过渡动画的情况,如果不想实现过渡效果,推荐使用触发器。 

2、如果要查找WPF附带控件可视状态(VisualState)的名称,可参阅控件源码。(https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/controls/control-styles-and-templates)

下面我们使用VisualState类来自定义一个Button样式

1、使用Visual Studio 2019创建一个.Net Core WPF程序

2、在MainWindow中添加两个Button控件,第一个button用于展示状态,第二个button用于模拟控制第一个按钮的状态

 1 <Window x:Class="VisualStateDemo.MainWindow"2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"6         xmlns:local="clr-namespace:VisualStateDemo"7         mc:Ignorable="d"8         Title="MainWindow" Height="450" Width="800">   9     <StackPanel>
10         <Button Content="button1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="88" Height="26" Name="btn"/>
11         <Button Content="button2(make button 1 to Pressed state)" HorizontalAlignment="Center" VerticalAlignment="Bottom"  Height="26" Name="btn_2" Click="btn_2_Click"/>
12     </StackPanel>
13 </Window>

3、在Windows.Resources下定义样式,如下

 1  <Window.Resources>2         <Style TargetType="{x:Type Button}">3             <Setter Property="BorderBrush" Value="Transparent"/>4             <Setter Property="Background" Value="Black"/>5             <Setter Property="Foreground" Value="White"/>6 7             <Setter Property="Template">8                 <Setter.Value>9                     <ControlTemplate TargetType="{x:Type Button}">
10                         <Border BorderThickness="{TemplateBinding Border.BorderThickness}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" Name="border" SnapsToDevicePixels="True" CornerRadius="5">
11                             <VisualStateManager.VisualStateGroups>
12                                 <VisualStateGroup Name="CommonStates">
13                                     <VisualState Name="Normal">
14                                         <Storyboard>
15                                             <ColorAnimation Storyboard.TargetName="border"
16                                     Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
17                                     To="{TemplateBinding Background}"
18                                     Duration="0:0:0.3"/>
19                                         </Storyboard>
20                                     </VisualState>
21                                     <VisualState Name="MouseOver">
22                                         <Storyboard>
23                                             <ColorAnimation Storyboard.TargetName="border"
24                                     Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
25                                     To="Silver"
26                                     Duration="0:0:0.3"/>
27                                         </Storyboard>
28                                     </VisualState>
29                                     <VisualState Name="Pressed">
30                                         <Storyboard>
31                                             <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#7b8488" Duration="0:0:0.3"/>
32                                         </Storyboard>
33                                     </VisualState>
34                                 </VisualStateGroup>
35                             </VisualStateManager.VisualStateGroups>
36                             <ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" Name="contentPresenter" Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" Focusable="False" />
37                         </Border>
38                     </ControlTemplate>
39                 </Setter.Value>
40             </Setter>
41         </Style>
42     </Window.Resources>

4、运行效果如下:

5、使用代码控制VisualState

调用System.Windows.VisualStateManager.GoToState函数,可以指定控件的状态。

在按钮2的单击事件中添加以下代码

1         private void btn_2_Click(object sender, RoutedEventArgs e)
2         {
3             System.Windows.VisualStateManager.GoToState(btn, "Pressed", false);
4         }

如果是自定义控件,直接将控件名换成this即可

1 System.Windows.VisualStateManager.GoToState(this, "Pressed", false);

注意:

如果在ControlTemplate中使用 VisualStateManager,应该调用 GoToState 方法。

如果在ControlTemplate 外使用 VisualStateManager (例如,如果在 UserControl 中或在单个元素中使用 VisualStateManager),应该调用 GoToElementState 方法。

示例代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/888766.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ARINC 标准全解析:航空电子领域多系列标准的核心内容、应用与重要意义

ARINC标准概述 ARINC标准是航空电子领域一系列重要的标准规范&#xff0c;由航空电子工程委员会&#xff08;AEEC&#xff09;编制&#xff0c;众多航空公司等参与支持。这些标准涵盖了从飞机设备安装、数据传输到航空电子设备功能等众多方面&#xff0c;确保航空电子系统的兼…

用golang简单做一个内网穿透小工具!

一个个人需求&#xff0c;需要简单的穿透一下 家里的电脑&#xff0c;也不需要多稳定&#xff0c;也没有并发。然后 通过http可以访问到内网的 一个网站&#xff0c; 因为服务端 是linux 系统 &#xff0c;内网是 windows10服务器 所以 就采用 用golang这个语言来实现&#xff…

Android Studio 历史版本下载

Android Studio 历史版本下载 官方链接&#xff1a;https://developer.android.google.cn/studio/archive 通过gradle插件版本反查Android Studio历史版本 Android Studio Ladybug | 2024.2.1 October 1, 2024 【https://redirector.gvt1.com/edgedl/android/studio/ide-zip…

微服务监控prometheus+Grafana

目录 Prometheus 概述 核心组件 特点 使用场景 Grafana 概述 功能特点 使用场景 PrometheusGrafana组合 部署和配置 一、准备工作 二、部署Prometheus 三、部署Grafana 四、创建监控仪表盘 五、验证和调优 总结 微服务监控是确保微服务架构稳定运行的关键环节…

(vue)el-cascader多选级联选择器,值取最后一级的数据

(vue)el-cascader多选级联选择器&#xff0c;取值取最后一级的数据 获取到&#xff1a;[“养殖区”,“鸡棚”,“E5001”] 期望&#xff1a;[“E5001”] 问题: 解决方法 增加change事件方法&#xff0c;处理选中的value值 1.单选 <el-cascaderv-model"tags2":o…

Java设计模式之状态模式架构高扩展的订单状态管理

🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c=1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编程,高并发设计,Springboot和微服务,熟悉Linux,ESXI虚拟化以及云原生Docker和K8s…

独立ip服务器有什么优点?

网站的性能和安全性直接影响到用户体验和业务发&#xff0c;独立IP服务器作为一种主流的托管方式&#xff0c;因其独特的优势而受到许多企业和个人站长的青睐。与共享IP相比&#xff0c;独立IP服务器到底有哪些优点呢&#xff1f; 使用独立IP的用户不必担心与其他网站共享同一…

深入理解MySQL中的ONLY_FULL_GROUP_BY

在MySQL数据库管理中&#xff0c;ONLY_FULL_GROUP_BY是一个重要的SQL模式&#xff0c;它直接影响着GROUP BY语句的执行方式和结果。本文将从基础概念出发&#xff0c;逐步解析ONLY_FULL_GROUP_BY的工作原理、应用场景及应对策略。 什么是ONLY_FULL_GROUP_BY&#xff1f; ONLY…

图论理论基础和存储方式的实现

图论1 图论 (Graph theory) 是数学的一个分支&#xff0c;图是图论的主要研究对象。图 (Graph) 是由若干给定的顶点及连接两顶点的边所构成的图形&#xff0c;这种图形通常用来描述某些事物之间的某种特定关系。顶点用于代表事物&#xff0c;连接两顶点的边则用于表示两个事物…

每日一练 | Diff-Serv在QoS配置中的应用

01 真题题目 通常在配置 QoS 中的 Diff-Serv 时,边界路由器会通过报文的源地址和目的地址等对报文 进行分类,对不开的报文设置不同的IP优先级,而其他路由器只需要根据IP优先来对报文进行 识别即可 A.正确 B.错误 02 真题答案 A 03 答案解析 在基于 Diff-Serv&#xff08;Diff…

macOS运行amd64的镜像

在macOS上运行amd64&#xff08;x86_64&#xff09;架构的镜像&#xff0c;通常通过虚拟化或仿真工具来实现。例如&#xff0c;如果你使用的是基于Apple Silicon&#xff08;M1或M2等&#xff09;芯片的Mac&#xff0c;那么你的处理器是ARM架构的&#xff0c;而amd64是x86架构&…

Git常用的命令【提交与回退】

git分布式版本控制系统 &#xff08;SVN集中式版本控制系统&#xff09;之间的对比 git有本地仓库和远程仓库&#xff0c;不同的开发人员可以分别提交自己的本地仓库并维护代码的版本控制。 然后多个人员在本地仓库协作的代码&#xff0c;可以提交到远程仓库中做整合。 git本…

AUTOSAR AP和CP的安全要求规范(Safety Req)详细解读

一、规范的编制的背景原因 编制该规范的原因 确保系统安全性和可靠性 随着汽车电子系统日益复杂&#xff0c;功能不断增加&#xff0c;对安全性和可靠性的要求也越来越高。该规范为AUTOSAR平台在安全执行、配置、更新、信息交换、数据处理等多方面制定了明确要求&#xff0c;…

黑马程序员MybatisPlus/Docker相关内容

Day01 MP相关知识 1. mp配置类&#xff1a; 2.条件构造器&#xff1a; 具体的实现例子&#xff1a; ①QuerryWapper&#xff1a; ②LambdaQueryWrapper: 3.MP的自定义SQL 4.MP的Service层的实现 5.IService下的Lambda查询 原SQL语句的写法&#xff1a; Lambda 查询语句的…

一番赏小程序定制开发,打造全新抽赏体验平台

随着盲盒的热潮来袭&#xff0c;作为传统的潮玩方式一番赏也再次受到了大家的关注&#xff0c;市场热度不断上升&#xff01; 一番赏能够让玩家百分百中奖&#xff0c;商品种类丰富、收藏价值高&#xff0c;拥有各种IP&#xff0c;从而吸引着各个圈子的粉丝玩家&#xff0c;用…

【小脚本】pandas 操作csv,数据筛选分析生成表格

有一个表格&#xff0c;想要具体分析里面的数据&#xff0c;获得在一定条件下的结果&#xff0c;并且想要比较好的可视化。 下面的脚本涉及 修改 列的名字&#xff0c;并用excel 中的列名索引剔除第一行&#xff0c;去掉没打分的行对所选择的列统计&#xff0c;并更好的可视化…

HarmonyOS 5.0应用开发——Ability与Page数据传递

【高心星出品】 文章目录 Ability与Page数据传递Page向Ability传递数据Ability向Page传递数据 Ability与Page数据传递 基于当前的应用模型&#xff0c;可以通过以下几种方式来实现UIAbility组件与UI之间的数据同步。 使用EventHub进行数据通信&#xff1a;在基类Context中提供…

【求助】Tinymce组件异常

版本号 { "tinymce/tinymce-vue": "^3.0.1", "tinymce": "^5.10.9", "vue": "^2.6.10", }问题&#xff1a; 就是红框处点击后没有菜单出现&#xff0c;下面是正常的

【100】SR-IOV cap中Supported Page Sizes (RO)和System Page Size (RW)

SR-IOV的介绍见&#xff1a;【88】SR-IOV-CSDN博客 SR-IOV cap中的Supported Page Sizes (RO)和System Page Size (RW)字段 SR-IOV cap中定义了Supported Page Sizes (RO)和System Page Size (RW)两个字段&#xff0c;offset 如下&#xff1a; Supported Page Sizes (RO)字…