wpf第二章布局

1、布局与输入1. 布局基础a WPF提供了一套面板（Panel），它们是一系列具有特殊用途的用户界面元素b StackPanel-栈面板 WrapPanel环绕模板 DockPanel停靠模板 Grid网格 Canvas 画布 UniformGrid 均布网格c 以上描述了WPF中的主要面板类型，无论使用哪种面板，它们都遵循相同的基本规则：元素的位置通常是由包含它们的面板所定 2. 栈面板a 是一种非常简洁的面板，它的作用是将所包含的元素按一行或一列的方式排列。通常不会用栈面板来布局整个用户界面。它的最大用途就是排列一些比较小的元素，好比html里的ul无序列表WPF通过两种方法来解决元素的布局

2、问题，该策略取决于可用空间大小是否固定。SizeToContent="Height"设置某个空间的大小是不是由内容制定 相关的属性还有margin 和 padding，这样设置的控件都会通过窗体大小的变化而产生相应的变化，该值与设备无关如果设置height 和 width则是固定大小3. DockPanela 为了满足Dock的停靠要求必须在子控件上使用附加属性。DockPanel.Dock4. WrapPanel环绕面板a 通过Orientation属性设置排列的方向和栈面板类似不过环绕面板到最后的时候会自动换行，很类似listview5. 画布Canvasa 是面板中比

3、较简单的一种b 类似html中的绝对定位后通过横纵坐标控制其位置（附加属性Canvas.Left 和Canvas.Top Canvas.Right Canvas.Bottom）该值与设备无关6. InkCanvas允许画笔的Canvas在WPF中实现允许使用墨迹的控件。如：1: <Window x:Class="WPFLayoutDemo.InkCanvasDemo"2: xmlns="3: xmlns:x="4: Title="InkCanvasDemo" Height="200" Width="

4、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=&

5、quot;Logo2.png"/>11: InkCanvas>12: Window>其他的功能与Canvas相近。7. Grid网格 a 网格是所有面板用最常用也最复杂的布局面板b 类似的是Html中的Table标签也有行，单元格，跨行，跨列之说c 思考：如上图所示如何把里面的信息分成左右两部分的？用栈面板可以实现么？d 尝试下stackpanel的布局是否可以实现e 经过上面的尝试我们已经可以看出stackpanel如果这么使用的话是非常蹩脚的。而且很低效f Grid网格面板就可以轻易解决（table不就很easy嘛）g 画分割线的话可以弄个很窄的行填充一个矩形即

6、可h 加背景样式可以用border控件可以使用GridSplit控件结合Grid控件实现类似于Windows应用程序中SplitContainer的功能，如下面的应用程序：要实现以下的功能： ButtonA和ButtonB、ButtonC组成的整体，可以左右拖动，改变两者的宽度 ButtonB和ButtonC可以上下拖动，改变两者的高度 实现以上功能的XAML代码如下：1: <Grid>2: <Grid.ColumnDefinitions>3: <ColumnDefinition Width="88*" />4: <ColumnDe

7、finition Width="Auto" />5: <ColumnDefinition Width="190*" />6: Grid.ColumnDefinitions>7: <Grid.RowDefinitions>8: <RowDefinition Height="172*" />9: <RowDefinition Height="Auto" />10: <RowDefinition Height="90*" />11

8、: Grid.RowDefinitions>12: 13: <Button Content="ButtonA" Margin="3" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" />14: <Button Content="ButtonB" Margin="3" Grid.Row="0" Grid.Column="2" />15: <

9、Button Content="ButtonC" Margin="3" Grid.Row="2" Grid.Column="2" />16: 17: <GridSplitter Width="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 18: Grid.Row="0" Grid.Column="1" Grid.RowSpan=&

10、quot;3"> GridSplitter>19: <GridSplitter Height="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 20: Grid.Row="1" Grid.Column="2"> GridSplitter>21: Grid>其核心想法为： 定义3*3的表格，其中放置分割线的列（下标为1）和行（下标为1）的宽度和高度设置为Auto ButtonA放置在Row=0、Column=0、RowSpan3的单元格中 ButtonB放置在Row=0、Column=2的单元格中 ButtonC放置在Row=2、Column=2的单元格中 竖直分割线放置在Row=0、Column=1、ColSpan3的单元格中 水平分割线放置在Row=1、Column=2的单元格中 如下图所示：8. 均布Grid 聪明的grida 通过设置Rows和Columns即可甚至可以不设置9. ViewBox视图框a S