WPF布局、控件与样式

视频来源：https://www.bilibili.com/video/BV1HC4y1b76v/

布局

常用布局属性

  • HorizontalAlignment：用于设置元素的水平位置
  • VerticalAlignment：用于设置元素的垂直位置
  • Margin：指定元素与容器的边距
  • Height：指定元素的高度
  • Width：指定元素的宽度
  • WinHeight/WinWidth：指定元素的最小高度和宽度
  • MaxHeight/MaxWidth：指定元素的最大高度和宽度
  • Padding：指定元素内部边距

常用布局容器

1、Grid

Grid为最常用的布局容器，作为View中的主要组成部分，负责框架中整体的页面布局

ShowGridLines：可以设置行业的边距线的显示。

Grid.RowDefinitions：可以创建任意行，进行固定高度与百分比或自适应高度设置。

Grid.ColumnDefinitions：可以创建任意列，进行固定宽度与百分或自适应宽度设置。

<Grid ShowGridLines="True"><Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid.CloumnDefinitions><CloumnDefinition/><CloumnDefinition/></Grid.CloumnDefinitions>
</Grid>

在这里插入图片描述

2、StackPanel

Windows可以只包含一个元素,作为其内容。如果要在其中包含多个元素,就可以将 stackPanel用作Windows的一个子元素,并在 stackPanel的 内容中添加元素。stackPanel是 一个简单的容器控件,只能逐个地显示元素。stackPanel的 方向可以是水平或垂直。TooBarPancl类 派生自stackPanel。

Orientation：用于设置StackPanel的元素排列方式。默认以垂直的方式布局。

<StackPanel Orientation="Horizontal"><Button Width="100" Height="40" Background="Red"/><Button Width="100" Height="40" Background="Yellow"/><Button Width="100" Height="40" Background="Blue"/><Button Width="100" Height="40" Background="Green"/>
</StackPanel>

在这里插入图片描述

3、WarpPanel

WrapPanel将子元素 自左向右逐个地排列,若一个水平行中放不下,就排在下一行。面板的方向可以是水平或垂直。

WrapPanel与StackPanel类似的功能，相当于WrapPanel，具有在有限容器范围内，可以自动换行，或者换行处理。具体取决于WrapPanel的排列方式（Orientation）。默认水平布局方向。

<WrapPanel><Button Width="100" Height="40" Background="Red"/><Button Width="100" Height="40" Background="Yellow"/><Button Width="100" Height="40" Background="Blue"/><Button Width="100" Height="40" Background="Green"/><Button Width="100" Height="40" Background="#54FF9F"/><Button Width="100" Height="40" Background="#6A5ACD"/>
</WrapPanel>

在这里插入图片描述

4、Dockpanel

包含在DockPanel中元素，具备DockPanel.Dock的四个枚举值（Top/Lrft/Right/Bottom)用于设置元素的锚定位置。

LastChildFill：容器中的最后一个元素时，默认该元素填充DockPanel所有空间，默认值为True。

DockPanel中的元素未显示添加DockPanel.Dock属性时，系统则会默认为DockPanel.Dock = “Left”。

<DockPanel LastChildFill="False"><Button DockPanel.Dock="Top" Width="150" Height="60" Background="Red"/><Button DockPanel.Dock="Left" Width="150" Height="60" 	Background="Yellow"/><Button DockPanel.Dock="Right" Width="150" Height="60" Background="Blue"/><Button DockPanel.Dock="Bottom" Width="150" Height="60" Background="Green"/>
</DockPanel>

在这里插入图片描述

5、UniformGrid

与Grid不同的是，该容器具备Columns/Rows属性，通过设置该属性，UniformGrid则具备相应的行与列，但是设置的Columns/Rows不允许单独的进行容器的大小设置。

位于UniformGrid中的子元素，按输入顺序排列至容器中，直至填充容器的所有空间。

未显示指定Columns/Rows，UniformGrid则为子元素动态分配Column/Rows，换行与换行的基准主要基于UniformGrid的容器大小（宽度与高度）。

<UniformGrid><Button DockPanel.Dock="Top" Width="150" Height="60" Background="Red"/><Button DockPanel.Dock="Left" Width="150" Height="60" Background="Yellow"/><Button DockPanel.Dock="Right" Width="150" Height="60" Background="Blue"/><Button DockPanel.Dock="Bottom" Width="150" Height="60" Background="Green"/>
</UniformGrid>

