WPF 之 布局(二)

一、Canvas 

Canvas是最基本的面板,只是一个存储控件的容器,它不会自动调整内部元素的排列及大小,它仅支持用显式坐标定位控件,它也允许指定相对任何角的坐标,而不仅仅是左上角。可以使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。通过设置Left和Right属性的值表示元素最靠近的那条边,应该与Canvas左边缘或右边缘保持一个固定的距离,设置Top和Bottom的值也是类似的意思。实质上,你在选择每个控件停靠的角时,附加属性的值是作为外边距使用的。如果一个控件没有使 用任何附加属性,它会被放在Canvas的左上方(等同于设置Left和Top为0)。

Canvas的主要用途是用来画图。Canvas默认不会自动裁减超过自身范围的内容,即溢出的内容会显示在Canvas外面,这是因为默认 ClipToBounds=”False”;我们可以通过设置ClipToBounds=”True”来裁剪多出的内容。

  Canvas内的子控件不能使用两个以上的Canvas附加属性,如果同时设置Canvas.Left和Canvas.Right属性,那么后者将会被忽略。

二、WrapPanel

  WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够是就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行。

  Orientation——根据内容自动换行。当 Horizontal选项看上去类似于Windows资源管理器的缩略图视图:元素是从左向右排列的,然后自上至下自动换行。Vertical 选项看上去类似于Windows资源管理器的列表视图:元素是从上向下排列的,然后从左至右自动换行。

  ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。

  ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比ItemWidth高的元素都将被截断。

三、StackPanel

  StackPanel就是将控件按照行或列来顺序排列,但不会换行。通过设置面板的Orientation属性设置了两种排列方式:横排(Horizontal默认的)和竖排(Vertical)。

  纵向的StackPanel默 认每个元素宽度与面板一样宽,反之横向亦然。如果包含的元素超过了面板空间,它只会截断多出的内容。 元素的Margin属性用于使元素之间产生一定得间隔,当元素空间大于其内容的空间时,剩余空间将由HorizontalAlignment和 VerticalAlignment属性来决定如何分配。

  当把StackPanel的FlowDirection属性设置为RightToLeft,Orientation属性设置为Horizontal,StackPanel将从右向左排列元素。

四、Grid

  Grid顾名思义就是“网格”,它的子控件被放在一个一个实现定义好的小格子里面,整齐配列。 Grid和其他各个Panel比较起来,功能最多也最为复杂。要使用Grid,首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素,从而定义行数和列数。而放置在Grid面板中的控件元素都必须显示采用附加属性语法定义其 放置所在的行和列,它们都是以0为基准的整型 值,如果没有显式设置任何行或列,Grid将会隐式地将控件加入在第0行第0列。由于Grid的组成并非简单的添加属性标记来区分行列,这也使得用户在实际应用中可以具体到某一单 元格中,所以布局起来就很精细了。

  Grid的单元格可以是空的,一个单元格中可以有多个元素,而在单元格中元素是根据它们的Z顺序一个接着一个呈现的。与Canvas一样,同一个单元格中 的子元素不会与其他元素交互布局,信息——它们仅仅是重叠而已。


名称


说明


绝对尺寸


就是给一个实际的数字,但通常将此值指定为整数,像上图中中那样


自动(Autosizing)


值为Auto,实际作用就是取实际控件所需的最小值


StarSizing


值为*或N*,实际作用就是取尽可能大的值,当某一列或行被定义为*则是尽可能大,当出现多列或行被定义为*则是代表几者之间按比例方设置尺寸

  第一种,固定长度——宽度不够,会裁剪,不好用。单位pixel。 
  第二种,自动长度——自动匹配列中最长元素的宽度。 
  第三种,比例长度——*表示占用剩余的全部宽度;两行都是*,将平分剩余宽度;像上面的一个2*,一个*,表示前者2/3宽度。

  2) 跨越多行和多列,使用Grid.ColumnSpan和Grid.RowSpan附加属性可以让相互间隔的行列合并,所以元素也可以跨越多个单元格。

<Rectangle Fill="Silver" Grid.Column="1" Grid.ColumnSpan="3"/> 

  3) 使用GridSplit分割,使用GridSplit控件结合Grid控件实现类似于WinForm中SplitContainer的功能。

<GridSplitter Height="6" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
               Grid.Row="2" Grid.Column="2"></GridSplitter>

五、UniformGrid 

  接下来介绍的这个UniformGrid 就是Grid的简化版,每个单元格的大小相同,不需要定义行列集合。每个单元格始终具有相同的大小,每个单元格只能容纳一个控件,将自动按照定义在其内部的元素个数,自动创建行列,并通常保持相同的行列数。UniformGrid 中没有Row 和Column 附加属性,也没有空白单元格。

  与Grid布局控件相比,UniformGrid布局控件很少使用。Grid面板是用于创建简单乃至复杂窗口布局的通用工具。UniformGrid面板是一个一种更特殊的布局容器,主要用于在一个刻板的网格中快速地布局元素。

时间: 2024-08-12 10:17:38

WPF 之 布局(二)的相关文章

二,WPF的布局

