WPF 样式设计总结

news2024/11/15 17:49:05

文章目录

  • 行内样式
  • 页内样式
  • 样式继承
    • 控件样式只能继承一个
  • 局部样式
    • 窗口控件和用户控件直接的区别
    • 使用代码
    • 用户控件引用
  • 全局样式

行内样式

我们新建一个简单的样式

    <Grid>
        <TextBox  Text="我是样式" FontSize="100" />
    </Grid>

在这里插入图片描述
这种属性直接写在内部的，就是行内样式。

页内样式

但是我想一堆控件复用函数，又不像重复写行内样式，可以使用页内样式。

<Window x:Class="Test1.Views.MainView"
        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:Test1.Views"
        mc:Ignorable="d"
        Title="MainView" Height="450" Width="800">

    
    <Grid>
        <StackPanel>
            <TextBox  Text="我是样式"
                      FontSize="80" />
            <TextBox  Text="我是样式"
                      FontSize="80" />
            <TextBox  Text="我是样式"
                      FontSize="80" />
            <TextBox  Text="我是样式"
                      FontSize="80" />
        </StackPanel>

    </Grid>
</Window>

在这里插入图片描述
我们可以使用页内样式将重复的控件抽出来

<Window x:Class="Test1.Views.MainView"
        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:Test1.Views"
        mc:Ignorable="d"
        Title="MainView"
        Height="450"
        Width="800">
    <Window.Resources>
        <Style x:Key="TextBox1" TargetType="TextBox">
            <Style.Setters>
                <Setter Property="Text" Value="我是局部样式"/>
                <Setter Property="FontSize" Value="80"/>
            </Style.Setters>
        </Style>
    </Window.Resources>

    <Grid>
        <StackPanel>
            <TextBox  Style="{StaticResource TextBox1}" />
            <!--行内样式优先级大于局部样式-->
            <TextBox Text="我是行内样式" Style="{StaticResource TextBox1}" />
            <TextBox  Style="{StaticResource TextBox1}" />
            <TextBox  Style="{StaticResource TextBox1}" />
        </StackPanel>

    </Grid>
</Window>

在这里插入图片描述

样式继承

如果我们需要设置一些属性比较多，大致相同但是有点差异的样式。

我们有两种方式：

一、通过行内样式覆盖
最简单，但是不利于批量设置

二、样式继承

<Window x:Class="Test1.Views.MainView"
        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:Test1.Views"
        mc:Ignorable="d"
        Title="MainView"
        Height="450"
        Width="800">
    <Window.Resources>
        <Style x:Key="TextBox1" TargetType="TextBox">
            <Style.Setters>
                <Setter Property="Text"
                        Value="我是局部样式" />
                <Setter Property="FontSize"
                        Value="80" />
            </Style.Setters>
        </Style>
        <!--使用继承样式继续修改-->
        <Style x:Key="TextBox2" TargetType="TextBox" BasedOn="{StaticResource TextBox1}">
            <Style.Setters>
                <Setter Property="Text" Value="我是继承后修改的样式"/>
            </Style.Setters>
        </Style>
    </Window.Resources>

    <Grid>
        <StackPanel>
            <TextBox  Style="{StaticResource TextBox1}" />
            <!--行内样式优先级大于局部样式-->
            <TextBox Text="我是行内样式" Style="{StaticResource TextBox1}" />
            <!--使用继承后的样式-->
            <TextBox  Style="{StaticResource TextBox2}" />
            <TextBox  Style="{StaticResource TextBox2}" />
        </StackPanel>

    </Grid>
</Window>

在这里插入图片描述

控件样式只能继承一个

WPF的控件只能继承一个样式，不能继承多个样式

错误示例

<TextBox  Style="{StaticResource TextBox1 TextBox2}"  />
<TextBox  Style="{StaticResource TextBox1}"
          Style="{StaticResource TextBox2}" />

局部样式

注意：局部样式只能在用户控件中使用

窗口控件和用户控件直接的区别

窗口控件是声明主窗口，窗口控件上面可以叠窗口控件。
窗口控件上面叠窗口用的是用户控件。

