【转】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，一经查实，立即删除！

相关文章

【转】github中origin和upstream的区别

【转】github中origin和upstream的区别

Fork&#xff0c;本身并不是git工具中的一个命令&#xff0c;也不是对git的扩展&#xff0c;它是在GitHub上的概念&#xff0c;是另一种clone方式——在服务器端的clone。 而我们通常意义上的clone&#xff0c;是将远程repo 复制一份到本地。 当你从GitHub上 clone 一个 repo …
阅读更多...
【转】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…
阅读更多...
【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只有一个主窗口用户控件&#…
阅读更多...
OpenGL基本运行模型

OpenGL基本运行模型

OpenGL是一种三维技术规范。 我们知道三维渲染场景需要实时计算大量数据。 这里我根据自己的经验总结出一句话&#xff1a; 计算机中&#xff0c;对性能要求高的功能模块&#xff0c;其运行原理必然是简单易行的&#xff01; 有理由断言&#xff1a;OpenGL没那么难。 OpenGL工…
阅读更多...
【转】浅谈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;而不知道它们是如何协作的&…
阅读更多...
用姓名字段统计人数_基于 Wide amp; Deep 网络和 TextCNN 的敏感字段识别

用姓名字段统计人数_基于 Wide amp; Deep 网络和 TextCNN 的敏感字段识别

数据治理 (Data Governance) [1]作为一种数据管理的重要一环&#xff0c;主要目的在于保证数据在整个生命周期内的高质量性。数据治理的核心包括&#xff1a;数据的可用性 (Availability)&#xff0c;易用性 (Usability)&#xff0c;一致性 (Consistency)&#xff0c;完整性 (I…
阅读更多...
【转】C# Stream篇（—） -- Stream基类

【转】C# Stream篇（—） -- Stream基类

目录&#xff1a; 什么是Stream? 什么是字节序列&#xff1f; Stream的构造函数 Stream的重要属性及方法 Stream的示例 Stream异步读写 Stream 和其子类的类图 本章总结 什么是Stream? MSDN 中的解释太简洁了: 提供字节序列的一般视图 &#xff08;我可不想这么理解…
阅读更多...
【已解决】解决Win7安装VS2013/VS2015结束时报错“无法建立到信任根颁发机构的证书链”的问题

【已解决】解决Win7安装VS2013/VS2015结束时报错“无法建立到信任根颁发机构的证书链”的问题

问题描述 最近在Win7虚拟机上上安装VS&#xff0c;等待许久之后&#xff0c;提示安装完成。但是完成界面报错&#xff1a; “无法建立到信任根颁发机构的证书链”。 而且错误还不少&#xff0c;如下图所示&#xff1a; 根据我的个人经验&#xff0c;证书问题并没有影响日常开…
阅读更多...
【转】C# Stream篇（二）TextReader 和StreamReader

【转】C# Stream篇（二）TextReader 和StreamReader

目录&#xff1a; 为什么要介绍 TextReader&#xff1f; TextReader的常用属性和方法 TextReader 示例 从StreamReader想到多态 简单介绍下Encoding 编码 StreamReader 的定义及作用 StreamReader 类的常用方法属性 StreamReader示例 本章总结 为什么要介绍 TextReade…
阅读更多...
【数据结构】能看懂的红黑树

【数据结构】能看懂的红黑树

1 总体逻辑 1.2 二叉树 二叉树中&#xff0c;一个根节点最多有两个子节点。 1.3 二叉排序树 Binary Search Tree 二叉排序树是一个排好序的二叉树。且水平方向来看&#xff0c;总有 左节点 < 右节点 简单记忆其规律&#xff0c;可以在脑海中想象一个大大的小于号&#x…
阅读更多...
【转】!C#中的Stream相关

【转】!C#中的Stream相关

计算机文件基本上分为二种&#xff1a;二进制文件和 ASCII&#xff08;也称纯文本文件&#xff09;。图形文件及文字处理程序等计算机程序都属于二进制文件。这些文件含有特殊的格式及计算机代码。ASCII 则是可以用任何文字处理程序阅读的简单文本文件&#xff0c;由一些字符的…
阅读更多...
【转】！！c#文件系统操作类继承关系图

【转】！！c#文件系统操作类继承关系图

自己总结的&#xff0c;给大家参考一下&#xff0c;
阅读更多...
php elasticsearch 获取索引所有文档_Elasticsearch客户端主要方法的使用规则

php elasticsearch 获取索引所有文档_Elasticsearch客户端主要方法的使用规则

安装1.在 composer.json 文件中引入 elasticsearch-php&#xff1a;{ "require": { "elasticsearch/elasticsearch": "~6.0" }}2.用 composer 安装客户端&#xff1a;curl -s http://getcomposer.org/installer | phpphp composer.…
阅读更多...
【音视频开发】音视频数据封装层级模型

【音视频开发】音视频数据封装层级模型

原创绘制&#xff0c;转载请注明。
阅读更多...
【转】SVN trunk(主线) branch(分支) tag(标记) 用法详解和详细操作步骤

【转】SVN trunk(主线) branch(分支) tag(标记) 用法详解和详细操作步骤

转自&#xff1a;https://monday.blog.csdn.net/article/details/51122637 一&#xff1a;使用场景&#xff1a; 假如你的项目&#xff08;这里指的是手机客户端项目&#xff09;的某个版本&#xff08;例如1.0版本&#xff09;已经完成开发、测试并已经上线了&#xff0c;接…
阅读更多...
【转】人工智能教程-前言

【转】人工智能教程-前言

前言 大家好&#xff01;欢迎来到我的网站&#xff01; 人工智能被认为是一种拯救世界、终结世界的技术。毋庸置疑&#xff0c;人工智能时代就要来临了&#xff0c;科幻电影中的场景将成为现实&#xff0c;未来已来&#xff01; 我很庆幸。十四年前就认定了人工智能专业&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023