WPF入门--多种方式设置样式（Style）

前言

在上篇文章中，介绍了WPF九种布局方式。本篇文章通过多种方式设置样式（Style）以控制UI元素的外观和行为。下面来具体介绍一下。

传送门

WPF入门--常用布局方式

目录

前言

一、直接在XAML中设置属性（内联样式）

二、基于特定控件类型设置属性（隐式样式）

三、基于x:Key设置属性（显式样式）

四、继承样式设置属性

五、使用应用级别的资源

六、使用资源字典（Resource Dictionary）

七、使用触发器（Triggers）

总结

一、直接在XAML中设置属性（内联样式）

这是最简单的方式，直接在XAML文件中为每个控件单独设置属性。有点类似我们在HTML标签上加style属性。

<Button Width="100" Height="50" Background="Aqua" FontSize="20" x:Name="ClickMe"  Content="点击"/>

我们平时肯定很少这样写，只是偶尔标签会单独定义样式。

二、基于特定控件类型设置属性（隐式样式）

直接为特定类型的所有控件应用样式。

名称描述
TargetType目标类型
Setter

样式项，键值对

Property 属性名称

Value 属性值

<Window x:Class="WpfApp1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp1"mc:Ignorable="d"Title="GridDemo" Height="300" Width="450"><Window.Resources><Style TargetType="Button"><Setter Property="Width" Value="100"/><Setter Property="Height" Value="50"/><Setter Property="Background" Value="Crimson"/><Setter Property="FontSize" Value="18"></Setter></Style></Window.Resources><Grid ShowGridLines="True"><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><Button Grid.Row="0" Grid.Column="0">Button 1</Button><Button Grid.Row="0" Grid.Column="1">Button 2</Button></Grid>
</Window>

有点类似CSS中，直接定义标签样式。

input{width: 150px;
}

这里说下  

  • <Window.Resources></Window.Resources>：是XAML中的一个元素，用于在特定的窗口范围内定义资源。资源可以是样式（Style）、模板（Template）、画笔、字符串、图像等。这些资源可以在窗口内的所有子元素中被引用和使用。
  • StaticResource和DynamicResource：StaticResource在加载XAML时（编译时）进行一次性查找和解析。这意味着在使用StaticResource引用资源时，资源的值在应用启动时就已经确定，并且在应用运行期间不会再改变。DynamicResource在运行时进行查找和解析。这意味着在使用DynamicResource引用资源时，资源的值可以在应用运行期间动态改变，并且控件会自动更新以反映资源值的变化。

这样写，也还有一个缺点，无法让每个按钮都有不同的样式。

三、基于x:Key设置属性（显式样式）

x:Key有点类似CSS中的class功能，可以定义key，让不同标签引用。和第二个方式差不多，只是多了一个x:Key属性。

<Window x:Class="WpfApp1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp1"mc:Ignorable="d"Title="GridDemo" Height="300" Width="450"><Window.Resources><Style x:Key="Button1Style" TargetType="Button"><Setter Property="Width" Value="100"/><Setter Property="Height" Value="50"/><Setter Property="Background" Value="Blue"/></Style><Style x:Key="Button2Style" TargetType="Button"><Setter Property="Width" Value="100"/><Setter Property="Height" Value="50"/><Setter Property="Background" Value="Red"/></Style></Window.Resources><Grid ShowGridLines="True"><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><Button Style="{StaticResource Button1Style}" Grid.Row="0" Grid.Column="0">Button 1</Button><Button Style="{StaticResource Button2Style}" Grid.Row="0" Grid.Column="1">Button 2</Button></Grid>
</Window>

这样写，也会有个问题，因为有很多重复的属性样式，看着很鸡肋。

四、继承样式设置属性

在之前的基础上，加上BasedOn特性，可以继承样式。

<Window x:Class="WpfApp1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp1"mc:Ignorable="d"Title="GridDemo" Height="450" Width="600"><Window.Resources><Style x:Key="Button1Style" TargetType="Button"><Setter Property="Width" Value="100"/><Setter Property="Height" Value="50"/><Setter Property="Background" Value="Blue"/></Style><Style x:Key="Button2Style" TargetType="Button" BasedOn="{StaticResource Button1Style }"><Setter Property="Background" Value="Red"/><Setter Property="FontWeight" Value="Bold"/><Setter Property="FontSize" Value="20"/></Style></Window.Resources><Grid ShowGridLines="True"><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><Button Style="{StaticResource Button1Style}" Grid.Row="0" Grid.Column="0">Button 1</Button><Button Style="{StaticResource Button2Style}" Grid.Row="0" Grid.Column="1">Button 2</Button></Grid>
</Window>

五、使用应用级别的资源

将样式定义在App.xaml文件中，使得整个应用程序中的控件都可以使用这些样式。

