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…

微服务监控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…

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)字…

小程序 - 计算器

小程序交互练习 - 计算器小程序 目录 计算器 功能描述 准备工作 创建项目 配置导航栏 创建utils目录 math.js文件内容 calc.js文件内容 页面内容 页面样式内容 页面脚本事件 功能截图 总结 计算器 在日常生活中&#xff0c;计算器是人们广泛使用的工具&#xff0…

视频监控汇聚平台:Liveweb安防监控平台实现接入监控视频集中管理方案

随着各行业数字化转型的不断推进&#xff0c;视频监控技术在行业内的安防应用及管理支撑日益增多。然而&#xff0c;由于前期规划不清晰、管理不到位等问题&#xff0c;视频监管系统普遍存在以下问题&#xff1a; 1. 各部门单位在视频平台建设中以所属领域为单位&#xff0c;导…

遇到问题:hive中的数据库和sparksql 操作的数据库不是同一个。

遇到的问题&#xff1a; 1、hive中的数据库和sparksql 操作的数据库不同步。 观察上面的数据库看是否同步 &#xff01;&#xff01;&#xff01; 2、查询服务器中MySQL中hive的数据库&#xff0c;发现创建的位置没有在hdfs上&#xff0c;而是在本地。 这个错误产生的原因是&…

SQL靶场第六关

一.判断闭合点 闭合点是" 输入?id1页面无变化 输入?id1"页面报错&#xff0c;加上--&#xff0c;页面恢复正常&#xff0c;说明闭合点是" 二.判断列数 输入?id1" order by 3--页面正常 输入?id1" order by 4--页面异常&#xff0c;说明有3列…

fedora下Jetbrains系列IDE窗口中文乱码解决方法

可以看到窗口右部分的中文内容为小方块。 进入 Settings - Appearance & Behavior - Appearance - Use custom font : Note Sans Mono CJK SC &#xff0c;设置后如下图&#xff1a;

解决IDEA的easycode插件生成的mapper.xml文件字段之间逗号丢失

问题 easycode插件生成的mapper.xml文件字段之间逗号丢失&#xff0c;如图 解决办法 将easycode(在settings里面的othersettings)设置里面的Template的mapper.xml.vm和Global Config的mybatisSupport.vm的所有$velocityHasNext换成$foreach.hasNext Template的mapper.xml.vm(…

科技型中小企业信息库数据(1952-2021年)

一、包含指标&#xff1a; 企业名称 登记状态 法定代表人 注册资本 成立日期 核准日期 所属省份 所属城市 所属区县 电话 更多电话 邮箱 更多邮箱 统一社会信用代码 纳税…