WPF 布局总结

一.WPF布局原理

WPF窗口只能包含单个元素,为在WPF窗口中放置多个元素,需要放置一个容器,让后在容器中添加其他元素。“理想的”WPF窗口需遵循以下几个原则:

1.不应显示设定元素的尺寸。元素应当可以改变尺寸适合他们的内容,如添加更多文字内容时,按钮会适当扩展。设置最大,最小尺寸,控制尺寸范围。

2.不应使用确定坐标确定元素的位置。元素应当由容器根据他们的尺寸,按一定的顺序进行排列。Margin属性可添加空白空间。

3.布局容器的子元素“共享”可用空间。布局容器根据每个元素的内容尽可能的为元素设置合理尺寸。

4.可嵌套的布局容器。如Grid面板,可以嵌套多种元素,如文本框,按钮。

核心布局面板

名称 说明
StackPanel 水平或垂直的堆栈中放置元素。
WrapPanel 在一系列可换行的行中放置元素。
DockPanel 根据整个容器的边界调整元素。
Grid 多行多列中排放元素,适用面最广
Canvas 使用固定坐标定位元素,对于可变尺寸的窗口,不是合适选择。
   

二.个核心面板介绍

1.StackPanel面板

1  <StackPanel>
2         <Label HorizontalAlignment="Center">A Button Stack </Label>   //对齐方式
3         <Button HorizontalAlignment="Left">button1</Button>
4         <Button HorizontalAlignment="Right">button2</Button>
5         <Button Margin="5">button3</Button>                           //边距为5
6         <Button Margin="10,5,10,5">button4</Button>                   //分别设置边距
7  </StackPanel>

2.Border控件

Border不是布局面板但是可以和控制面板搭配使用。

1     <Border Background="Yellow" Margin="5" Padding="5" BorderBrush="SteelBlue" CornerRadius="5" VerticalAlignment="Top">
2         <StackPanel Margin="3">
3         <Label HorizontalAlignment="Center">A Button Stack</Label>
4         <Button Margin="3" MaxWidth="200" MinWidth="100">button1</Button>          //设置最大宽最小宽
5         <Button Margin="3" MaxWidth="200" MinWidth="100">button2</Button>
6         <Button Margin="3" MaxWidth="200" MinWidth="100">button3</Button>
7         </StackPanel>
8     </Border>

      

3.WrapPanel和DockPanel面板

1     <WrapPanel Margin="3">
2         <Button VerticalAlignment="Top">Top button1</Button>
3         <Button MinHeight="60">Tall button2</Button>
4         <Button VerticalAlignment="Bottom">Bottom button3</Button>
5         <Button VerticalAlignment="Center">Center button4</Button>
6     </WrapPanel>   

注意:WrapPanel是唯一一个无法通过灵活使用Grid面板代替的面板

4.DockPanel面板

DockPanel面板沿一条外边缘拉升所包含的控件

时间: 2024-08-05 04:32:01

WPF 布局总结的相关文章

WPF快速入门系列(1)——WPF布局概览

一.引言 关于WPF早在一年前就已经看过<深入浅出WPF>这本书,当时看完之后由于没有做笔记,以至于我现在又重新捡起来并记录下学习的过程,本系列将是一个WPF快速入门系列,主要介绍WPF中主要的几个不同的特性,如依赖属性.命令.路由事件等. 在正式介绍之前,我还想分享下为什么我又要重新捡起来WPF呢?之前没有记录下来的原来主要是打算走互联网方向的,后面发现互联网方向经常加班,又累,有时候忙的连自己写了什么都不知道的,所以后面机缘巧合地进了一家外企,在外企不像互联网行业那样,比较清楚,有更多的时

WPF布局的6种面板