//App.xaml 文件
<Application x:Class="WpfApp1.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WpfApp1"StartupUri="MainWindow.xaml"><Application.Resources><Style x:Key="Button1Style" TargetType="Button"><Setter Property="Width" Value="100"/><Setter Property="Height" Value="50"/><Setter Property="Background" Value="Blue"/></Style><Style x:Key="Button2Style" TargetType="Button" BasedOn="{StaticResource Button1Style }"><Setter Property="Background" Value="Red"/><Setter Property="FontWeight" Value="Bold"/><Setter Property="FontSize" Value="20"/></Style></Application.Resources>
</Application>//MainWindow.xaml 文件
<Application x:Class="WpfApp1.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WpfApp1"StartupUri="MainWindow.xaml"><Application.Resources><Style x:Key="Button1Style" TargetType="Button"><Setter Property="Width" Value="100"/><Setter Property="Height" Value="50"/><Setter Property="Background" Value="Blue"/></Style><Style x:Key="Button2Style" TargetType="Button" BasedOn="{StaticResource Button1Style }"><Setter Property="Background" Value="Red"/><Setter Property="FontWeight" Value="Bold"/><Setter Property="FontSize" Value="20"/></Style></Application.Resources>
</Application>

六、使用资源字典（Resource Dictionary）

将样式定义在独立的资源字典文件中，然后在需要的地方引用这些字典。有点类似，创建.css文件，在需要的页面引用css文件。

1、VS右键创建资源字典(WPF)文件，命名为CustomerStyle.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Style x:Key="Button1Style" TargetType="Button"><Setter Property="Width" Value="100"/><Setter Property="Height" Value="50"/><Setter Property="Background" Value="Blue"/></Style><Style x:Key="Button2Style" TargetType="Button" BasedOn="{StaticResource Button1Style }"><Setter Property="Background" Value="Red"/><Setter Property="FontWeight" Value="Bold"/><Setter Property="FontSize" Value="20"/></Style>
</ResourceDictionary>

2、页面中引用CustomerStyle.xaml文件

<Window x:Class="WpfApp1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp1"mc:Ignorable="d"Title="GridDemo" Height="450" Width="600"><Window.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="CustomerStyle.xaml"/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Window.Resources><Grid ShowGridLines="True"><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><Button Style="{StaticResource Button1Style}" Grid.Row="0" Grid.Column="0">Button 1</Button><Button Style="{StaticResource Button2Style}" Grid.Row="0" Grid.Column="1">Button 2</Button></Grid>
</Window>

<ResourceDictionary Source="xx.xaml"/>，需要注意的是Source后面的文件路径，我是两个页面在同一级目录下。不同目录，路径需要注意。

七、使用触发器（Triggers）

使用Style.Triggers定义条件样式，当条件满足时应用样式。

<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="350" Width="525"><Window.Resources><Style x:Key="ButtonStyle" TargetType="Button"><Setter Property="Width" Value="100"/><Setter Property="Height" Value="50"/><Setter Property="Background" Value="Blue"/><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="Red"/></Trigger></Style.Triggers></Style></Window.Resources><Grid><Button Style="{StaticResource ButtonStyle}" Content="Hover Me" HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid>
</Window>

当鼠标移动到Button按钮时，会变成红色。（但是这个例子，颜色没有变，可能是我版本的问题。下面是我成功的例子。）

<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="350" Width="525"><Window.Resources><Style x:Key="ButtonStyle" TargetType="Button"><Setter Property="Width" Value="100"/><Setter Property="Height" Value="50"/><Setter Property="Background" Value="Blue"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="Red"/></Trigger></Style.Triggers></Style></Window.Resources><Grid><Button Style="{StaticResource ButtonStyle}" Content="Hover Me" HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid>
</Window>

总结

WPF中提供了多种样式设置方式，可以满足不同的UI设计需求：

  • 内联样式：简单直接，适用于一次性设置。
  • 显式样式：通过资源引用应用样式，适用于多个控件共享样式。
  • 隐式样式：自动应用样式到所有特定类型的控件，简化样式管理。
  • 资源字典：集中管理资源，可以在窗口级别、页面级别或独立文件中定义，便于资源的复用和管理。
  • 应用级别资源：在App.xaml中定义，全局可用，适用于需要在整个应用中共享的资源。

后面用到还会继续补充。

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

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

相关文章

【蓝桥杯2025备赛】分巧克力

【蓝桥杯2025备赛】分巧克力

【蓝桥杯2025备赛】分巧克力 [蓝桥杯 2017 省 AB] 分巧克力 题目描述 儿童节那天有 K K K 位小朋友到小明家做客。小明拿出了珍藏的巧克力招待小朋友们。 小明一共有 N N N 块巧克力&#xff0c;其中第 i i i 块是 H i W i H_i \times W_i Hi​Wi​ 的方格组成的长方形…
阅读更多...
C++ | Leetcode C++题解之第135题分发糖果