在这里插入图片描述

控件

日常工作中与我们打交道最多的控件无外乎6类：

1、布局控件：可以容纳多个控件或嵌套其他布局控件，用于UI上组织和排列控件。Grid，StackPanel等，他们拥有共同的父类Panel。

2、内容控件：只能容纳一个其他控件或布局控件作为他的内容。Button、Window等，他们的共同父类是ContentControl。

3、带标题内容控件：相当于一个内容控件，但可以加一个标题，标题部分亦可容纳一个控件或布局。GroupBox，TabItem等，他们共同的父类是HeaderedContentControl。

4、条目控件：可以显示一列数据，一般情况下这列数据的类型相同。ListBox、ComboBox等。他们共同的基类是ItemsControl。

5、带标题条目控件：相当于一个条目控件，但可以加一个标题显示区。TreeViewItem，MenuItem等。此类空间的共同基类是HeaderedItemsControl。

6、特殊内容控件：比如TextBox容纳的是字符串、TextBlock可以容纳可自由控制格式的文本，Image容纳图片类型数据。这类控件相对比较独立。

六类控件的派生关系如下图：
在这里插入图片描述

WPF的UI元素的类型

名称注释
ContentControl单一内容控件
HeaderedContentControl带标题的单一内容控件
ItemsControl以条目集合胃内容的控件
HeaderedItemsControl带标题的以条目集合为内容的控件
Decorator控件装饰元素
Panel面板类元素
Adorner文字点缀元素
Flow Text流式文本元素
TextBox文本输入框
TextBlock静态文字
Shape图形元素

问题

为什么有一些元素是Content显示内容，而一些元素是Text显示内容？

凡是继承于ContentControl的控件，他们的定义内容用Content，除了TextBlock使用的是Text，大部分都是Content设置其显示内容。

为什么有一些元素是Padding，而有一些元素并没有？

在继承于Control下得大部分控件具备这个Padding属性，TextBlock则单独实现了Padding属性。

Magin和Padding的区别是？

Magin：外边距

Padding：内边距

样式

控件的Style属性可以赋予包含Setter相关联的Style元素。Setter元素定义Property和Value属性，并给指定的属性设置一个值。这里设置Background、FontSize和FontWeight属性。

把Style设置为TargetType Button，以便可以直接访问Button的属性。如果没有设置样式的TargetType，就可以通过Button.Background、Button.FontSize访问属性。

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

字体（FontFamily）

字体大小（FontSize）

背景颜色（Backgroud）

字体颜色（Foreground）

边距（Margin）

水平位置（HorizontalAlignment）

垂直位置（VerticalAlignment）

而样式则是组织和重用以上的重要工具。不是使用重复的标记填充XAML，通过Styles创建一系列封装所有这些细节的样式。然后通过元素的style属性设定其样式。

<Window.Resources><!--我们定义了一个名为CustomButtonStyle的样式，并将其目标类型设置为Button。通过<Setter>元素，我们设置了按钮的Background、Foreground和FontSize属性。--><Style x:Key="CustomButtonStyle" TargetType="Button"><Setter Property="Background" Value="Blue"/><Setter Property="Foreground" Value="White"/><Setter Property="FontSize" Value="14"/></Style>
</Window.Resources><!--引用我们定义的样式CustomButtonStyle--><Button Style="{StaticResource CustomButtonStyle}" Width="100" Height="40" Content="Click Me"/>

样式继承

BasedOn

<Window x:Class="EventLearn.UseStyle"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:EventLearn"mc:Ignorable="d"Title="UseStyle" Height="450" Width="800"><Window.Resources><Style x:Key="BaseStyle" TargetType="Button"><Setter Property="Width" Value="100"/><Setter Property="Height" Value="40"/><Setter Property="Foreground" Value="Red"/></Style><Style x:Key="style1" TargetType="Button" BasedOn="{StaticResource BaseStyle}"><Setter Property="Content" Value="Hello"/></Style></Window.Resources><Grid><StackPanel><Button Style="{StaticResource style1}" /><Button Style="{StaticResource style1}"/><Button Style="{StaticResource style1}"/></StackPanel></Grid>
</Window>

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

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