使用代码

在这里插入图片描述

在这里插入图片描述

用户控件引用

Dictionary2.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="TestColor5"
           TargetType="TextBox">
        <Setter Property="FontSize" Value="50"/>
        <Setter Property="Text"
                Value="我是被引用的样式" />
    </Style>
</ResourceDictionary>

UserControl1.xaml引用

<UserControl x:Class="Test1.Views.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Test1.Views"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <!--用户控件才能引用局部样式-->
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Test1;component/Resource/Dictionary2.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <TextBox  Style="{StaticResource TestColor5}" />
    </Grid>
</UserControl>

在这里插入图片描述
注意：引用代码路径是绝对引用

Source=“/(项目名);component/(文件夹路径)/(文件名).xaml”
这样才是绝对路径

全局样式

我们有时候要统一整个项目的风格，可以设置全局样式

在这里插入图片描述
在这里插入图片描述

Dictionary1.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Dictionary1">
    <Style x:Key="TestColor4"
           TargetType="TextBox">
        <Setter Property="Text"
                Value="我是全局样式" />
        <Setter Property="FontSize" Value="50"/>
    </Style>
</ResourceDictionary>

App.xaml

<Application x:Class="Test1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Test1"
             xmlns:local2="clr-namespace:Test1.Views"
             StartupUri="Views/MainView.xaml">
    <Application.Resources>
        <!--添加全局引用路径-->
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary  Source="Resource/Dictionary1.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

在xaml里面引用

<Window x:Class="Test1.Views.MainView"
        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:Test1.Views"
        mc:Ignorable="d"
        Title="MainView"
        Height="450"
        Width="800">
    <Window.Resources>


        
        <Style x:Key="TextBox1" TargetType="TextBox">
            <Style.Setters>
                <Setter Property="Text"
                        Value="我是局部样式" />
                <Setter Property="FontSize"
                        Value="80" />
            </Style.Setters>
        </Style>
        <!--使用继承样式继续修改-->
        <Style x:Key="TextBox2" TargetType="TextBox" BasedOn="{StaticResource TextBox1}">
            <Style.Setters>
                <Setter Property="Text" Value="我是继承后修改的样式"/>
            </Style.Setters>
        </Style>
    </Window.Resources>

    <Grid>
        <StackPanel>
            <!--使用全局样式-->
            <TextBox  Style="{StaticResource TestColor4}" />
            <!--行内样式优先级大于局部样式-->
            <TextBox Text="我是行内样式" Style="{StaticResource TextBox1}" />
            <!--使用继承后的样式-->
            <TextBox  Style="{StaticResource TextBox2}" />
            <!--使用用户控件-->
            <local:UserControl1 />
        </StackPanel>

    </Grid>
</Window>

在这里插入图片描述

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

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

相关文章

【QT】常用组件及其用法总结

【QT】常用组件及其用法总结

前面我们看了如何用QT实现纯代码和纯Designer工具的图形化的页面设计&#xff0c;下面我们来看看如何用QT结合两者实现混合界面设计&#xff0c;主要是学习使用一些常用的组件。 目录 信号和槽 菜单栏、状态栏和工具栏 QLabel setGeometry Button pushbutton CheckBox…
阅读更多...
SSMP整合案例(10) vue端调整项目环境 发送请求 基本界面编写

SSMP整合案例(10) vue端调整项目环境 发送请求 基本界面编写

好 之前我们已经将后端服务整个写好了 然后 我们就继续回来写我们前端的项目 之前文章SSMP整合案例(1) 构建 Spring Boot Vue MySql项目环境中我们顺手搭建了前端的项目环境 我们打开它 在终端输入 npm i axios0.21.0引入 axios 它是一个专门用来发请求的第三方插件 一定要注…
阅读更多...
Nginx(4)nginx的反向代理

Nginx(4)nginx的反向代理