布局过程 WPF布局包含两个阶段:一个测量(measure)阶段和一个排列(arrange)阶段.在测量阶段,窗口遍历所有子元素,并询问子元素它们所期望的尺寸.在排列阶段,窗口在合适的位置放置子元素. ActualHeight属性和ActualWidth属性:在某些情况下,可能希望使用代码检查窗口中某个元素的尺寸,这时使用Height和Width是没有用的,因为这两个属性是所期望的尺寸设置,可能和实际的渲染尺寸不同,在理想情况下,应当让元素的尺寸适应它们的内容,所以不要设置Height和Widt

WPF UI布局之概述

在线演示:http://v.youku.com/v_show/id_XNzA5NDk2Mjcy.html 清晰版视频+代码下载:http://115.com/lb/5lbeer0m9lad 一.简单介绍 本篇对WPF的布局控件做一个初步的概览,并分别演示Grid.StackPanel.Canvas.DockPanel和WrapPanel五个布局控件.. 主要内容包含: 1.UI布局的方式和关系. 2.WPF的布局理念. 3.五种布局控件的概述和演示. 4.小结. 二.UI布局的方式和关系 1.三

WPF模板(二)应用

原文:WPF模板(二)应用 本次内容来源于电子书,和上一篇一样. 在WPF中有三大模板ControlTemplate,ItemsPanelTemplate,DataTemplate.其中ControlTemplate和ItemsPanelTemplate是控件模板,DataTemplate是数据模板,他们都派生自FrameworkTemplate抽象类. 1.ControlTemplate ControlTemplate:控件模板主要有两个重要属性:VisualTree内容属性和Triggers

【ALearning】第四章 Android Layout组件布局(二)

前面我们分别介绍和学习了LinearLayout(线性布局).FrameLayout(单帧布局)和AbsoluteLayout(绝对布局).这次我们要进行RelativeLayout(相对布局)和TableLayout(表格布局)的学习.这部分是很重要的知识点.RelativeLayout是开发过程中强烈建议使用的,而TableLayout是满足一些特定需求时(常见表格显示,但不局限于此)需要使用. [博客专栏:http://blog.csdn.net/column/details/alearn

WPF系列之二:解耦View层控件事件与ViewModel层事件的响应

以前的做法: 1.当项目的时间比较紧迫的时候,对UI层中控件的事件的处理,往往采取的是类似Winform中最简单的做法,直接做一个事件的Handler直接去调用VM层的方法. 2.控件只有一个Command属性,其它的事件的处理方法没有办法和ViewModel层进行解耦的时候往往也采取上面提到的方法. 如下图所示: 新的做法: 为了实现事件的处理与View层的解耦,我们可以利用WPF提供的附加属性来为需要的事件添加附加行为.附加属性扮演了一个在View层与Model层牵线的角色. 需要下面三个步

WPF 动态布局Grid

1 //开启线程加载 2 Action a = () => 3 { 4 var row = 7; 5 var column = 9; 6 7 var path = "../../face_img/"; 8 var files = Directory.GetFiles(path); 9 for (var i = 0; i < row; i++) 10 { 11 faceGrid.RowDefinitions.Add(new RowDefinition()); 12 } 13

Wpf之布局

上一章大家有了自己的一个Hello World的wpf程序,今天咱们就一起走进WPF,一起来看看wpF的前台xaml这门语言的魅力. 写过web 的人都知道布局这个概念,在web中布局和样式是靠div+CSS来完成的,而在wpf中布局是靠容器来完成的,大家可以把wpf中的容器和web里面的div做对比,刚入门的同学也不要着急,没学过web一点不影响大家学习容器布局的概念的概念. 大家先来看个设计图吧 因为偷懒我直接切了个百度的图来看,更贴近大家的生活,哈哈. 咱们来分析一下,这张图片由4行2列来

WPF简单布局 浅尝辄止

WPF的窗口只能包含一个元素,为了在WPF窗口中放置多个元素并创建更实用的用户界面,需要在窗口上放置一个容器,然后在容器中放置其它元素. 注意:造成这一限制的原因是window类继承自contentcontrol类, 说道简单布局不得不说下wpf的布局原则: 理想窗口要遵循的布局原则: 1,不应显示的设定元素的尺寸. 2,不应使用屏幕坐标指定元素的位置. 3,布局容器和他们的子元素“共享”可以使用的空间. 4,可以嵌套布局容器. 布局过程包括:测量阶段和排列阶段.所有的wpf布局容器都是派生自s

WPF 之 布局(一)

WPF的布局控件都在 System.Windows.Controls.Panel 这个基类下面,使用 WPF提供的各种控件在WPF应用程序中界面进行布局,同时对各种子控件(如按钮.文本框,下拉框等)进行排列组合. Pane类的公共属性太多了.就简单介绍几个常见的属性如下表. 名称 说明 Cursor 获取或设置在鼠标指针位于此元素上时显示的光标. DataContext 获取或设置元素参与数据绑定时的数据上下文. Dispatcher 获取与此 DispatcherObject 关联的 Disp

Android常用界面布局(二)

ImageView ScaleType属性, 该属性用以表示显示图片的方式 ①matrix               根据一个3x3的矩阵对其中图片进行缩放 ②fitXY                  将图片非等比例缩放到大小与ImageView相同 ③fitStart               缩放方式同FIT_CENTER,只是将图片显示在左方或上方,而不是居中 ④fitCenter           ImageView的默认状态,大图等比例缩小,小图等比例放大,整体居中显示在Im