C# WPF入门学习主线篇（二十二）—— 样式（Styles）的定义和应用

C# WPF入门学习主线篇（二十二）—— 样式（Styles）的定义和应用

在这里插入图片描述

欢迎来到C# WPF入门学习系列的第二十二篇。本篇文章将详细介绍WPF中的样式（Styles）的定义和应用。样式在WPF中起到重要作用，通过样式可以轻松地定义和复用控件的外观和行为，从而提高开发效率和代码的可维护性。

什么是样式？

样式（Style）是用于定义控件外观和行为的集合。样式通常定义在XAML文件中，可以在多个控件中共享使用。样式可以包括各种属性的设置，如颜色、字体、边距等，以及触发器（Trigger），用于响应特定的事件或状态。

样式的定义

在WPF中，样式通常定义在XAML文件的资源字典中。以下是一个简单的样式定义示例：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Styles Demo" Height="300" Width="400">
    <Window.Resources>
        <!-- 定义一个按钮的样式 -->
        <Style x:Key="PrimaryButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="FontSize" Value="16"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Primary Button" Style="{StaticResource PrimaryButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

在这里插入图片描述

在上面的代码中，我们在 Window.Resources 中定义了一个名为 PrimaryButtonStyle 的样式，并应用于一个按钮控件。

Setter的使用

Setter 用于设置控件的属性。每个 Setter 包含两个属性：

  • Property：要设置的属性。
  • Value：属性的值。

应用样式

要应用样式，可以使用 StaticResource 标记扩展引用样式：

<Button Content="Primary Button" Style="{StaticResource PrimaryButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

默认样式

如果希望将样式应用于同一类型的所有控件，可以省略 x:Key，使样式成为默认样式：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Styles Demo" Height="300" Width="400">
    <Window.Resources>
        <!-- 定义一个按钮的默认样式 -->
        <Style TargetType="Button">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="FontSize" Value="16"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Default Style Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

在这个示例中，所有按钮控件将自动应用此样式。

基于现有样式创建新样式

WPF允许通过 BasedOn 属性基于现有样式创建新样式，从而实现样式的继承和扩展。例如：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Styles Demo" Height="300" Width="400">
    <Window.Resources>
        <!-- 定义基础按钮样式 -->
        <Style x:Key="BaseButtonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Padding" Value="10"/>
        </Style>

        <!-- 定义继承基础样式的主按钮样式 -->
        <Style x:Key="PrimaryButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>

        <!-- 定义继承基础样式的次按钮样式 -->
        <Style x:Key="SecondaryButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Background" Value="Gray"/>
            <Setter Property="Foreground" Value="Black"/>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="10">
            <Button Content="Primary Button" Style="{StaticResource PrimaryButtonStyle}"/>
            <Button Content="Secondary Button" Style="{StaticResource SecondaryButtonStyle}"/>
        </StackPanel>
    </Grid>
</Window>

在这里插入图片描述

在这个例子中，我们定义了一个基础按钮样式 BaseButtonStyle，并基于它创建了两个新样式 PrimaryButtonStyle 和 SecondaryButtonStyle，实现了样式的继承和扩展。

使用触发器（Triggers）

触发器（Trigger）是样式的重要组成部分，用于响应控件状态的变化。常见的触发器有 PropertyTrigger 和 EventTrigger。

属性触发器（PropertyTrigger）

属性触发器用于在控件属性值发生变化时，执行某些操作。以下是一个简单的属性触发器示例：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Styles Demo" Height="300" Width="400">
    <Window.Resources>
        <!-- 定义带触发器的按钮样式 -->
        <Style x:Key="HoverButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="5">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="Red"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="FontSize" Value="16"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Hover Me" Style="{StaticResource HoverButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

在这里插入图片描述

在这个例子中，当按钮被鼠标悬停时，触发器会改变按钮的背景颜色。

事件触发器（EventTrigger）

