提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  .Net

当前栏目

WPF 布局元素

WPF
2023-04-22 10:58:12 时间

1.Grid 网格

类似Table，可以自定义行列数量

 

2.StackPanel 栈式面板

元素竖直排列

 

3.Canvas 画布

 

4.DockPanel 泊靠面板

元素可以选择泊靠方向

 

5.WrapPanel 自动折行面板

元素排满一行后自动换行。类似流动式布局。

 

【Grid】

定义行列

<Grid x:Name="gridMain">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
    </Grid>

或者在后台 添加一列，用到了上面取的名字

//添加一列
            this.gridMain.ColumnDefinitions.Add(new ColumnDefinition());

 

1.定义Grid高度，绝对值直接写数字即可，默认单位是px，比例值可以写数字加“ * ”。

比如

<Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition Height="4*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

第一个高度是25px，其他部分分为5部分，其余两个各占4和1。

这里做了一个综合训练，是一个提交框。里面的核心是将界面使用Grid行和列布局，甚至将空隙也做成了网格，方便随时修改高度。

而不是将每个控件都声明Margin。这样不利于维护。

另外需要注意：

1.行和列的序号都是从0开始

2.每个控件都声明具体的位置，用Grid.Column和Grid.Row来声明。序号0的话可以省略

3.跨行和跨列使用Grid.RowSpan和Grid.ColumnSpan。

4.这里使用Width="Auto"和MinWidth控制显示宽度

代码如下：

<Grid x:Name="gridMain">
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition Height="4"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="4"/>
            <RowDefinition Height="25"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" MinWidth="120"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="4"/>
            <ColumnDefinition Width="80"/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="请选择部门" 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 Grid.Column="2" Grid.Row="4" Content="清除"/>
        <Button Grid.Column="4" Grid.Row="4" Content="提交"/>
    </Grid>

显示效果：

 

 

【StackPanel】

特点是元素竖直排列，删除了其中一个后面的会自动补上。

案例

<GroupBox Header="请选择最帅的人" BorderBrush="black" Margin="5">
            <StackPanel Margin="5">
                <CheckBox Content="A.吴彦祖"/>
                <CheckBox Content="B.彭于晏"/>
                <CheckBox Content="C.阿杜"/>
                <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                    <Button Content="确定"/>
                </StackPanel>
            </StackPanel>
        </GroupBox>

显示结果

 

 需要注意的是：

1.这里的CheckBox和Button都是Content显示内容。

2.GroupBox用Header显示标题

 

【Canvas】

适用于不常改动，需要大量坐标确定位置的布局。

声明在Canvas内的控件，比如Button、TextBox、TextBlock等，都可以使用Canvas.Left、 Canvas.Top来确定坐标位置

 

【DockPanel】

DockPanel内部的元素会向指定的方向延伸，直到占满整个面板。

 代码：

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

显示：

 

 如图，三个TextBox将整个面板占满了。

 

【WrapPanel】

元素自动换行

<WrapPanel>
            <Button Width="50" Height="50" Content="OK"/>
            <Button Width="50" Height="50" Content="OK"/>
            <Button Width="50" Height="50" Content="OK"/>
            <Button Width="50" Height="50" Content="OK"/>
            <Button Width="50" Height="50" Content="OK"/>
            <Button Width="50" Height="50" Content="OK"/>
            <Button Width="50" Height="50" Content="OK"/>
            <Button Width="50" Height="50" Content="OK"/>
        </WrapPanel>

显示

 

相关文章