WPF用于布局的面板主要有6个,StackPanel(栈面板).WrapPanel(环绕面板).DockPanel(停靠面板).Canvas(画布).Grid(网格面板)和 UniformGrid(均布网格).一下详细介绍几种面板各自的特点: 1.StackPanel 栈面板,可以将元素排列成一行或者一列.其特点是:每个元素各占一行或者一列.Orientation属性指定排列方式:Vertical(垂直)[默认].Horizontal(水平).默认情况下,水平排列时,每个元素都与面板一样高:垂直

WPF 10天修炼 - WPF布局容器

WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了在窗口上放置多个界面控件,通常在窗口上放置一个容器控件. WFP布局原则 1.  元素不应该指定 确定的尺寸大小,同很惨更应该使其大小自动适应内容.比如按钮根据所添加的文本来扩展其大小.可以通过设置maximun和minimun尺寸来限制控件可接受的尺寸大小. 2.  元素不应该使用屏幕坐标来指定其

WPF布局管理之Canvas、InkCanvas (转)

一.Canvas 在WPF中子元素的绝对定位的布局控件 其子元素使用Width.Height定义元素的宽度和高度 使用Convas.Left(Convas.Right).Convas.Top(Convas.Bottom)定义与Convas容器的相对位置 如果同时存在Convas.Left和Convas.Right.Convas.Top和Convas.Bottom,则Convas.Left.Convas.Top优先生效 例如: <Canvas> <Button Canvas.Left=&q

WPF 布局控件 之 DockPanel

DockPanel为容器控件 主要了解其Dock属性和LastChildFill属性的使用 一.LastChildFill="True" 时 代码: <DockPanel LastChildFill="True"> <Button DockPanel.Dock="Top">Top</Button> <Button DockPanel.Dock="Bottom">Bottom<

对比MFC资源文件谈谈WPF布局方式

对比MFC资源文件谈谈WPF布局方式 MFC方式 对于传统的MFC基于UI的应用程序设计通常分两步走,首先是设计UI,使用的是RC文件,然后是代码文件,对RC文件进行操作,如下面Figure 1 的基于对话框的应用程序,其对应的代码如Figure 2所示,这就是MFC时代的所见即所得,如大家所见,每个控件的代码都和位置都是写死的坐标,这样会带来的问题是当你改变系统运行的的DPI或者软件需要支持本地化的时候,由于有的语言对于同样的意思需要比较长的文字表示,就会带来文字显示不下或者显示不完整的情况.

WPF布局控件常用属性介绍

WPF布局控件常用属性介绍 其它 | 作者:慧都控件网 | 2011-04-06 13:41:57| 阅读 0次 有用(0) 评论(0) 概述:WPF布局控件都是派生自System.Windows.Controls.Panel抽象类的面板,Panel类继承自 FrameworkElement,Panel类本身并没有什么特别的,但是WPF中提供了许多用于布局的控件都继承自Panel类,如 StackPanel控件,WrapPanel,DockPanel,Grid,UniformGrid,Canva

学习WPF1.2——WPF布局——了解布局容器

WPF布局工作内部原理 WPF渲染布局时主要执行了两个工作:测量和排列 测量阶段,容器遍历所有子元素,并询问子元素所期望的尺寸 排列阶段,容器在合适的位置放置子元素,并设置元素的最终尺寸 这是一个递归的过程,界面中任何一个容器元素都会被遍历到 WPF布局容器的继承机制 DispatcherObject WPF应用程序使用单线程亲和模型(STA:Single-Thread Affinity),这意味着整个用户界面都为单个线程拥有,同时也意味着从另一个线程与用户界面元素交互是不安全的,但有很多情况下

WPF布局容器

原文:WPF布局容器 1.StackPanel:堆栈面板,通过Orientation属性设置子元素的布局排列方向为"Vertical"(垂直)和"Horizontal"(水平),不写其默认值为"Vertical",当设置为"Vertical"时子元素会沿垂直方向拉伸,反之设置为"Horizontal"时子元素会沿水平方向拉伸. 2.DockPanel:支持子元素停靠在面板的任意一条边上,通过附加属性Dock