事件触发器用于响应控件的事件。以下是一个简单的事件触发器示例：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Styles Demo" Height="300" Width="400">
    <Window.Resources>
        <!-- 定义带事件触发器的按钮样式 -->
        <Style x:Key="ClickButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="FontSize" Value="16"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                                            To="Green" Duration="0:0:0.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Click Me" Style="{StaticResource ClickButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

在这里插入图片描述

在这个示例中，当按钮被点击时，事件触发器会启动一个 Storyboard，通过 ColorAnimation 将按钮的背景颜色在0.5秒内渐变为绿色。

多个触发器

WPF样式还支持多个触发器的组合使用。以下是一个同时使用属性触发器和事件触发器的示例：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Styles Demo" Height="300" Width="400">
    <Window.Resources>
        <!-- 定义带多个触发器的按钮样式 -->
        <Style x:Key="AdvancedButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="FontSize" Value="16"/>
            <Style.Triggers>
                <!-- 属性触发器：鼠标悬停时改变背景颜色 -->
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
                <!-- 事件触发器：点击时启动颜色动画 -->
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                                            To="Green" Duration="0:0:0.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Advanced Button" Style="{StaticResource AdvancedButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

在这里插入图片描述

在这个例子中，当按钮被鼠标悬停时，背景颜色会变成红色；当按钮被点击时，背景颜色会在0.5秒内渐变为绿色。

总结

通过本文的学习，我们详细介绍了WPF中的样式（Styles）的定义和应用，包括静态样式、基于现有样式创建新样式、属性触发器和事件触发器的使用。样式是WPF中一个强大而灵活的特性，可以帮助我们高效地管理和复用控件的外观和行为，提高开发效率和代码的可维护性。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

idea创建Mavenweb项目-提供Servlet 2024idea无法创建解决方式

idea创建Mavenweb项目-提供Servlet 2024idea无法创建解决方式

idea社区版需要自己配置服务器需要去下载插件Tomcat Server 对服务器设置 idea无法创建servlet的问题是2023与2024版本idea做出了改动需要自己手动配置servlet文件 在设置中搜索template也就是模板&#xff0c;然后选择文件和代码板块&#xff0c;点击左上角的添加新的模板 名…
阅读更多...
【ARM】MDK在debug模式下断点的类型

【ARM】MDK在debug模式下断点的类型

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 了解不同情况下&#xff0c;设置的断点的类型是什么。 2、 问题场景 在debug模式下&#xff0c;经常通过断点去调试代码。但是对于断点的类型不了解&#xff0c;不清楚断点为什么会被进入。不了解在不同语句或者情…
阅读更多...
推荐一款功能强大的显示器！

推荐一款功能强大的显示器！

最近在写项目开发文档&#xff0c;经常需要几个界面来回切换&#xff0c;真的深刻感受到了一台外接显示器对一名程序员来说有多重要了&#xff0c;画功能流程图的时候嫌弃自己的笔记本屏幕不够大&#xff0c;看代码的时候又在想要是有个旋转屏就好了&#xff0c;来回切换界面的…
阅读更多...
Mac数据如何恢复？3 款最佳 Mac 恢复软件

Mac数据如何恢复？3 款最佳 Mac 恢复软件

如果您认为 Mac 上已删除的文件永远丢失了&#xff0c;那您就大错特错了&#xff01;实际上&#xff0c;即使您清空了 Mac 上的垃圾箱&#xff0c;也有许多解决方案可以帮助您恢复已删除的文件。最好的解决方案之一是 Mac 恢复删除软件。最好的Mac 恢复删除应用程序可以轻松准确…
阅读更多...
微信多开器

微信多开器

由于微信的限制&#xff0c;我们平时只能登录一个微信&#xff0c;要登录多个微信一般需要多台手机&#xff0c;很显然这种方法很费手机&#xff01;&#xff01;一个微信多开神器可以给你省下好几台手机钱&#xff0c;抓紧拉下来放手机里落灰http://www.xbydon.online/?p132 …
阅读更多...
「51媒体」活动会议，展览展会，直播曝光的一种方法

「51媒体」活动会议，展览展会，直播曝光的一种方法

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 我们在做活动会议&#xff0c;或者参加展览展会&#xff0c;需要进行直播的时候&#xff0c;可以通过一键同步多个媒体平台的方法&#xff0c;来扩大曝光&#xff0c;比如一场直播我们可…
阅读更多...
JDK8和JDK17共存以及切换

JDK8和JDK17共存以及切换

1. 下载和安装 1.1下载安装JDK17 下载地址： https://www.oracle.com/cn/java/technologies/downloads/ 1.2安装jdk17 点击下一步 此处可以修改安装的目标位置，修改安装位置后，点击下一步 接下来及安装完成 注意事项 此时通过cmd命令java –version你会发现竟然出现了…
阅读更多...
B 站开源专为角色扮演优化的模型

B 站开源专为角色扮演优化的模型

是 B 站开源的一系列的大语言模型&#xff0c;其中的 chat 版本训练时引入了互联网社区语料&#xff0c;趣味性明显增强; character 版本则为角色扮演做了优化。 现在&#xff0c;已经可以在 HF Space 上免费使用 Chat 和 角色扮演啦
阅读更多...
【解决】法启动此程序，因为计算机中丢失vcruntime140_1.dll，尝试重新安装此程序以解决此问题【包括安装mysql在内的】

【解决】法启动此程序，因为计算机中丢失vcruntime140_1.dll，尝试重新安装此程序以解决此问题【包括安装mysql在内的】

缺少vcruntime140_1.dll解决此问题的第一步找到该文件,有些dll修复工具是收费的&#xff0c;因此下面介绍几种比较简单有效而且免费的解决办法 方法1&#xff1a;重新安装Visual C Redistributable Packages 上面的安装包解决win7&#xff0c;8&#xff0c;10&#xff0c;11的…
阅读更多...
海南聚广众达电子商务咨询有限公司抖音电商新引擎

海南聚广众达电子商务咨询有限公司抖音电商新引擎

在数字化浪潮席卷而来的今天&#xff0c;抖音电商作为新兴的商业模式&#xff0c;正以其独特的魅力和无限的潜力&#xff0c;引领着电子商务行业的革新与发展。海南聚广众达电子商务咨询有限公司&#xff0c;作为专注于抖音电商服务的领军企业&#xff0c;凭借其专业的团队、丰…
阅读更多...
阿里云 debian10.3 sudo apt-get updat 报错的解决方案

阿里云 debian10.3 sudo apt-get updat 报错的解决方案

阿里云全新的debian10.3(buster)镜像&#xff0c;却无法正常执行 sudo apt-get update。主要报错信息如下&#xff1a; Err:6 http://mirrors.cloud.aliyuncs.com/debian buster-backports Release404 Not Found [IP: 100.100.2.148 80] Err:3 http://mirrors.cloud.aliyuncs…
阅读更多...
Vue的学习（6.20）

Vue的学习（6.20）

一、Vue的特点 1.采用组件化模式&#xff08;xxx.vue包含htmlcssjs&#xff09; 2.声明式编码&#xff0c;编码人员无需直接操作DOM&#xff0c;提高开发效率 3.使用虚拟DOM优秀的DIFF算法&#xff08;DIFF是用于新旧虚拟DOM的比较&#xff09;&#xff0c;尽量复用DOM节点 …
阅读更多...
【Gradio】Custom Components | Gradio组件关键概念 后端

【Gradio】Custom Components | Gradio组件关键概念 后端

Gradio组件关键概念 在本节中&#xff0c;我们将讨论Gradio中组件的一些重要概念。在开发自己的组件时&#xff0c;理解这些概念非常重要。否则&#xff0c;您的组件可能会与其他Gradio组件的行为大不相同&#xff01; ✍️ 提示&#xff1a;如果你熟悉Gradio库的内部机制&…
阅读更多...
这三种电容在PCB设计中怎么摆放？

这三种电容在PCB设计中怎么摆放？

电容在高速 PCB 设计中起着重要的作用&#xff0c;通常也是 PCB 上用得多的器件。在 PCB 中&#xff0c;电容通 常分为滤波电容、去耦电容、储能电容等。 1 电源输出电容&#xff0c;滤波电容 我们通常把电源模块输入、输出回路的电容称为滤波电容。简单理解就是&#xff0c;…
阅读更多...
Python基础-引用参数、斐波那契数列、无极分类

Python基础-引用参数、斐波那契数列、无极分类

1.引用参数的问题 &#xff08;1&#xff09;列表&#xff08;list&#xff09; 引用参数&#xff0c;传地址的参数&#xff0c;即list1会因list2修改而改变。 list1 [1,2,3,4] list2 list1 print(list1) list2[2] 1 print(list2) print(list1)非引用参数&#xff0c;不传…
阅读更多...
HTML静态网页成品作业(HTML+CSS+JS)——我的家乡福州介绍网页(3个页面)

HTML静态网页成品作业(HTML+CSS+JS)——我的家乡福州介绍网页(3个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;使用Javacsript代码实现图片轮播&#xff0c;共有3个页面。 二、作品…
阅读更多...
Acrel-2000ES储能能量管理系统方案

Acrel-2000ES储能能量管理系统方案

应用场合 电池厂商、储能集成商等厂家所生产的储能一体柜能集成箱
阅读更多...
AI融资热潮：Genspark、Finaloop等初创吸金不断！中国气象局发布三大AI模型

AI融资热潮：Genspark、Finaloop等初创吸金不断！中国气象局发布三大AI模型

文章推荐 AI日报&#xff5c;跃问App上架加入AI助理竞争&#xff01;GPTZero获千万美元A轮融资&#xff0c;创始人不到30岁&#xff01; AI日报&#xff5c;Luma推出AI视频模型&#xff0c;又一Sora级选手登场&#xff1f;SD3 Medium发布&#xff0c;图中文效果改善明显 ⭐️…
阅读更多...
CentOS配置本地yum源

CentOS配置本地yum源

版本说明 操作系统版本&#xff1a;CentOS7.9 虚拟机版本 虚拟机打快照 首先给虚拟机打个快照&#xff0c;点击图下所示位置 命名快照之后&#xff0c;点击拍摄快照 可以参考图下所示进行管理和恢复快照 迁移原有yum源 先进入到/etc/yum.repos.d/ &#xff0c;可以看到有很多…
阅读更多...
Linux 6.10也引进了蓝屏机制

Linux 6.10也引进了蓝屏机制

众所周知&#xff0c;win死机后会有个蓝屏死机的故障提示页面&#xff0c;Linux 6.10 开始也将引入这个机制。 Linux 6.10 引入了一个新的 DRM Panic 处理程序基础设施&#xff0c;以便于在致命错误&#xff08;Panic&#xff09;发生时显示相关信息。 Linux 6.10 还在开发之…
阅读更多...
最新文章

Copyright @ 2022~2023