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中定义，全局可用，适用于需要在整个应用中共享的资源。

后面用到还会继续补充。

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

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

相关文章

【机器学习】使用Stable Diffusion实现潜在空间搜索

【机器学习】使用Stable Diffusion实现潜在空间搜索

1、引言 1.1 潜在空间的概念 潜在空间&#xff08;Latent Space&#xff09;是在机器学习和深度学习中一个重要的概念&#xff0c;它指的是用于表示数据的一种低维空间。这个空间编码了数据中包含的所有有用信息的压缩表示&#xff0c;通常比原始数据空间的维数更低&#xff…
阅读更多...
Python | Leetcode Python题解之第136题只出现一次的数字

Python | Leetcode Python题解之第136题只出现一次的数字

题目&#xff1a; 题解&#xff1a; class Solution:def singleNumber(self, nums: List[int]) -> int:return reduce(lambda x, y: x ^ y, nums)
阅读更多...
攻防世界---misc---津门杯2021-m1

攻防世界---misc---津门杯2021-m1

1、题目描述&#xff0c;下载附件是一张bmp格式的图片 2、直觉告诉我这和图片的颜色通道有关 3、于是我就尝试用stegslove打开图片 4、将颜色通道都改为0&#xff0c;点击preview 5、然后发现一串base64编码 6、解码得flag flag{l5DGqF1pPzOb2LU919LMaBYS5B1G01FD}
阅读更多...
CSS真题合集（一）

CSS真题合集（一）

CSS真题合集&#xff08;一&#xff09; 1. 盒子模型1.1 盒子模型的基本组成1.2 盒子模型的实际大小1.3 盒子模型的两种类型1.4 设置盒子模型1.5 弹性盒子模型 2. BFC2.1 主要用途2.2 触发BFC的方法2.2 解决外边距的塌陷问题&#xff08;垂直塌陷&#xff09; 3. 响应式布局3.1…
阅读更多...
某铁路信息中心运营监测项目

某铁路信息中心运营监测项目

某铁路信息中心承担大量实时监测、例行巡检和排障维护等工作&#xff0c;为巩固信息化建设成果&#xff0c;提高整体运维效果&#xff0c;保障铁路信息系统稳定运行&#xff0c;需对现有网络监测系统进行升级改造。 设备类型&#xff1a;服务器、交换机、数据库、中间件、虚拟…
阅读更多...
每日一题遇到沙比题目——Python实现PAT甲级1061 Dating（举一反三+思想解读+逐步优化）

每日一题遇到沙比题目——Python实现PAT甲级1061 Dating（举一反三+思想解读+逐步优化）

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 吐槽题目 我的写法 代码分析 1. 输入处理 2. 变量初始化 3. 查找星期几和小时 4…
阅读更多...
Qt for android ： 调用 OpenCV库错误集（To Be Continue）

Qt for android ： 调用 OpenCV库错误集（To Be Continue）

error: error: undefined symbol: AMediaExtractor_new 在调用 VideoCapture等库时出现 解决: LIBS -lmediandk
阅读更多...
UE5-AI

UE5-AI

AI角色 角色控制器 AI角色必须要一个角色控制器 角色控制器最基本只需要执行行为树&#xff0c;在EventOnPossess后runBehaviorTree 如果要的是一个角色&#xff0c;可以创建一个Character&#xff0c;在类默认设置中可以找到 Pawn->AIControllerClass&#xff0c;在这里…
阅读更多...
Golang | Leetcode Golang题解之第136题只出现一次的数字

Golang | Leetcode Golang题解之第136题只出现一次的数字

题目&#xff1a; 题解&#xff1a; func singleNumber(nums []int) int {single : 0for _, num : range nums {single ^ num}return single }
阅读更多...
Flink任务如何跑起来之 1.DataStream和Transformation

Flink任务如何跑起来之 1.DataStream和Transformation

Flink任务如何跑起来之 1.DataStream和Transformation 1. 滥觞 在使用Flink完成业务功能之余&#xff0c;有必要了解下我们的任务是如何跑起来的。知其然&#xff0c;知其所以然。 既然重点是学习应用程序如何跑起来&#xff0c;那么应用程序的内容不重要&#xff0c;越简单…
阅读更多...
动手学深度学习——Kaggle小白入门

