WPF8 UI布局

WPF中的布局元素有如下几个:

1、Grid:网格。可以自定义行和列并通过行列的数量、行高和列宽来调整控件的布局。近似于HTML中的Table。

2、StackPanel:栈式面板。将包含的元素在竖直或水平方向上排成一条直线,当移除一个元素后,后面的元素会自动向前移动以填充空缺。

3、Canvas:画布。内部元素可以使用以像素为单位的绝对坐标进行定位,类似于WindowsForm的布局方式。

4、DockPanel:泊靠式面板。内部元素可以选择泊靠方向,类似于在WindowsForm编程中设置控件的Dock属性。

5、WrapPanel:自动拆行面板。内部元素在排满一行后能够自动拆行,类似于HTML中的流式布局。

一、Grid

Grid元素会以网格形式对内容元素进行布局。

Grid特点为:

1、可以定义任意数量的行和列,非常灵活

2、行的高度和列的宽度可以使用绝对数值、相对比例或自动调整的方式进行精确设定,并可以设置最大最小值。

3、内部元素可以设置自己的所在行和列,还可以设置自己纵向跨几行、横向跨几列。

Grid布局适合于:

1、UI布局的大框架设计

2、大量UI元素需要成行或者成列对齐的情况

3、UI整体尺寸改变时,元素需要保持固有的高度和宽度比例

4、UI后期可能有较大变更或扩展。

定义Grid的行和列

Grid类具有ColumnDefinitions和RowDefinitions两个属性,分别用于定义Grid有多少列、多少行。实际工作中,还可以进一步定制每行每列的高和宽,可以设置3类值:

1、绝对值,为double数值加上单位后缀,例如30px,0.5cm

2、比例值,为double数值后加上一个*

3、自动值,字符串Auto

绝对值一旦设定就不会改变,所以又称固定值,适用于控件狂傲都不需要改变的情况。比例值是百分比,2*表示占据剩余未分配数值的20%,例如一个150px高度的Grid,有5行,其中2行使用25px的绝对值,剩下三行分别是2*,1*,2*,则实际所占元素分别为(150-50)/5再乘以系数,为40px,20px,40px。

如果使用自动值Auto为行高或列宽,那么行高或列宽的实际值将有行列内控件的高度和宽度决定,即控件会把行列撑到合适的宽度和高度,如果行列中没有控件,则行高和列宽均为0.

行和列都是从0开始计数;

指定一个控件在某行,就为这个控件的标签添加Grid.Row=“行编号”这样一个Attribute,若行编号为0(即控件位于首行)则可以省略这个Attribute,列同理。

若控件要跨多个行和列,则使用Grid.RowSpan="行数"和Grid.ColumnSpan=“列数”两个Attribute。

<Window x:Class="WPF_XAML_4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="240" Width="400"
        MinHeight="200" MinWidth="340" MaxHeight="400" MaxWidth="600">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="4"/>
            <ColumnDefinition Width="80"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition Height="4"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="4"/>
            <RowDefinition Height="25"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Select Department and Comment:" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center"/>
        <ComboBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4"/>
        <TextBox Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="5" BorderBrush="Black"/>
        <Button Content="Submit" Grid.Column="2" Grid.Row="4"/>
        <Button Content="Delete" Grid.Column="4" Grid.Row="4"/>
    </Grid>
</Window>

二、StackPanel

StackPanel可以把内部元素在纵向或横向上紧凑排列。形成栈式布局,当移除前面的元素,后面的元素会整体向前移动、补占原有元素的控件。

StackPanel适合于:

1、同类元素需要紧凑排列(菜单或列表)

2、移除其中的元素后能够自动补缺的布局或动画

StackPanel使用3个属性来控制内部元素的布局,orientation,horizontalAlignment、verticalAlignment,后两者绝对内部元素水平和垂直方向上的对齐方式,orientation则决定内部元素是横向累积还是纵向累积,可以取Horizontal或Vertical两个可取值。

三、Canvas

Canvas即画布,Canvas类似于Winform的布局,控件被放于Canvas时,就会被附加上CanvasX和CanvasY属性,Canvas适合于一些设计基本上不会有改动的小型布局,例如logo和艺术性较强的布局,依赖于横纵坐标的动画,需要大量使用横纵坐标进行绝对点定位的布局。

四、DockPanel

DockPanel内的元素会被附加上DockPanel.Dock这个属性,这个属性的数据类型为Dock枚举,Dock枚举可以取Left、Top、Right和Bottom四个值。根据Dock属性值,DockPanel内的元素会向指定方向累积。

        <DockPanel>
            <TextBox DockPanel.Dock="Top" Height="25" BorderBrush="Black"></TextBox>
            <TextBox DockPanel.Dock="Left" Width="150" BorderBrush="Black"></TextBox>
            <TextBox BorderBrush="Black"/>
        </DockPanel>

 五、WrapPanel

WrapPanel内部采用的是流式布局。WrapPanel使用Orientation属性来控制流延伸的方向,使用HorizontalAligment和VerticalAlignment两个属性控制内部控件的对齐,在流延伸的方向上,WrapPanel会排列尽可能多的控件,排不下的控件将会新起一行或一列继续排列。

原文地址:https://www.cnblogs.com/NicolasLiaoran/p/13037937.html