反向代理 正向代理反向代理的常用指令反向代理实战 Nginx的安全控制使用SSL对流量进行加密nginx添加SSL的支持Nginx的SSL相关指令生成证书 反向代理系统调优 正向代理代理的对象是客户端&#xff0c;反向代理代理的是服务端&#xff0c;这是两者之间最大的区别。Nginx即可以实现…
阅读更多...
Python实现发送电子邮件功能

Python实现发送电子邮件功能

大家好&#xff0c;以编程方式发送电子邮件可以成为自动化通信过程的一种强大方式&#xff0c;本文将探讨如何使用Python发送电子邮件&#xff0c;介绍如何设置SMTP服务器、为Gmail生成应用程序密码&#xff0c;并提供使用smtplib库发送电子邮件的逐步指南。 在深入研究编码之…
阅读更多...
单链表【数据结构】

单链表【数据结构】

1、顺序表存在的问题 顺序表存在一些问题&#xff1a; &#xff08;1&#xff09;中间、头部的插入删除&#xff0c;时间复杂度为O(N)&#xff08;2&#xff09;增容需要申请新空间&#xff0c;拷贝数据&#xff0c;释放旧空间。会有不小的消耗。&#xff08;3&#xff09;增容…
阅读更多...
剑指 Offer 42： 连续子数组的最大和

剑指 Offer 42： 连续子数组的最大和

这道题多了第二句&#xff0c;并且作为nums[i]&#xff0c;当前值一定是要取的&#xff0c;只是要不要加上前面那个而已。
阅读更多...
uniapp 之 uniapp app 与uniapp H5的通信 webview，以及处理H5页面的手机物理返回问题

uniapp 之 uniapp app 与uniapp H5的通信 webview，以及处理H5页面的手机物理返回问题

目录 app给H5传参&#xff1a;通过h5地址传参app给H5传参&#xff1a;通过方法evalJS传参H5给app传参&#xff1a;通过web-view 组件的message绑定的方法处理H5页面的手机物理返回问题 APP端&#xff1a; <web-view :webview-styles"webviewStyles" :src"sr…
阅读更多...
python学习之【继承、封装、多态】

python学习之【继承、封装、多态】

#来评选你心中的TOP1编程语言# 前言 距离上篇文章 python学习之【类和对象】已有三个星期之久&#xff0c;这篇文章介绍 面向对象的三大特征——封装&#xff0c;继承&#xff0c;多态。 对于编程初学者来说&#xff0c;学习python应该是比较好入手的&#xff0c;文末会给大家…
阅读更多...
计算机视觉：多相机硬件同步拍摄

计算机视觉：多相机硬件同步拍摄

计算机视觉&#xff1a;多相机硬件同步拍摄 传感器同步硬件同步信号FSYNC信号STROBE信号 硬件接线硬件设备接线步骤&#xff1a; 软件驱动参考文献 传感器同步 目前主要有两种方法来同步不同传感器的信息&#xff08;帧、IMU数据包、ToF等&#xff09;&#xff1a; 硬件同步&…
阅读更多...
2023-07-01：redis过期策略都有哪些？LRU 算法知道吗？

2023-07-01：redis过期策略都有哪些？LRU 算法知道吗？

2023-07-01&#xff1a;redis过期策略都有哪些&#xff1f;LRU 算法知道吗&#xff1f; 答案2023-07-01&#xff1a; 缓存淘汰算法&#xff08;过期策略&#xff09; 当Redis的内存超出物理内存限制时&#xff0c;内存中的数据就会频繁地与磁盘进行交换&#xff0c;这个过程…
阅读更多...
二叉树的练习

二叉树的练习

文章目录 单值二叉树检查两颗树是否相同对称二叉树二叉树的前序遍历二叉树的中序遍历二叉树的后序遍历另一颗树的子树通过前序遍历的数组构建二叉树判断二叉树是否是完全二叉树层序遍历k层节点数二叉树的销毁二叉树的整体 单值二叉树 单值二叉树&#xff0c;可以使用等式的传递…
阅读更多...
Java基础---有了基本类型为什么还需要包装类

Java基础---有了基本类型为什么还需要包装类

