DockPanel

DockPanel定义一个区域在此区域中您可以使子元素通过描点的形式排列。停靠面板其实就是在WinForm类似于Dock属性的元素。DockPanel会对每个子元素进行排序并停靠在面板的一侧多个停靠在同侧的元素则按顺序排序最后一个元素填充这个Panel这个需要设置LastChildFill属性为 True。对于在DockPanel中的元素的停靠属性可以通过Panel.Dock的附加属性来设置.要实现的效果如下图用XAML和C#实现同一效果XAML代码实现Window xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml x:ClassWPFLayoutDemo.DockPanelDEMO x:NameWindow TitleDockPanelDEMO WindowStartupLocationCenterScreen Width640 Height480 DockPanel WidthAuto HeightAuto LastChildFillTrue Rectangle FillBeige StrokeBlanchedAlmond Height180 DockPanel.DockTop/ Rectangle FillAzure StrokeOrange / /DockPanel /WindowC#代码实现namespace WPFLayoutDemo { public partial class DockPanelDEMOCodeBehind { public DockPanelDEMOCodeBehind() { this.InitializeComponent(); DockPanel dp new DockPanel(); dp.LastChildFill true; dp.Width Double.NaN; //这个就相当于在XAML中设置WidthAuto dp.Height Double.NaN; //这个就相当于在XAML中设置HeightAuto //把dp添加为窗体的子控件 this.Content dp; //添加Rectangles Rectangle rTop new Rectangle(); rTop.Fill new SolidColorBrush(Colors.BlanchedAlmond); rTop.Stroke new SolidColorBrush(Colors.BlanchedAlmond); rTop.Height 180; dp.Children.Add(rTop); rTop.SetValue(DockPanel.DockProperty,Dock.Top); Rectangle rFill new Rectangle(); rFill.Fill new SolidColorBrush(Colors.Azure); rFill.Stroke new SolidColorBrush(Colors.Azure); dp.Children.Add(rFill); } } }八. GridGrid和其他各个Panel比较起来功能最多也最为复杂它由Grid.ColumnDefinitions列元素集和Grid.RowDefinitions行元素集合两种元素组成。而放置在Grid面板中的控件元素都必须显示采用附加属性语法定义其放置所在的行和列否则元素均默认放置在第0行第0列。由于Grid的组成并非简单的添加属性标记来区分行列这也使得用户在实际应用中可以具体到某一单元格中所以布局起来就很精细了。Grid的列宽与行高可采用固定、自动、按比列三种方式定义Grid Grid.RowDefinitions RowDefinition HeightAuto / RowDefinition HeightAuto / RowDefinition Height* / RowDefinition Height40 / /Grid.RowDefinitions Grid.ColumnDefinitions ColumnDefinition WidthAuto / ColumnDefinition Width300 / /Grid.ColumnDefinitions /Grid第一种固定长度——宽度不够会裁剪不好用。单位pixel。第二种自动长度——自动匹配列中最长元素的宽度。第三种比例长度——*表示占用剩余的全部宽度两行都是*将平分剩余宽度像上面的一个2*一个*表示前者2/3宽度。跨越多行和多列Rectangle FillSilver Grid.Column1 Grid.ColumnSpan3/使用Grid.ColumnSpan和Grid.RowSpan附加属性可以让相互间隔的行列合并所以元素也可以跨越多个单元格。使用GridSplit分割GridSplitter Height6 VerticalAlignmentStretch HorizontalAlignmentStretch Grid.Row2 Grid.Column2/GridSplitter使用GridSplit控件结合Grid控件实现类似于WinForm中SplitContainer的功能这个大家在WinForm当中经常用到我们也不多做介绍。要实现的效果如下图用XAML和C#实现同一效果XAML代码实现Window xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml x:ClassWPFLayoutDemo.GridDEMO x:NameWindow TitleGridDEMO WindowStartupLocationCenterScreen Width640 Height480 Grid WidthAuto HeightAuto Grid.ColumnDefinitions ColumnDefinition Width139/ ColumnDefinition Width184*/ ColumnDefinition Width45* / ColumnDefinition Width250*/ /Grid.ColumnDefinitions Rectangle FillAzure Grid.ColumnSpan2 Margin0,0,21,0 / Rectangle FillSilver Grid.Column1 Grid.ColumnSpan3/ /Grid /WindowC#代码实现namespace WPFLayoutDemo { public partial class GridDEMOCodeBehind { public GridDEMOCodeBehind() { this.InitializeComponent(); Grid grid new Grid(); grid.Width Double.NaN; //这个就相当于在XAML中设置WidthAuto grid.Height Double.NaN; //这个就相当于在XAML中设置HeightAuto //把grid添加为窗体的子控件 this.Content grid; //列一 ColumnDefinition cd1 new ColumnDefinition(); cd1.Width new GridLength(139); grid.ColumnDefinitions.Add(cd1); //列二 ColumnDefinition cd2 new ColumnDefinition(); cd2.Width new GridLength(1, GridUnitType.Star); grid.ColumnDefinitions.Add(cd2); //列三 ColumnDefinition cd3 new ColumnDefinition(); cd3.Width new GridLength(2, GridUnitType.Star); grid.ColumnDefinitions.Add(cd3); //把单元格添加到grid中 Rectangle r1c1 new Rectangle(); r1c1.Fill new SolidColorBrush(Colors.Azure); r1c1.SetValue(Grid.ColumnProperty, 0); r1c1.SetValue(Grid.RowProperty, 0); grid.Children.Add(r1c1); Rectangle r1c23 new Rectangle(); r1c23.Fill new SolidColorBrush(Colors.Silver); r1c23.SetValue(Grid.ColumnProperty, 1); r1c23.SetValue(Grid.ColumnSpanProperty, 2); grid.Children.Add(r1c23); } } }九 UniformGrid介绍了前面的Grid,接下来的这个UniformGrid 就太简单了均布网格的是Grid的简化版本每个单元格的大小相同不用在定义行列集合。均布网格每个单元格只能容纳一个元素将自动按照定义在其内部的元素个数自动创建行列并通常保持相同的行列数。要实现的效果如下图用XAML和C#实现同一效果XAML代码实现Window x:ClassWPFLayoutDemo.UniformGridDEMO xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml TitleUniformGridDEMO Height300 Width300 UniformGrid Columns2 Rows2 NameuniformGrid1 Rectangle Margin10,10,10,10 Fill Gray/ Rectangle Margin10,10,10,10 Fill Gray / Rectangle Margin10,10,10,10 Fill Gray / Rectangle Margin10,10,10,10 Fill Gray / /UniformGrid /WindowC#代码实现namespace WPFLayoutDemo { public partial class UniformGridDEMOCodeBehind : Window { public UniformGridDEMOCodeBehind() { InitializeComponent(); UniformGrid wp new UniformGrid(); //把wp添加为窗体的子控件 this.Content wp; wp.Margin new Thickness(0, 0, 0, 0); wp.Background new SolidColorBrush(Colors.White); //遍历增加Rectangles Rectangle r; for (int i 0; i 10; i) { r new Rectangle(); r.Fill new SolidColorBrush(Colors.Gray); r.Margin new Thickness(10, 10, 10, 10); wp.Children.Add(r); } } } }十. ViewBoxViewBox这个控件通常和其他控件结合起来使用是WPF中非常有用的控制。定义一个内容容器该容器可拉伸和缩放单个子元素以填满可用空间。一个 Viewbox 只能具有一个 Child。如果添加一个附加 Child会导致一个运行时 ArgumentException错误。我们用得最多的首先是Stretch属性然后是StrctchDirection属性关于这两个元素大家可以运行我们的代码然后改变设置就可以看到效果。要实现的效果如下图用XAML和C#实现同一效果XAML代码实现Window x:ClassWPFLayoutDemo.ViewBoxDemo xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml TitleViewBoxDemo Height342 Width535 Viewbox StretchUniform Button ContentHello,Knights Warrior / /Viewbox /WindowC#代码实现namespace WPFLayoutDemo { public partial class ViewBoxDEMOBehind : Window { public ViewBoxDEMOBehind() { this.InitializeComponent(); Viewbox vb new Viewbox(); vb.Stretch Stretch.Uniform ; //把vb添加为窗体的子控件 this.Content vb; //Button1 Button b1 new Button(); b1.Content Hello,Knights Warrior; vb.Childb1; } } }