动手学深度学习——Kaggle小白入门

1. kaggle注册 注册网址&#xff1a;https://www.kaggle.com 注册账号不需要代理&#xff0c;但手机号验证需要代理。如果要使用GPU或TPU&#xff0c;则需要进行手机号验证。 手机号验证位置&#xff1a;右上角头像的settings界面。 手机号验证时会有几个问题&#xff1a; …
阅读更多...
【栈】1096. 花括号展开 II

【栈】1096. 花括号展开 II

本文涉及知识点 栈 LeetCode 1096. 花括号展开 II 如果你熟悉 Shell 编程&#xff0c;那么一定了解过花括号展开&#xff0c;它可以用来生成任意字符串。 花括号展开的表达式可以看作一个由 花括号、逗号 和 小写英文字母 组成的字符串&#xff0c;定义下面几条语法规则&…
阅读更多...
服务器数据恢复—raid5阵列磁盘坏道离线导致数据丢失的数据恢复案例

服务器数据恢复—raid5阵列磁盘坏道离线导致数据丢失的数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌x3850 X5服务器&#xff0c;服务器上有一组由5块硬盘组建的raid5阵列&#xff08;包含一块热备盘&#xff09;&#xff0c;安装linux操作系统&#xff0c;运行oracle数据库。 服务器故障&#xff1a; 服务器上raid5阵列中两块硬盘由于未…
阅读更多...
【Linux操作系统】进程状态（1）

【Linux操作系统】进程状态（1）

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; Linux &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解 Linux操作系统 进程状态 的相关内容。 如果看到最后您觉得这篇文章…
阅读更多...
HDFS 之 DataNode 核心知识点

HDFS 之 DataNode 核心知识点

优质博文&#xff1a;IT-BLOG-CN 一、DataNode工作机制 DataNode工作机制&#xff0c;如下所示&#xff1a; 【1】一个数据块在 DataNode上以文件形式存储在磁盘上&#xff0c;包括两个文件&#xff0c;一个是数据本身&#xff0c;一个是元数据包括数据块的长度&#xff0c…
阅读更多...
Codeforces Round 951 (Div. 2)（A~C）

Codeforces Round 951 (Div. 2)（A~C）

目录 A. Guess the Maximum B. XOR Sequences C. Earning on Bets 这次比赛也是打的稀碎了&#xff0c;第二个少个break检查了15分钟才检查出来&#xff0c;第三个符号搞错了&#xff0c;错了两次&#xff0c;道心直接破碎了 A. Guess the Maximum 题意&#xff1a;我们对…
阅读更多...
计算机组成原理-cache详解

计算机组成原理-cache详解

一、Cache的概念和原理 1、cache原理 2、cache性能分析 一道例题 3、cache和主存数据交换的单位 每次访问到的主存块会立即放入cache中 小结 二、cache和主存之间的映射关系 全相联映射 全相联访存过程 直接映射 组相联映射 小结 三、cache替换算法 在直接映射中&#xff0c…
阅读更多...
webgl_framebuffer_texture

webgl_framebuffer_texture

ThreeJS 官方案例学习&#xff08;webgl_framebuffer_texture&#xff09; 1.效果图 2.源码 <template><div><div id"container"></div><div id"selection"><div></div></div></div> </templa…
阅读更多...
【sklearn】【逻辑回归1】

【sklearn】【逻辑回归1】

学习笔记来自&#xff1a; 所用的库和版本大家参考&#xff1a; Python 3.7.1Scikit-learn 0.20.1 Numpy 1.15.4, Pandas 0.23.4, Matplotlib 3.0.2, SciPy 1.1.0 1 概述 1.1 名为“回归”的分类器 在过去的四周中&#xff0c;我们接触了不少带“回归”二字的算法&#xf…
阅读更多...
IDEA破解后的配置

IDEA破解后的配置

以下所有操作都要求进入全局setting而不是某一个项目的setting 进入全局Setting File→close project 进入欢迎页面 低版本 然后点击Setting 关闭自动更新 不关闭有可能会破解失败 Appearance & Behavior->System Settings->Updates下取消Automatically chec…
阅读更多...
最新文章

Copyright @ 2022~2023