C++ | Leetcode C++题解之第135题分发糖果

题目&#xff1a; 题解&#xff1a; class Solution { public:int candy(vector<int>& ratings) {int n ratings.size();int ret 1;int inc 1, dec 0, pre 1;for (int i 1; i < n; i) {if (ratings[i] > ratings[i - 1]) {dec 0;pre ratings[i] rati…
阅读更多...
c++ 里函数选择的优先级：普通函数、模板函数、万能引用，编译器选择哪个执行呢？

c++ 里函数选择的优先级：普通函数、模板函数、万能引用，编译器选择哪个执行呢？

看大师写的代码时&#xff0c;除了在类里定义了 copy 构造函数&#xff0c;移动构造函数&#xff0c;还定义了对形参采取万能引用的构造函数&#xff0c;因此有个疑问&#xff0c;这时候的构造函数优先级是什么样的呢&#xff1f;简化逻辑测试一下&#xff0c;如下图&#xff0…
阅读更多...
计算机网络 —— 数据链路层（以太网）

计算机网络 —— 数据链路层（以太网）

计算机网络 —— 数据链路层&#xff08;以太网&#xff09; 什么是以太网以太网传输介质和拓扑结构的发展传输介质的发展&#xff1a;拓扑结构的发展&#xff1a; 10BASE-T 以太网适配器和MAC地址适配器&#xff08;Adapter&#xff09;MAC地址适配器与MAC地址的关系 MAC帧以太…
阅读更多...
GLM-4-9B领先！伯克利函数调用榜单BFCL的Function Calling评测方法解析与梳理

GLM-4-9B领先！伯克利函数调用榜单BFCL的Function Calling评测方法解析与梳理

智谱公布的GLM-4-9B基于BFCL榜单的工具调用能力测试结果 ©作者|格林 来源|神州问学 在智谱最新开源的GLM-4-9B-Chat中&#xff0c;其工具调用能力在BFCL&#xff08;伯克利函数调用排行榜&#xff09;榜上获得了超高的总BFCL分&#xff0c;和gpt-4-turbo-2024-04-09几乎不…
阅读更多...
举个栗子！Quick BI 技巧（8）：柱形图的制作及应用

举个栗子！Quick BI 技巧（8）：柱形图的制作及应用

众所周知&#xff0c;在数据分析中&#xff0c;柱形图是利用率非常高的一种图&#xff0c;主要是用于比较各组数据之间的差别&#xff0c;并且可以显示一段时间内的数据变化情况。那么在 Quick BI 中要如何来制作柱形图呢&#xff1f; 今天的栗子&#xff0c;我们就来分享如何…
阅读更多...
网关鉴权模块-鉴权+登录拦截+jwt

网关鉴权模块-鉴权+登录拦截+jwt

1. 鉴权流程 浏览器发送请求时。请求头会携带键值对"authorization"&#xff1a;jwt 网关先解析jwt令牌&#xff0c;做第一次鉴权&#xff0c;鉴权完成后将解析的user对象的id添加到请求头中&#xff1a;user-info 用户id&#xff1b; 微服务的拦截器会获取请求头中…
阅读更多...
spring boot2.7.x遇到问题

spring boot2.7.x遇到问题

validation报错 高版本已移除了validation以来&#xff0c;需手动添加 <dependency><groupId>jakarta.validation</groupId><artifactId>jakarta.validation-api</artifactId> </dependency>mybatis报错 升级版本 <dependency>&…
阅读更多...
基础篇01——SQL的基本语法和分类

基础篇01——SQL的基本语法和分类

MySQL数据库安装与基本使用 安装教程参见&#xff1a;通过zip安装MySQL 通过命令行启动和停止MySQL服务命令 前提&#xff1a;安装MySQL成功之后 启动服务&#xff1a;net start mysql 停止服务&#xff1a;net stop mysql 通过命令行连接mysql 可以通过mysql的客户端命令行…
阅读更多...
记录某书请求返回406及响应{“code“:-1,“success“:false}

记录某书请求返回406及响应{“code“:-1,“success“:false}

今天测试某个平台的爬虫时使用requests post请求正常写了个测试脚本把各种参数带上出来以后出现了406情况&#xff0c;和网站数据是完全一样的 以为是 X-S、X-T参接不对&#xff0c;但在postman里测试又是可以的成功&#xff0c;以为是检验了参数顺序&#xff0c;测试发现也没…
阅读更多...
SQLAlchemy 模型中数据的错误表示

SQLAlchemy 模型中数据的错误表示

