WPF2 样式布局

news2024/11/18 11:23:37

样式布局

WPF中的各类控件元素, 都可以自由的设置其样式。 诸如:

字体(FontFamily)
字体大小(FontSize)
背景颜色(Background)
字体颜色(Foreground)
边距(Margin)
水平位置(HorizontalAlignment)
垂直位置(VerticalAlignment) 等等。

而样式则是组织和重用以上的重要工具。不是使用重复的标记填充XAML, 通过Styles创建一系列封装所有这些细节的样式。然后通过Style属性应用封装好的样式。这点类似于CSS样式。然而, WPF样式的功能更加强大, 如控件的行为。WPF的样式还支持触发器(后面章节会讲到)。

示例

<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="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <Button Content="button1" FontSize="18" Foreground="White" Background="Red"/>
            <Button Content="button1" FontSize="18" Foreground="White" Background="Red"/>
            <Button Content="button1" FontSize="18" Foreground="White" Background="Red"/>
            <Button Content="button1" FontSize="18" Foreground="White" Background="Red"/>
        </StackPanel>
    </Grid>
</Window>

在这里插入图片描述

优化

样式是组织和重用的工具。 而上面的代码, 由于每个元素都是相同的, 但是每个元素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="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Red"/>
            <Setter Property="Content" Value="button1"/>
            
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button />
            <Button />
            <Button />
            <Button />
        </StackPanel>
    </Grid>
</Window>

此时按钮的样式还在
在这里插入图片描述
单独定义
每个控件的外观

<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="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Red"/>
            <Setter Property="Content" Value="button1"/>
            
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button Style="{StaticResource ButtonStyle}"/>
            <Button Style="{StaticResource ButtonStyle}"/>
            <Button />
            <Button />
        </StackPanel>
    </Grid>
</Window>

在这里插入图片描述
BaseOn 继承样式
基类往往定义公共元素

<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="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="BaseButtonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Red"/>
        </Style>

        <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Content" Value="button1"/>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button Style="{StaticResource ButtonStyle}"/>
            <Button Style="{StaticResource ButtonStyle}"/>
            <Button />
            <Button />
        </StackPanel>
    </Grid>
</Window>

样式完全相同
在这里插入图片描述
Style和 控件内同时有相同元素时候，元素内优先级永远是最高的。会覆盖样式中的同类属性

<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="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="BaseButtonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Red"/>
        </Style>

        <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Content" Value="button1"/>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button Content="hello1" Style="{StaticResource ButtonStyle}"/>
            <Button Content="hello2" Style="{StaticResource ButtonStyle}"/>
            <Button />
            <Button />
        </StackPanel>
    </Grid>
</Window>

这里改变了控件内Content内容

在这里插入图片描述

TargetType 的设置为类型必须和控件保持一致，否者不可用

<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="MainWindow" Height="450" Width="800">
    <Window.Resources>
    <!--这里改变为checkbook-->
        <Style x:Key="BaseButtonStyle" TargetType="CheckBox">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Red"/>
        </Style>

        <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Content" Value="button1"/>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button Content="hello1" Style="{StaticResource ButtonStyle}"/>
            <Button Content="hello2" Style="{StaticResource ButtonStyle}"/>
            <Button />
            <Button />
        </StackPanel>
    </Grid>
</Window>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ray.tune调参学习笔记1：超参数优化器tuner设置

ray.tune调参学习笔记1：超参数优化器tuner设置

最近研究中学习使用python的ray.tune进行神经网络调参。在这里记录学习过程中的收获&#xff0c;希望能够帮助到有同样需求的人。学习过程主要参考ray官网文档&#xff0c;但由于笔者使用的ray为2.2.0版本&#xff0c;而官方文档为更高级版本&#xff0c;笔者代码和官方文档代码…
阅读更多...
Python实现本地视频/音频播放器

Python实现本地视频/音频播放器

Python实现本地视频/音频播放器 在Python中&#xff0c;有几个库可以用于视频播放&#xff0c;但是没有一个库是完美的&#xff0c;因为它们可能依赖于外部软件或有一些限制。 先看介绍用Python实现本地视频播放器&#xff0c;再介绍用Python实现本地音乐播放器。 Python实现…
阅读更多...
【C 数据结构】图

【C 数据结构】图

