一.WPF布局原理

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

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

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

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

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

核心布局面板

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

二.个核心面板介绍

1.StackPanel面板

  <StackPanel>

         <Label HorizontalAlignment="Center">A Button Stack </Label>   //对齐方式

         <Button HorizontalAlignment="Left">button1</Button>

         <Button HorizontalAlignment="Right">button2</Button>

         <Button Margin="5">button3</Button>                           //边距为5

         <Button Margin="10,5,10,5">button4</Button>                   //分别设置边距

  </StackPanel>

2.Border控件

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

     <Border Background="Yellow" Margin="5" Padding="5" BorderBrush="SteelBlue" CornerRadius="5" VerticalAlignment="Top">

         <StackPanel Margin="3">

         <Label HorizontalAlignment="Center">A Button Stack</Label>

         <Button Margin="3" MaxWidth="200" MinWidth="100">button1</Button>          //设置最大宽最小宽

         <Button Margin="3" MaxWidth="200" MinWidth="100">button2</Button>

         <Button Margin="3" MaxWidth="200" MinWidth="100">button3</Button>

         </StackPanel>

     </Border>

      

3.WrapPanel和DockPanel面板

     <WrapPanel Margin="3">

         <Button VerticalAlignment="Top">Top button1</Button>

         <Button MinHeight="60">Tall button2</Button>

         <Button VerticalAlignment="Bottom">Bottom button3</Button>

         <Button VerticalAlignment="Center">Center button4</Button>

     </WrapPanel>

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

4.DockPanel面板

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

     <DockPanel Margin="3">

         <Button DockPanel.Dock="Top">Top button1</Button>

         <Button DockPanel.Dock="Top" HorizontalAlignment="Center"> button2</Button>

         <Button DockPanel.Dock="Top" HorizontalAlignment="Left"> button3</Button>

         <Button DockPanel.Dock="Bottom"> button4</Button>

         <Button DockPanel.Dock="Left"> button5</Button>

         <Button DockPanel.Dock="Right"> button6</Button>

         <Button>bb</Button>

     </DockPanel>

停靠行为保持不变，首先停靠顶部按钮，然后停靠底部按钮，剩余空间被分割，最后按钮在中间。

5.Grid面板及嵌套问题

Grid面板通常包含多个GridSplitter对象，可以在一个Grid面板中嵌套另一个Grid面板，如果在Grid面板中嵌套了Grid对象，那么每个单独的Grid都有自己的GridSplitter对象，这样可以创建被分割成两部分的窗口，还可以进行进一步的分割。

    <Grid>

         <Grid.ColumnDefinitions>

             <ColumnDefinition> </ColumnDefinition>

             <ColumnDefinition Width="Auto"></ColumnDefinition>

             <ColumnDefinition></ColumnDefinition>

         </Grid.ColumnDefinitions>

         <Grid Grid.Column="0" VerticalAlignment="Stretch">

             <Grid.RowDefinitions>

                 <RowDefinition></RowDefinition>

                 <RowDefinition></RowDefinition>

             </Grid.RowDefinitions>

             <Button Margin="3" Grid.Row="0">top left</Button>

             <Button Margin="3" Grid.Row="1">botton left</Button>

         </Grid>

         <GridSplitter Grid.Column="1" Width="3" HorizontalAlignment="Center" VerticalAlignment="Stretch" ShowsPreview="False"></GridSplitter>

         <Grid Grid.Column="2">

             <Grid.RowDefinitions>

                 <RowDefinition></RowDefinition>

                 <RowDefinition Height="Auto"></RowDefinition>

                 <RowDefinition></RowDefinition>

             </Grid.RowDefinitions>

             <Button Grid.Row="0" Margin="3">top right</Button>

             <Button Grid.Row="2" Margin="3">bottom right</Button>

             <GridSplitter Grid.Row="1" Height="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" ShowsPreview="False"></GridSplitter>

         </Grid>

     </Grid>

