wpf第二章布局.docVIP

布局与输入 布局基础 WPF提供了一套面板（Panel），它们是一系列具有特殊用途的用户界面元素 StackPanel-栈面板 WrapPanel环绕模板 DockPanel停靠模板 Grid网格 Canvas 画布 UniformGrid 均布网格 以上描述了WPF中的主要面板类型，无论使用哪种面板，它们都遵循相同的基本规则：元素的位置通常是由包含它们的面板所定 栈面板 是一种非常简洁的面板，它的作用是将所包含的元素按一行或一列的方式排列。通常不会用栈面板来布局整个用户界面。它的最大用途就是排列一些比较小的元素，好比html里的《ul无序列表》 WPF通过两种方法来解决元素的布局问题，该策略取决于可用空间大小是否固定。SizeToContent=Height设置某个空间的大小是不是由内容制定 相关的属性还有margin 和 padding，这样设置的控件都会通过窗体大小的变化而产生相应的变化，该值与设备无关 如果设置height 和 width则是固定大小 DockPanel 为了满足Dock的停靠要求必须在子控件上使用附加属性。DockPanel.Dock WrapPanel环绕面板 通过Orientation属性设置排列的方向和栈面板类似不过环绕面板到最后的时候会自动换行，很类似listview 画布Canvas 是面板中比较简单的一种 类似html中的绝对定位后通过横纵坐标控制其位置（附加属性Canvas.Left 和Canvas.Top Canvas.Right Canvas.Bottom）该值与设备无关 InkCanvas允许画笔的Canvas 在WPF中实现允许使用墨迹的控件。如： 1: Window x:Class=WPFLayoutDemo.InkCanvasDemo 2: xmlns=/winfx/2006/xaml/presentation 3: xmlns:x=/winfx/2006/xaml 4: Title=InkCanvasDemo Height=200 Width=300 5: InkCanvas 6: InkCanvas.DefaultDrawingAttributes 7: DrawingAttributes Color=Red / 8: /InkCanvas.DefaultDrawingAttributes 9: Image Width=155 Height=155 InkCanvas.Left=10 InkCanvas.Top=10 10: Source=Logo2.png/ 11: /InkCanvas 12: /Window 其他的功能与Canvas相近。 Grid网格 网格是所有面板用最常用也最复杂的布局面板 类似的是Html中的Table标签也有行，单元格，跨行，跨列之说 思考：如上图所示如何把里面的信息分成左右两部分的？用栈面板可以实现么？ 尝试下stackpanel的布局是否可以实现 经过上面的尝试我们已经可以看出stackpanel如果这么使用的话是非常蹩脚的。而且很低效 Grid网格面板就可以轻易解决（table不就很easy嘛） 画分割线的话可以弄个很窄的行填充一个矩形即可 加背景样式可以用border控件 可以使用GridSplit控件结合Grid控件实现类似于Windows应用程序中SplitContainer的功能，如下面的应用程序： 要实现以下的功能： ButtonA和ButtonB、ButtonC组成的整体，可以左右拖动，改变两者的宽度 ButtonB和ButtonC可以上下拖动，改变两者的高度 实现以上功能的XAML代码如下： 1: Grid 2: Grid.ColumnDefinitions 3: ColumnDefinition Width=88* / 4: ColumnDefinition Width=Auto / 5: ColumnDefinition Width=190* / 6: /Grid.ColumnDefinitions 7: Grid.RowDefinitions 8: RowDefinition Height=172* / 9: RowDefinition Height=Auto / 10: RowD