WPF深入浅出学习笔记 UI布局

最新推荐文章于 2023-06-19 15:05:21 发布

陈先生☁

最新推荐文章于 2023-06-19 15:05:21 发布

阅读量529

点赞数 1

分类专栏： WPF 文章标签： wpf c#

本文链接：https://blog.csdn.net/qq_45057298/article/details/121657169

版权

WPF 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

WPF布局元素：Grid、StackPanel、DockPanel、Canvas、WarpPanel

一、 Grid：网格。可以通过自定义行列并通过行列的数量、行高和列宽来调整控件的布局。

1、Grid行列的定义

   <Grid>
        <!--划分列-->
        <Grid.ColumnDefinitions>
            <!--有多少个<ColumnDefinition/>则代表分为几列-->
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <!--划分行-->
        <Grid.RowDefinitions>
            <!--有多少个<RowDefinition/>则分为多少列-->
            <RowDefinition />
            <RowDefinition/>
        </Grid.RowDefinitions>
    </Grid>
</Window>

2、列宽和行高的控制，注意列只能控制宽度，行只能控制高度

对于行高和列宽的我们可以设置为三类值：

绝对值：double 数值加单位后缀

比例值：double数值加一个星号 *

自动值：字符串Auto

三者对比：当改变容器的尺寸时，使用绝对值的行高列宽不会改变而使用比例值的行高会保持固有的比例。当使用自动值为行高列宽赋值时，行高列宽的实际值将由行列内控件的高度和宽度决定，如果行列中没有控件则行高列宽均为0

行高：

 <!--划分行-->
        <Grid.RowDefinitions>
            <!--有多少个<RowDefinition/>则分为多少行-->
            <RowDefinition Height="25"/>
            <RowDefinition Height="4"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="4"/>
            <RowDefinition Height="25"/>
        </Grid.RowDefinitions>

列宽：

 <!--划分列-->
        <Grid.ColumnDefinitions>
            <!--有多少个<ColumnDefinition/>则代表分为几列-->
            <ColumnDefinition Width="Auto" MinWidth="120" />
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="4"/>
            <ColumnDefinition Width="80"/>
        </Grid.ColumnDefinitions>

3、插入控件

控件相关知识：

WPF深入浅出学习笔记控件_陈先生☁的博客-CSDN博客

  <!--使用Grid.Column="" Grid.Row=""为控件指定行列-->
        <TextBlock Text="请选择您的部门并留言;" 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 Grid.Column="2" Grid.Row="4" Content="确定"/>
        <Button Grid.Column="4" Grid.Row="4" Content="清除"/>

二、StackPanel（堆栈面板）

1、三个属性

2、特点和适用场合

特点：移除元素后，它后面的元素会整体向前移动、补占原有元素的空间

适用场合：

同类元素需要紧凑排列（如制作菜单表格）

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

3、实践：选择题界面制作

<Window x:Class="StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:StackPanel"
        mc:Ignorable="d"
        Title="选择题" Height="190" Width="300">
    <Grid>
        <GroupBox Header="请选择没有错别字的成语" BorderBrush="Black" Margin="5">
            <StackPanel Margin="5">
                <CheckBox Content="A.迫不及待"/>
                <CheckBox Content="B.背曲一指"/>
                <CheckBox Content="C.陈词烂调"/>
                <CheckBox Content="D.唉声叹气"/>
                <CheckBox Content="E.不可礼喻"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Content="清空" Width="60" Margin="5"/>
                    <Button Content="确定" Width="60" Margin="5"/>
                </StackPanel>
            </StackPanel>
        </GroupBox>
    </Grid>
</Window>

三、WrapPanel

特点：流布式布局，Orientation 控制流延伸的方向，会排列尽可能多的控件，排不下的控件将会新起一行或一列继续排列

未完成