【转】WPF之路-常用布局控件一

WPF布局原则

不应显式设置大小

为了布局的稳定性，控件的大小应该可以自动适应容器。如下为新建一个窗体，默认包含一个Grid容器，该控件没有显式设置宽高，所以，在改变窗体大小的时候，该容器的大小也随着变化，但如果显式的加了宽或高，在改变窗体大小后，该容器的大小受限并且位置不再稳定

 

 

使用相对坐标

容器的子元素应该以父级位置相对定位，而不是使用窗体的坐标

与子元素共享空间

如果空间允许，布局容器会根据每个元素的内容尽可能为元素设置更合理的尺寸。它们还会向一个或多个子元素分配多余的空间

支持嵌套布局

多种容器可相互嵌套使用，完成最优布局

StackPanel 控件

它是一个布局容器，在单行单列中放置子元素，叫做堆栈面板

在窗体中添加一个StackPanel容器，在工具箱中先择StackPanel控件，将其拖动到窗体上，在这里，StackPanel容器被嵌套在了Grid容器中，也可以将Grid容器删除，单独使用StackPanel容器；StackPanel的默认XMAL标签是个单标签，如果需要在StackPanel中包含子级，需要将其设置为双标签格式

 

将StackPanel所有的属性先删除掉，然后添加一个标签控件，三个按钮控件，一个文本框控件，效果如下；可以看出，StackPanel默认会将子元素垂直排列

 

可以通过Orientation属性来控制子元素排列方向

Orientation="Horizontal" 表示水平排列

Orientation="Vertical" 表示垂直排列，它是默认的

 

HorizontalAlignment属性可以控制子元素水平方向的位置，控制元素是靠左还中靠右等

该属性对应的值有Right/Left/Center/Stretch，该属性只对于横向伸展（垂直排列）的元素有效果

HorizontalAlignment="Right"表示将元素水平区于右，结果如下图

 

VerticalAlignment属性可以控制子元素垂直方向的位置

VerticalAlignment对应的值有Bottom/Center/Stretch/Top

VerticalAlignment="Top"会将横向分布（垂直伸展）的元素区于上方，如下图

 

因为子元素的排列方向发生了变化，这里看到，HorizontalAlignment="Right"已经不再起作用

Margin属性为元素添加外边距

Margin="10,15,20,25"的四个值分别表示左、上、右、下的位置，如下图

 

如果Margin属性只有一个值的话表示的是上下位置，如果只有两个值的话，第一个值表示上下，第二个值表示的是左右

MinWidth属性可以控制元素的最小尺寸，也就是说该元素不可以小于设定的最小宽度值

MaxWidth属性可以控制元素的最大尺寸，也就是说该元素不可以大于设定的最大宽度值

Border控件

Border 是一个装饰的控件，用此控件绘制一个边框、一个背景.在 Border 中只能有一个子控件，但它的子控件是可以包含多个子控件的

示例与代码如下

 

<Border><StackPanel Orientation="Vertical"><Label Content="Label"/><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><TextBox Height="23" TextWrapping="Wrap" Text="TextBox"/></StackPanel></Border>

从上例可以看出，Border中只包含了一个子元素StackPanel，而StackPanel中包含了多个子元素

BorderThickness属性可以设置Border控件边的宽度，而BorderBrush属性可以设置边的颜色，如下

 

<Border BorderThickness="16" BorderBrush="BlueViolet"><StackPanel Orientation="Vertical"><Label Content="Label"/><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><TextBox Height="23" TextWrapping="Wrap" Text="TextBox"/><Border BorderBrush="Black" BorderThickness="1" Height="100"/></StackPanel></Border>

Padding属性可以为元素设置内填充，效果如下

 

<Border BorderThickness="16" BorderBrush="BlueViolet" Padding="30"><StackPanel Orientation="Vertical"><Label Content="Label"/><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><TextBox Height="23" TextWrapping="Wrap" Text="TextBox"/><Border BorderBrush="Black" BorderThickness="1" Height="100"/></StackPanel></Border>

CornerRadius属性可以为Border控件设置边度的弧度，如下图

 

<Border BorderThickness="16" BorderBrush="BlueViolet" Padding="30" CornerRadius="45"><StackPanel Orientation="Vertical"><Label Content="Label"/><Button Content="Button" /> <Button Content="Button" /><Button Content="Button" /><TextBox Height="23" TextWrapping="Wrap" Text="TextBox"/><Border BorderBrush="Black" BorderThickness="1" Height="100"/></StackPanel></Border>