目录 缘由 基本类型和包装类型的区别 如何理解自动拆装箱 哪些地方会自动拆装箱 自动拆装箱与缓存 缘由 Java中有8种基本数据类型&#xff0c;这些基本类型又都有对应的包装类 因为Java是一种面向对象语言&#xff0c;很多地方都需要使用对象而不是基本数据类型比如&…
阅读更多...
Domino Admin管理客户机中为每个管理域设置不同的图标

Domino Admin管理客户机中为每个管理域设置不同的图标

大家好&#xff0c;才是真的好。 一直在讲Domino管理中的单个网络 域&#xff0c;很少讲到多个Domino网络域的管理。其实&#xff0c;很多企业会有多个Domino网络域。因为以前多个部门或组织、企业等合并&#xff0c;或者隔离国内和国外的目录隔开等等&#xff0c;都会产生多个…
阅读更多...
从0-1手写一个RPC框架

从0-1手写一个RPC框架

前言 什么是RPC RPC&#xff08;Remote Procedure Call&#xff09;远程过程调用&#xff0c;简言之就是像调用本地方法一样调用远程服务。目前外界使用较多的有gRPC、Dubbo、Spring Cloud等。相信大家对RPC的概念都已经很熟悉了&#xff0c;这里不做过多介绍。 为啥要自己写…
阅读更多...
nvm 和 nrm安装使用

nvm 和 nrm安装使用

前端工具推荐&#xff1a;nvm&#xff08;Node 版本管理工具&#xff09; 和 nrm&#xff08;管理npm源&#xff09;&#xff1a; 一、nvm 1.1 nvm 是什么 1.2 安装 nvm 1.3 使用 nvm 二、nrm 2.1 nrm 是什么 2.2 安装 nrm 2.3 使用 nrm 一、nvm 如果直接将 node 安装到…
阅读更多...
20230701：成电的“七年之痒”，毕业啦

20230701：成电的“七年之痒”，毕业啦

毕业那些事儿 毕业随笔写在最后 毕业随笔 伴随着走完最后一道流程&#xff0c;成电7年&#xff0c;总算是毕业了。经济下行&#xff0c;行业寒冬&#xff0c;全被90后赶上了&#xff0c;庆幸学校的金字招牌让自己斩获了不少OFFER。荒废了半年的跑步和博客计划&#xff0c;接下…
阅读更多...
【测试开发】概念基础

【测试开发】概念基础

目录 一. 需求 1. 用户需求 2. 软件需求 3. 从测试人员的角度看需求 二. 测试用例 三. BUG 四. 开发模型 1. 软件的生命周期 2. 开发模型 2.1 瀑布模型 2.2 螺旋模型 2.3 增量&#xff0c;迭代模型 2.4 敏捷模型 SCRUM 五. 测试模型 1. V模型 2. W模型 (双V模…
阅读更多...
开源免费的多数据库工具Chat2DB

开源免费的多数据库工具Chat2DB

Chat2DB使用 当前使用的版本为1.0.11。 一.Chat2DB介绍 Chat2DB 是一款开源免费的多数据库客户端工具。 能够将自然语言转换为SQL&#xff0c;也可以将SQL转换为自然语言。 支持windows、mac本地安装&#xff0c;也支持服务器端部署&#xff0c;web网页访问。 支持多种数据库…
阅读更多...
Hexo基本建站

Hexo基本建站

目录 一、前言 二、Hexo安装、新建、启动 三、架构说明 四、写博客 五、打包 六、发布到GitHub 1.新建仓库 2.安装插件 3.修改配置文件&#xff1a;_config.yml 4.部署github 5.查看仓库 6.访问网站 一、前言 安装 Git安装 Node.js 二、Hexo安装、新建、启动 # 安装 h…
阅读更多...
智慧园区平台建设解决方案

智慧园区平台建设解决方案

智慧园区是指利用现代互联网物联网技术&#xff0c;对园区内的设施、设备和人员进行高效管理和智能化运营的一种模式。越来越多的城市开始致力于发展智慧园区&#xff0c;实现园区内的资源共享和高效利用。为了让智慧园区达到最佳的效果&#xff0c;我们需要从平台建设方面入手…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023