WPF 布局总结的更多相关文章

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

    对比MFC资源文件谈谈WPF布局方式 MFC方式 对于传统的MFC基于UI的应用程序设计通常分两步走,首先是设计UI,使用的是RC文件,然后是代码文件,对RC文件进行操作,如下面Figure 1 的基 ...

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

    一.引言 关于WPF早在一年前就已经看过<深入浅出WPF>这本书,当时看完之后由于没有做笔记,以至于我现在又重新捡起来并记录下学习的过程,本系列将是一个WPF快速入门系列,主要介绍WPF中 ...

  3. 学习WPF——WPF布局——了解布局容器

    WPF布局工作内部原理 WPF渲染布局时主要执行了两个工作:测量和排列 测量阶段,容器遍历所有子元素,并询问子元素所期望的尺寸 排列阶段,容器在合适的位置放置子元素,并设置元素的最终尺寸 这是一个递归 ...

  4. 浅谈 WPF布局

    我们首先来了解一下图形化用户界面(Graphic User Interface)也就是我们常常听到的GUI.举个简单的例子,同样是数据,我们可以用控制台程序加格式控制符等输出,但是这些都不如GUI来的 ...

  5. WPF布局系统[转]

    转自:http://www.cnblogs.com/niyw/archive/2010/10/31/1863908.html前言 前段时间忙了一阵子Google Earth,这周又忙了一阵子架构师论文 ...

  6. 意外地解决了一个WPF布局问题

    原文:意外地解决了一个WPF布局问题 今天做了一个小测试,意外地将之前的一个困扰解决了,原问题见<WPF疑难杂症会诊>中的“怎么才能禁止内容撑大容器?” 以前我是在外侧嵌套Canvas容器 ...

  7. WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系

    WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系: 1.Canvas/WrapPanel控件: 其子控件的HorizontalAlign ...

  8. WPF 10天修炼 第四天- WPF布局容器

    WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了 ...

  9. WPF布局控件常用属性介绍

    WPF布局控件常用属性介绍 其它 | 作者:慧都控件网 | 2011-04-06 13:41:57| 阅读 0次 有用(0) 评论(0)   概述:WPF布局控件都是派生自System.Windows ...

随机推荐

  1. Coding the Matrix (3)：矩阵

    1. 矩阵与映射 矩阵和映射包含两方面的关系: 简单:已知矩阵 M, 从向量 x 映射到 M * x. (注:矩阵与行向量的点乘) 稍微复杂:已知映射 x ->M * x, 求矩阵 M. 第一种 ...

  2. Office2010 pro附+激活工具

    office2003经典的办公,office2010,很不错的办公工具配合Win7,就绝配! office2010,我也近几天接手她,慢慢熟悉... 00安装: 01激活: 内含office2010安 ...

  3. tableviewCell的xib中collectionView签协议

  4. SVN命令使用详解

    1.检出svn  co  http://路径(目录或文件的全路径) [本地目录全路径] --username 用户名 --password 密码svn  co  svn://路径(目录或文件的全路径) ...

  5. Linux(CentOS)下安装git

    上个月把VPS迁到budgetVM,终于不用再受digitalOcean的气了,入手很方便,重点是支持支付宝付款——paypal的界面真是不习惯,开通速度挺快的,1G的内存够我折腾一段时间了~,额外送 ...

  6. nodeJs抓取网页

    var fs = require('fs'); var jquery = require('jquery'); var url = require('url'); var data = { 0 : ' ...

  7. Java-日期转换

    如下: package 时间日期类; import java.text.SimpleDateFormat; import java.util.Date; public class 日期格式转换 { / ...

  8. MyEclipse10中导入的jquery文件报错（出现红叉叉，提示语法错误）

    为了做一个页面特效,导入了一个jQuery文件,怎想,myeclipse竟然报错说是语法错误,但是这个js文件我是从官网上下载的,不应该出错才对,百度谷歌之后终于找到了解决办法: 选中报错的js文件, ...

  9. maven 热部署成功案列

    首先配置tomcat-user.xml,这个文件是在tomcat的conf文件夹下面 在</tomcat-users>前添加这段 <role rolename="admin ...

  10. MVC简介

    全名是Model View Controller,模型-视图-控制器,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互 ...