WrapPanel面板

WrapPanel容器将子元素按行或列一个接一个进行排列，如果一行或一列放不下，元素会被挤到下一行或一列；同一行元素的高度一样，同一列元素的宽度是一样的

示例如下：

 

<Window x:Class="WPF_Code.WarpPanel_wpf"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WarpPanel_wpf" Height="300" Width="300"><WrapPanel><Button Content="Button" /><Button Content="Button" /><!--这里只设置了一个button的高度，与它同一行的元素都变成了一样的高度--><Button Content="Button" Height="30" /><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /></WrapPanel>
</Window>

 

<Window x:Class="WPF_Code.WarpPanel_wpf"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WarpPanel_wpf" Height="300" Width="300"><!--将WrapPanel元素排列方向改为垂直方向--><WrapPanel Orientation="Vertical"><!--在垂直方向上，如果改变一个元素的高度的话对其它元素没有影响--><Button Content="Button" Height="164" /><Button Content="Button" /><!--在垂直方向上，如果改变一个元素的宽度则同列上的元素的宽度都会有变化--><Button Content="Button" Width="100" /><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /></WrapPanel>
</Window>

DockPanel面板

DockPanel支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间

DockPanel有一个Dock附加属性，因此子元素用4个值来控制她们的停靠：Left、Top、Right、Bottom。Dock 没有Fill值。作为替代，最后的子元素将加入一个DockPanel并填满所有剩余的空间，除非DockPanel的LastChildFill属性为false，它将朝某个方向停靠

示例如下：

 

<Window x:Class="WPF_Code.WarpPanel_wpf"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WarpPanel_wpf" Height="300" Width="300"><DockPanel><Button Content="Button"/><Button Content="Button"/><Button Content="Button"/><Button Content="Button"/><Button Content="Button"/></DockPanel>
</Window>

默认情况下，元素会依次横向排列，并填充整个空间

 

<Window x:Class="WPF_Code.WarpPanel_wpf"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WarpPanel_wpf" Height="300" Width="300"><!--LastChildFill="True"允许最后一个元素填充整个空间，默认是Ture--><DockPanel LastChildFill="True"><!--DockPanel.Dock属性可控制元素在DockPanle中依靠的位置--><Button Content="Button" DockPanel.Dock="Top" /><Button Content="Button" DockPanel.Dock="Bottom"/><Button Content="Button" DockPanel.Dock="Left"/><Button Content="Button" DockPanel.Dock="Right"/><Button Content="Button"/></DockPanel>
</Window>

嵌套布局容器

一个简单示例

 

<Window x:Class="WPF_Code.WarpPanel_wpf"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WarpPanel_wpf" Height="300" Width="300"><!--一个DockPanel容器，LastChildFill允许最后一个元素填充整个剩余空间--><DockPanel LastChildFill="True"><!--嵌套一个StackPanel容器，将子元素横向排列，并领先到DockPanel的底部，然后居中--><StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Center" Orientation="Horizontal"><Button Name="btn1" Content="OK" Padding="10"/><Button Name="btn2" Content="No" Padding="10"/></StackPanel><!--DockPanel的最后一个元素，默认填充整个剩余空间--><TextBox DockPanel.Dock="Top">文本输入……</TextBox></DockPanel>
</Window>

注：可以通过文档大纲栏来查看元素节点树状图

 

编辑于 2018-09-13

Windows Presentation Foundation (WPF)

C# 编程

程序员

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

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

相关文章

jparepository查询所有_jpa中查询大量数据

jparepository查询所有_jpa中查询大量数据

数据库查询一直是提高程序速度的瓶颈之一&#xff0c;本人也遇到了因为数据库数据查询过久导致影响失败&#xff0c;在这里记录以下解决的方法。描述该功能为统计功能&#xff0c;根据参数查找出符合的器具信息&#xff0c;然后再根据统计信息得出统计数据。就好比要统计某个年…
阅读更多...
数据库开发文章汇总

数据库开发文章汇总

数据库是否应该使用外键约束&#xff1f;
阅读更多...
【转】github中origin和upstream的区别

