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

         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  控制流延伸的方向 ,会排列尽可能多的控件,排不下的控件将会新起一行或一列继续排列

未完成

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值