文章目录 【 1. 基本原理 】1.1 无向图1.2 有向图1.3 基本知识 【 2. 图的存储结构 】2.1 完全图2.2 稀疏图和稠密图2.3 连通图2.3.1 (普通)连通图连通图 - 无向图非连通图 的 连通分量 2.3.2 强连通图强连通图 - 有向图非强连通有向图 的 强连通分量 2.3.3 生成树 - 连通图2.3…
阅读更多...
重仓比特币

重仓比特币

作者&#xff1a;Arthur Hayes Co-Founder of 100x. 编译&#xff1a;liam ccvalue (下文中表达的任何观点均为作者的个人观点&#xff0c;不应作为投资决策的依据&#xff0c;也不应被视为参与投资交易的建议或意见&#xff09;。 我们中断牛市常规节目&#xff0c;为您播报这…
阅读更多...
【研发管理】产品经理知识体系-产品创新中的市场调研

【研发管理】产品经理知识体系-产品创新中的市场调研

导读&#xff1a;在产品创新过程中&#xff0c;市场调研的重要性不言而喻。它不仅是产品创新的起点&#xff0c;也是确保产品成功推向市场的关键步骤。对于产品经理系统学习和掌握产品创新中的市场调研相关知识体系十分重要。 目录 概述&#xff1a;市场调研重要性 1、相关概…
阅读更多...
华为数字化转型与数据管理实践介绍（附PPT下载）

华为数字化转型与数据管理实践介绍（附PPT下载）

华为作为全球领先的信息与通信技术&#xff08;ICT&#xff09;解决方案提供商&#xff0c;在数字化转型和数据管理领域拥有丰富的实践经验和技术积累。其数字化转型解决方案旨在帮助企业通过采用最新的ICT技术&#xff0c;实现业务流程、组织结构和文化的全面数字化&#xff0…
阅读更多...
Kafka 3.x.x 入门到精通（03）——对标尚硅谷Kafka教程

Kafka 3.x.x 入门到精通（03）——对标尚硅谷Kafka教程

Kafka 3.x.x 入门到精通&#xff08;03&#xff09;——对标尚硅谷Kafka教程 2. Kafka基础2.1 集群部署2.2 集群启动2.3 创建主题2.4 生产消息2.4.1 生产消息的基本步骤2.4.2 生产消息的基本代码2.4.3 发送消息2.4.3.1 拦截器2.4.3.1.1 增加拦截器类2.4.3.1.2 配置拦截器 2.4.3…
阅读更多...
Spring Bean 的生命周期与作用域解析及实战

Spring Bean 的生命周期与作用域解析及实战

引言 在Spring框架中&#xff0c;Bean是构成应用的核心组件&#xff0c;它们负责执行应用中的业务逻辑。理解Spring Bean的生命周期和作用域对于开发高效、稳定的Spring应用至关重要。本文将详细解析Spring Bean的生命周期和作用域&#xff0c;并通过实战案例加深理解。 一、…
阅读更多...
使用FunASR处理语音识别

使用FunASR处理语音识别

FunASR是阿里的一个语音识别工具&#xff0c;比SpeechRecognition功能多安装也很简单&#xff1b; 官方介绍&#xff1a;FunASR是一个基础语音识别工具包&#xff0c;提供多种功能&#xff0c;包括语音识别&#xff08;ASR&#xff09;、语音端点检测&#xff08;VAD&#xff…
阅读更多...
微软ML Copilot框架释放机器学习能力

微软ML Copilot框架释放机器学习能力

摘要&#xff1a;大模型席卷而来&#xff0c;通过大量算法模型训练推理&#xff0c;能根据人类输入指令产生图文&#xff0c;其背后是大量深度神经网络模型在做运算&#xff0c;这一过程称之为机器学习&#xff0c;本文从微软语言大模型出发&#xff0c;详解利用大型语言模型&a…
阅读更多...
Java设计模式：使用责任链模式和状态模式优化‘审批流程‘

Java设计模式：使用责任链模式和状态模式优化‘审批流程‘

Java设计模式&#xff1a;使用责任链模式和状态模式优化审批流程 摘要引言 需求流程图正文内容&#x1f4d0; 基本概念介绍 功能实现示例1:设计模式&#xff1a;责任链模式方法&#xff1a;好处&#xff1a; 示例2:设计模式&#xff1a;责任链模式方法和操作流程&#xff1a;好…
阅读更多...
【stm32】swjtu西南交大嵌入式实验三 外部中断实验：按键中断

