WPF学习笔记——5)WrapPanel面板和DockPanel面板

上一节我们简单介绍了StackPanel的布局,为了能做出更好看的用户界面,往往一种布局容器是不够的,我们这里介绍了两种布局容器,分别为WrapPanel面板和DockPanel面板布局。

1、WrapPanel面板

WrapPanel面板以一行或者一列的形式来布置控件,当一行(列)放满之后自动转到下一行(列),可以利用Orientation属性设置按行布置还是按列布置。

我们同样的在工具箱中拖入WrapPanel面板控件,去掉长宽的固定限制,在面板中添加三个按钮组件,可以看到按钮默认按行分布,我们可以更改Orientation的值来改变其分布:

                WPF学习笔记——5)WrapPanel面板和DockPanel面板WPF学习笔记——5)WrapPanel面板和DockPanel面板

同时可以设置按钮的VerticalAlignment或者HorizontalAlignment属性更改按钮的对齐方式。

2、DockPanel面板

DockPanel面板则是根据外边缘来拉伸所包含的元素控件。

我们同样的在工具箱中拖入DockPanel面板控件,去掉长宽的固定限制,在面板中添加三个按钮组件,去掉按钮的长宽固定限制,我们利用组件的DockPanel.Dock属性来设置按钮的停靠方向:

WPF学习笔记——5)WrapPanel面板和DockPanel面板

3、嵌套布局容器

在实际应用中,我们很少单独用到某一种布局容器,更实用的是嵌套类型的布局容器。

这里我们新建一个窗口BasicDialogBox用来测试嵌套布局容器,在窗口中添加一个DockPanel面板,然后在DockPane面板中加入堆栈面板StackPanel,并设置DockPanel.Dock="Bottom"让堆栈面板向底部依靠。

然后在SrackPanel面板上放置两个按钮,设置堆栈面板的Orientation属性为水平排列,然后依次设置HorizontalAlignment和VerticalAlignment属性使StackPanel面板靠右下排列。

然后还可以在DockPanel面板中拖入一个文本框,设置DockPanel.Dock属性为top向上停靠,设置文本内容等属性。

然后将App.xaml中的光标处从MainWindow改为刚刚创建的窗口BasicDialogBox,下面是测试结果:

WPF学习笔记——5)WrapPanel面板和DockPanel面板

WPF学习笔记——5)WrapPanel面板和DockPanel面板