0%

【C#】WPF基础:页面布局篇

使用拖放控件的方法构筑应用界面时最尴尬的情况便是无法修改窗体的大小,即使强制修改窗体大小控件大小也依然不变,本篇所讲的页面布局就是为修正此问题而产生的解决方案。

拖放控件的方法为窗口添加的是控件的坐标位置,所以窗口缩放时空间位置仍然不变,如果我们不使用“绝对的”坐标,而使用“相对的”框架,那么在缩放窗口时控件也能随之缩放。 下面,主要介绍两种常用“框架”:StackPanel布局和Grid布局。

控件公用属性:

Margin:控件距离四周的边距 HorizontalAlignment:文本的水平布局,Center为居中 VerticalAlignment:文本的纵向布局,Center为居中

①StackPanel布局

Stack,即栈,可以理解为一种单向布局,可以将控件纵向或横向堆积,仅一维分布在布局中。

使用方法:

XAML:


(…控件)

Class: 栈布局名.Children.Add(空间名)

如: 效果:

常用属性:

Orientation:排列方式,枚举类型:Vertical(纵向排列) Horizontal(横向排列)

②Grid布局

Grid,即表格,可以理解为可同时设置多行多列的布局,控件可二维分布在布局中。

使用方法:

XAML:




….列数,有几列写几个
</Grid.ColumnDefinitions>


….行数,有几行写几个
</Grid.RowDefinitions>
<控件 Grid.Row=”行数” Grid.Column=”列数” />
(…控件)

Class: ColumnDefinition cdf = new ColumnDefinition();
表格布局名.ColumnDefinitions.Add(cdf);//添加一列
RowDefinition rdf = new RowDefinition();
表格布局名.RowDefinitions.Add(rdf);//添加一行
Grid.SetRow(控件名,行数);//设置控件行
Grid.SetColumn(控件名,列数);//设置控件列
表格布局名.Children.Add(控件名);//添加控件

需要注意的是控制空间位置的“行数”和“列数”是从零开始的。 如三行五列中间一个Button: 效果:

常用属性:

Grid.Width:列属性(ColumnDefinition)中可设置列的宽度,默认为等分 Grid.Height:行属性(RowDefinition)中可设置行的高度,默认为等分 Grid.ColumnSpan:控件跨列的个数,从所在列开始向右跨列 Grid.RowSpan:控件跨行的个数,从所在行开始向上跨行

③布局的嵌套

布局是可以相互嵌套的,Grid和StackPanel之间也可以互相嵌套,灵活使用以达到最佳效果。

补充:DockPanel布局

Dock即停驻、船坞,DockPanel是一种可以停驻于窗口四周的布局。

用法:

XAML:
<控件名 DockPanel.Dock=”Top”>//将该控件置于窗口顶部

效果:

因为没有其他控件,所以一整个窗体都是按钮。DockPanel布局中最新的控件拥有侵占最大区域的能力,如果再在底部添加一个按钮(如下图),底部按钮侵占大部分区域,顶部按钮在未设置width的情况下被压缩至最小。 可见,谁最大就看谁最后添加。

常用属性:

DockPanel.Dock:停驻位置:Top(顶部)、Bottom(底部)、Left、Right