【stm32】swjtu西南交大嵌入式实验三 外部中断实验：按键中断

实验内容&#xff1a; 1、编写程序&#xff0c;设置主程序&#xff1a;跑马灯以 0.2s 的速度旋转&#xff1b;将 KB1 设置为外部中断&#xff0c;下 降沿触发&#xff0c;按下 KB1 则全彩灯的 R 灯闪烁 5 次。编译、下载程序到开发板&#xff0c;观察实 验现象&#xff1b;按下…
阅读更多...
torch.cuda.is_avaliable()在命令行里是true，pycharm是false【省流：换Pycharm】

torch.cuda.is_avaliable()在命令行里是true，pycharm是false【省流：换Pycharm】

我的问题&#xff1a; 1、torch.cuda.is_avaliable()在命令行里是true&#xff0c;但是pycharm是false 2、pycharm选择pytorch所在的解释器&#xff0c;加载失败。 3、pytorch所在的解释器加载成功&#xff0c;但是里边的torch包莫名消失。 解决方法&#xff1a; 在调试了很…
阅读更多...
Sping源码（七）—context: component-scan标签如何扫描、加载Bean

Sping源码（七）—context: component-scan标签如何扫描、加载Bean

序言 简单回顾一下。上一篇文章介绍了从xml文件context component-scan标签的加载流程到ConfigurationClassPostProcessor的创建流程。 本篇会深入了解context component-scan标签底层做了些什么。 component-scan 早期使用Spring进行开发时&#xff0c;很多时候都是注解 标…
阅读更多...
免费好用各科目的刷题软件

免费好用各科目的刷题软件

一 、前言 刷题&#xff0c;即通过大量做题来提高解题能力和考试成绩的行为&#xff0c;主要有以下几个好处&#xff1a; 1. 熟悉题型和考试格式 通过刷题&#xff0c;可以对考试中可能出现的题型和格式有更深入的了解&#xff0c;有助于在实际考试中快速识别题目类型和解题…
阅读更多...
Java使用IText根据pdf模板创建pdf文件

Java使用IText根据pdf模板创建pdf文件

1.导包 <dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.10</version></dependency><dependency><groupId>com.itextpdf</groupId><artifactId>itext-as…
阅读更多...
mdk输出本语句在源程序中行数以及函数名称

mdk输出本语句在源程序中行数以及函数名称

代码如下&#xff1a; /* USER CODE BEGIN WHILE */while (1){printf("anlog uart1 test 2024-4-16\r\n");printf("[%s] %d\r\n",__func__,__LINE__);printf("[%s] %d",__func__,__LINE__);HAL_Delay(200);/* USER CODE END WHILE *//* USER COD…
阅读更多...
MyBatis源码之MyBatis中SQL语句执行过程

MyBatis源码之MyBatis中SQL语句执行过程

MyBatis源码之MyBatis中SQL语句执行过程 SQL执行入口 我们在使用MyBatis编程时有两种方式&#xff1a; 方式一代码如下&#xff1a; SqlSession sqlSession sqlSessionFactory.openSession(); List<Student> studentList sqlSession.selectList("com.sjdwz.da…
阅读更多...
AWS SES发送邮件如何正确配置？操作指南？

AWS SES发送邮件如何正确配置？操作指南？

AWS SES发送邮件有哪些限制&#xff1f;AWS SES发信的注意事项&#xff1f; AWS SES作为亚马逊云服务提供的一项高效、可靠的电子邮件发送服务&#xff0c;受到了众多企业的青睐。然而&#xff0c;如何正确配置AWS SES发送邮件。AokSend将详细解析AWS SES发送邮件的配置过程&a…
阅读更多...
GO语言写Prometheus自定义node-exporter的Docker容器测试

GO语言写Prometheus自定义node-exporter的Docker容器测试

1. 安装docker-compose 执行以下命令&#xff0c;安装docker-compose到CentOS7.9环境中&#xff1a; # 下载二进制文件 sudo curl -L "https://github.com/docker/compose/releases/download/v2.24.7/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/d…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023