【转】github中origin和upstream的区别

Fork&#xff0c;本身并不是git工具中的一个命令&#xff0c;也不是对git的扩展&#xff0c;它是在GitHub上的概念&#xff0c;是另一种clone方式——在服务器端的clone。 而我们通常意义上的clone&#xff0c;是将远程repo 复制一份到本地。 当你从GitHub上 clone 一个 repo …
阅读更多...
sum函数两个同行的元素相加_Excel函数公式大全：利用sum函数进行汇总以及对多个汇总进行求和...

sum函数两个同行的元素相加_Excel函数公式大全：利用sum函数进行汇总以及对多个汇总进行求和...

教程领到手&#xff0c;学习不用愁&#xff01;领 ↑↑↑最高效最快速的入门学习方式&#xff1a;看知识兔视频课程&#xff0c;跟着知识兔老师操作&#xff0c;听知识兔老师讲解&#xff0c;初学者不要自己瞎琢磨瞎折腾&#xff0c;很容易走弯路。学以致用&#xff0c;光看不练…
阅读更多...
【开源库学习】OpenThreads

【开源库学习】OpenThreads

项目地址 Github&#xff1a;https://github.com/tibogens/OpenThreads 码云&#xff1a;https://gitee.com/lukeson/OpenThreads 参考资料 网上已经有很多比较好的文章了&#xff0c;这里汇总一下&#xff0c;便于查阅。 OpenThreads库介绍——ConditionOpenThreads库介绍…
阅读更多...
cors 前后端分离跨域问题_前后端分离之CORS跨域访问踩坑总结

cors 前后端分离跨域问题_前后端分离之CORS跨域访问踩坑总结

前言前后端分离的开发模式越来越流行,目前绝大多数的公司与项目都采取这种方式来开发,它的好处是前端可以只专注于页面实现,而后端则主要负责接口开发,前后端分工明确,彼此职责分离,不再高度耦合,但是由于这种开发模式将前后端项目分开来独立部署,所以将必不可免的会碰到跨域问…
阅读更多...
【转】WPF入门教程系列六——布局介绍与Canvas（一）

【转】WPF入门教程系列六——布局介绍与Canvas（一）

从这篇文章开始&#xff0c;我们将对WPF中的界面如何布局做一个较简单的介绍&#xff0c;大家都知道&#xff1a;UI是做好一个软件很重要的因素&#xff0c;如果没有一个漂亮的UI&#xff0c;功能做的再好也无法吸引用户使用&#xff0c;而且没有漂亮的界面&#xff0c;那么普通…
阅读更多...
【OSG学习】学习方法

【OSG学习】学习方法

1. 环境准备 运行调试环境的准备参考我的另外一篇博客&#xff1a;【OSG学习】准备开发调试环境 运行调试环境准备比较麻烦&#xff0c;但是不复杂&#xff0c;需要耐心。但是可能很多人会被卡在这一步&#xff0c;后面我会专门提供直接可以使用的完整项目&#xff0c;方便大…
阅读更多...
【转】Vue.js入门教程（二）在页面中引入vue的方式

【转】Vue.js入门教程（二）在页面中引入vue的方式

第二章&#xff1a;安装和基础效果展示 页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法&#xff0c;所以我们不一定需要通过npm工程化进行安装&#xff0c;你直接用script在页面中引用也完全没有问题。 第一种引入方式&#xff0c;script直接引入&#xf…
阅读更多...
空间注意力机制sam_Attention注意力机制介绍

空间注意力机制sam_Attention注意力机制介绍

什么是Attention机制Attention机制通俗的讲就是把注意力集中放在重要的点上&#xff0c;而忽略其他不重要的因素。其中重要程度的判断取决于应用场景&#xff0c;拿个现实生活中的例子&#xff0c;比如1000个人眼中有1000个哈姆雷特。根据应用场景的不同&#xff0c;Attention分…
阅读更多...
【OSG】Examples

【OSG】Examples

推荐内容 关于示例项目解析的内容推荐&#xff1a; OSG3.4内置Examples解析【目录】 下面是个人学习笔记。 1. Examples osgbillboard 这个项目很简单&#xff0c;就几个函数&#xff0c;而且很有意思。 osg::Billboard类是一个控制器&#xff0c;不管你怎么旋转漫游场景&a…
阅读更多...
【转】页（page），用户控件（userControl），窗口（window）区别