相关文章

如何在Flutter中实现网络请求

如何在Flutter中实现网络请求

在Flutter中实现网络请求有很多模块&#xff0c;可以使用http模块&#xff0c;也可以使用dio模块。 具体的用法在https://pub.dev/上面有&#xff0c;我们以前的的项目中用的是Dio库&#xff0c;它支持get post put delete还支持文件的上传下载。 import ‘package:dio/dio.d…
阅读更多...
LeetCode hot100-11

LeetCode hot100-11

239. 滑动窗口最大值给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。返回 滑动窗口中的最大值 。我的解法会超时&#xff0c;就比最暴力解法优化了一点点吧…
阅读更多...
如何解决awtk动态图锯齿状

如何解决awtk动态图锯齿状

打开awtk安装目录sdk->awtk->awtk_config.py,找到该位置 VGCANVAS NANOVG # VGCANVASNANOVG_PLUS if OS_NAME Windows: TK_ROOT TK_ROOT.replace(\\, \\\\) NANOVG_BACKEND GLES2 else: NANOVG_BACKEND GL3 # VGCANVASCAIRO 注释掉 # NANOVG_BACKENDGLES2 # N…
阅读更多...
uni-app开发介绍以及代码案例

uni-app开发介绍以及代码案例

uni-app是一个使用Vue.js开发所有前端应用的框架&#xff0c;它允许开发者编写一套代码&#xff0c;然后将其发布到iOS、Android、Web&#xff08;响应式&#xff09;、以及各种小程序&#xff08;如微信、支付宝、百度等&#xff09;等多个平台。uni-app在开发者数量、案例、跨…
阅读更多...
解决驱动开发中＜stdlib.h＞ no such file 的问题

解决驱动开发中＜stdlib.h＞ no such file 的问题

前言 在进行驱动开发时&#xff0c;需要使用malloc等函数&#xff0c;导入C库<stdlib.h>出现bug。 嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程&#xff0c;未来预计四个月将高强度更新本专栏&#xff0c;喜欢的可以关注本博主并订阅本专栏&#xff0c;一起讨论…
阅读更多...
LeetCode 每日一题 2024/3/4-2024/3/10

LeetCode 每日一题 2024/3/4-2024/3/10

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 3/4 232. 用栈实现队列3/5 1976. 到达目的地的方案数3/6 2917. 找出数组中的 K-or 值3/7 2575. 找出字符串的可整除数组3/8 2834. 找出美丽数组的最小和3/9 2386. 找出数组…
阅读更多...
深度学习十大算法-快速掌握！

深度学习十大算法-快速掌握！

自2006年深度学习概念被提出以来&#xff0c;20年快过去了&#xff0c;深度学习作为人工智能领域的一场革命&#xff0c;已经催生了许多具有影响力的算法。那么&#xff0c;你所认为深度学习的top10算法有哪些呢&#xff1f; 以下是大力哥我心目中的深度学习top10算法&#xff…
阅读更多...
python中列表常用函数

python中列表常用函数

列表list相关函数 列表相关函数 列表相关函数 汇总&#xff1a;. 列表: 1.list() 方法用于将序列&#xff08;元组&#xff0c;集合&#xff0c;字符串等&#xff09;转换为列表。 用法&#xff1a;list( seq ) #seq为序列&#xff1a;元组 集合 字符串等 2.列表定义&a…
阅读更多...
案例分析篇09：Web架构设计相关20个考点（7~11）（2024年软考高级系统架构设计师冲刺知识点总结）

案例分析篇09：Web架构设计相关20个考点（7~11）（2024年软考高级系统架构设计师冲刺知识点总结）

专栏系列文章推荐： 2024高级系统架构设计师备考资料（高频考点&真题&经验）https://blog.csdn.net/seeker1994/category_12593400.html 【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】（2024年软考高级系统架构设计师冲刺知识点总结-案例分析篇-…
阅读更多...
研究生预答辩全解析

研究生预答辩全解析

下午参加了预答辩&#xff0c;顺利通过&#xff01;非常开心&#xff0c;做一点小小的分享。 关于如何顺利通关学位论文预答辩&#xff01; 首先&#xff0c;预答辩最重要的两样东西是论文和演讲PPT。这是需要精心准备的&#xff0c;你用不用心&#xff0c;老师一眼就…
阅读更多...
github 中的java前后端项目整合到本地运行