1. 问题背景 在使用 SQLAlchemy 0.6.0 版本&#xff08;也曾尝试使用 0.6.4 版本&#xff09;的 Pylons 应用程序中遇到了一个 SQLAlchemy ORM 问题。该问题出现在使用 psycopg2 作为数据库驱动程序、连接至 Postgresql 8.2 数据库的环境中。定义了一个 User 模型对象&#xf…
阅读更多...
封装了一个仿照抖音评论轮播效果的iOS轮播视图

封装了一个仿照抖音评论轮播效果的iOS轮播视图

效果图 原理 就是我们在一个视图里面有两个子视图&#xff0c;一个是currentView, 一个是willShowView,在一次动画过程中&#xff0c;我们改变current View的frame&#xff0c;同时改变willShowView的frame&#xff0c;同时&#xff0c;需要改变currentVIew 的transform.y不然…
阅读更多...
Linux操作系统：Redis在虚拟环境下的安装与部署

Linux操作系统：Redis在虚拟环境下的安装与部署

Redis下载方法 最近部署项目的时候用到了Redis&#xff0c;自己在安装的时候也碰到了一些列问题最终安装成功&#xff0c;记录一下自己的安装历程。前期准备&#xff1a; 服务器Linux版本&#xff1a;Centos8.4 64位&#xff08;http://isoredirect.centos.org/centos/8/isos/…
阅读更多...
快速了解JVM机制

快速了解JVM机制

1.JVM 简介 JVM 是 Java Virtual Machine 的简称&#xff0c;意为 Java虚拟机。 虚拟机是指通过软件模拟的具有完整硬件功能的、运⾏在⼀个完全隔离的环境中的完整计算机系统。 常⻅的虚拟机&#xff1a;JVM、VMwave、Virtual Box。 JVM 和其他两个虚拟机的区别&#xff1a; V…
阅读更多...
Ubuntu有线连接消失，无法联网怎么办！

Ubuntu有线连接消失，无法联网怎么办！

今天重启 Ubuntu 虚拟机&#xff0c;突然之间发现没有网络&#xff0c;打开设置中的网络看&#xff0c;有线网络竟然消失了 经过一番查阅资料&#xff0c;发现解决问题很简单&#xff1a; 先看原因&#xff0c;输入命令 sudo lshw -c Network 检查所有的网络情况&#xff0c…
阅读更多...
每天坚持写java锻炼能力---第一天(6.4)

每天坚持写java锻炼能力---第一天(6.4)

今天的目标是菜单&#xff1a; B站/马士兵的项目菜单 package java1;import java.util.Scanner;public class Test {public static void main(String[] args) {while(true){ //3.加入死循环&#xff0c;让输入一直有System.out.println();System.out.println("--->项…
阅读更多...
Python logging 模块详解

Python logging 模块详解

Python 的 logging 模块提供了一个强大而灵活的日志系统。它是 Python 标准库的一部分&#xff0c;因此可以在任何 Python 程序中使用。logging 模块提供了许多有用的功能&#xff0c;包括日志消息的级别设置、日志消息的格式设置、将日志消息输出到不同的目标&#xff0c;以及…
阅读更多...
Java1.8 vue版家政服务系统成品源码 家政管家系统源码 家政月嫂系统源码 家政保洁系统源码 在线派单，师傅入驻全套商业源码

Java1.8 vue版家政服务系统成品源码 家政管家系统源码 家政月嫂系统源码 家政保洁系统源码 在线派单，师傅入驻全套商业源码

Java1.8 vue版家政服务系统成品源码 家政管家系统源码 家政月嫂系统源码 家政保洁系统源码 在线派单&#xff0c;师傅入驻全套商业源码 一、系统定义 家政上门服务系统是一种利用互联网技术&#xff0c;将家政服务需求与专业的家政服务人员进行高效匹配的平台。它允许用户通过…
阅读更多...
信息系统项目管理师0146：输入（9项目范围管理—9.3规划范围管理—9.3.1输入）

信息系统项目管理师0146：输入（9项目范围管理—9.3规划范围管理—9.3.1输入）

点击查看专栏目录 文章目录 9.3 规划范围管理9.3.1 输入9.3 规划范围管理 规划范围管理是为了记录如何定义、确认和控制项目范围及产品范围，而创建范围管理计划的过程。本过程的主要作用是在整个项目期间对如何管理范围提供指南和方向。本过程仅开展一次或仅在项目的预定义点开…
阅读更多...
20240606在Toybrick的TB-RK3588开发板的Android12下确认HDMI的驱动

20240606在Toybrick的TB-RK3588开发板的Android12下确认HDMI的驱动

20240606在Toybrick的TB-RK3588开发板的Android12下确认HDMI的驱动 2024/6/6 9:48 【原文是在RK3328的Android7.1下写的。我将它升级成为RK3588的Android12了】 RK平台主要采用 FB 和 DRM 两种显示框架。与此相对应&#xff0c; HDMI 也有两套驱动。 FB&#xff1a; LINUX 3.10…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023