【转】页（page），用户控件（userControl），窗口（window）区别

欢迎加入BIM行业开发交流1群 群号:711844216 背景 大家在vs中新建wpf项目后&#xff0c;会发现在添加新建项时会出现下列三个选项 它们有什么区别呢&#xff1f; 区别&#xff1a; 页&#xff1a;通常用于网页窗口&#xff1a;通常一个桌面app只有一个主窗口用户控件&#…
阅读更多...
python可以开发驱动吗_Python机器学习实践：测试驱动的开发方法

python可以开发驱动吗_Python机器学习实践：测试驱动的开发方法

Python机器学习实践&#xff1a;测试驱动的开发方法作者&#xff1a;(美)马修柯克(Matthew Kirk) 著出版日期&#xff1a;2017年10月文件大小&#xff1a;30.91M支持设备&#xff1a;&#xffe5;40.00在线试读适用客户端&#xff1a;言商书局iPad/iPhone客户端&#xff1a;下载…
阅读更多...
关于typedef的正确理解

关于typedef的正确理解

我对typedef的理解一直都是认为它和#define一样&#xff0c;分成三个部分&#xff0c;比如&#xff1a; #define A B但是遇到以下这种函数类型定义 typedef void (*funcName)(int);按照上面的理解&#xff0c;难道是要把void定义成(*funcName)(int)&#xff1f;显然不对。 这…
阅读更多...
【转】WebSocket API总结

【转】WebSocket API总结

NCU.卓越141.chenyuchao 一、检查 WebSocket 支持 var host "ws://localhost:8080/mychat"; var ws; if (WebSocket in window) { ws new WebSocket(host); } else if (MozWebSocket in window) { ws new MozWebSocket(host); } else { window.alert(&quo…
阅读更多...
字节流转化为文件流_字节流转成字符串之后，在通过字符串转成字节流后的文件为什么会不一样？...

字节流转化为文件流_字节流转成字符串之后，在通过字符串转成字节流后的文件为什么会不一样？...

public static void main(String[] args) throws Exception {File sourceFile new File("/home/joy/图片/img1-lg.jpg");File tempFile new File("/home/joy/桌面/TempFile");saveTempFile(sourceFile, tempFile);String str byteToString(tempFile);Fi…
阅读更多...
OpenGL基本运行模型

OpenGL基本运行模型

OpenGL是一种三维技术规范。 我们知道三维渲染场景需要实时计算大量数据。 这里我根据自己的经验总结出一句话&#xff1a; 计算机中&#xff0c;对性能要求高的功能模块&#xff0c;其运行原理必然是简单易行的&#xff01; 有理由断言&#xff1a;OpenGL没那么难。 OpenGL工…
阅读更多...
matlab绘制球面模型_MATLAB采用surf/surfc/surfl/surfnorm绘制球体

matlab绘制球面模型_MATLAB采用surf/surfc/surfl/surfnorm绘制球体

利用绘制球体sphere(n)&#xff0c;展示了MATLAB中的surf&#xff0c;surfc&#xff0c;surfl&#xff0c;surfnorm&#xff0c;surface五个绘图命令。启动MATLAB&#xff0c;新建脚本(CtrlN)&#xff0c;输入如下代码&#xff1a;close all; clear all; clcn20;[x,y,z]sphere(…
阅读更多...
【转】浅谈TDD、BDD、ATDD、DDD的区别

【转】浅谈TDD、BDD、ATDD、DDD的区别

四个开发模式意思: TDD&#xff1a;测试驱动开发&#xff08;Test-Driven Development&#xff09;BDD&#xff1a;行为驱动开发&#xff08;Behavior Driven Development&#xff09;ATDD&#xff1a;验收测试驱动开发&#xff08;Acceptance Test Driven Development&#x…
阅读更多...
【OSG】OSG运行模型

【OSG】OSG运行模型

关于运行模型 OSG中的类很多&#xff0c;只看OSG代码&#xff0c;很难把各个类串联起来。 我们知道面向对象程序的运行模型是&#xff1a;对象对象间协作。 单纯看代码&#xff0c;多数情形下&#xff0c;只能了解程序中有哪些对象&#xff0c;而不知道它们是如何协作的&…
阅读更多...
最新文章

Copyright @ 2022~2023