github 中的java前后端项目整合到本地运行

前言: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;不提供完整代码&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 本文章未…
阅读更多...
ES6：箭头函数中的this指向问题

ES6：箭头函数中的this指向问题

普通函数中的this指向函数的调用者 例子&#xff1a; 黑马程序员的说法&#xff1a;箭头函数不会创建自己的this&#xff0c;它只会从自己的作用域链的上一层沿用this 尚硅谷的说法&#xff1a;this始终指向函数声明时所在作用域下的this的值 通俗理解就是箭头函数中找this&…
阅读更多...
Linux搭建我的世界(MC)整合包服务器，All the Mods 9(ATM9)整合包开服教程

Linux搭建我的世界(MC)整合包服务器，All the Mods 9(ATM9)整合包开服教程

Linux使用MCSM面板搭建我的世界(Minecraft)整合包服务器&#xff0c;MC开服教程&#xff0c;All the Mods 9(ATM9)整合包搭建服务器的教程。 本教程使用Docker来运行mc服&#xff0c;可以方便切换不同Java版本&#xff0c;方便安装多个mc服版本。 视频教程&#xff1a;https:…
阅读更多...
vue3+ts+element-plus实际开发之统一掉用弹窗封装

vue3+ts+element-plus实际开发之统一掉用弹窗封装

vue3tselement-plus实际开发之统一掉用弹窗封装 插槽1. 官网介绍先理解 插槽、具名插槽、 作用域插槽、动态插槽名、具名作用域插槽属性和使用方法 2. 统一调用弹窗封装dome实战- 使用场景&#xff1a;- 对el-dialog进行数据动态设置- 新建一个ts文件用于统一存放组件&#xff…
阅读更多...
设备维修带来的无限价值——易点易动设备管理系统的优势

设备维修带来的无限价值——易点易动设备管理系统的优势

在化工工厂中&#xff0c;设备的正常运行是保障生产顺利进行的关键。然而&#xff0c;设备难免会出现故障和损坏&#xff0c;而及时有效的设备维修对于提高生产效率和降低成本至关重要。为了解决这一问题&#xff0c;易点易动设备管理系统应运而生&#xff0c;以其卓越的功能和…
阅读更多...
【微服务学习笔记（一）】Nacos、Feign、Gateway基础使用

【微服务学习笔记（一）】Nacos、Feign、Gateway基础使用

【微服务学习笔记&#xff08;一&#xff09;】Nacos、Feign、Gateway基础使用 总览Nacos安装配置Nacos注册中心服务多级存储模型负载均衡规则环境隔离 配置管理配置拉取配置热更新多服务共享配置 Feign远程调用配置性能优化Fegin使用 统一网关Gateway搭建网关路由断言工厂&…
阅读更多...
【漏洞复现】畅捷通T+ GetStoreWarehouseByStore接口处存在反序列化RCE漏洞

【漏洞复现】畅捷通T+ GetStoreWarehouseByStore接口处存在反序列化RCE漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…
阅读更多...
扫雷小游戏制作教程：用HTML5和JavaScript打造经典游戏

扫雷小游戏制作教程：用HTML5和JavaScript打造经典游戏

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…
阅读更多...
go反射实战

go反射实战

文章目录 demo1 数据类型判断demo2 打印任意类型数据 demo1 数据类型判断 使用reflect.TypeOf()方法打印go中数据类型&#xff0c;可参考go官方API文档;使用格式化参数%T也能打印数据类型。 package mainimport "fmt" import "reflect" import "io&…
阅读更多...
网络流量监控软件AnaTraf：优化性能、排除故障的最佳选择

网络流量监控软件AnaTraf：优化性能、排除故障的最佳选择

目录 导言 网络流量监控的重要性 AnaTraf网络万用表的功能与优势 网络故障排除与优化网络性能 结论 导言 在当今数字化时代&#xff0c;计算机网络已经成为企业和组织的核心基础设施。然而&#xff0c;网络流量的管理和监控对于确保网络性能的稳定和优化至关重要。本文将介…
阅读更多...
最新文章

Copyright @ 2022~2023