WPF基本面板以及布局介绍

WPF中的基本面板,可以看成是一个个容器。他们里面可以装很多的控件。不同的面板,在不同的使用场景会有各自的优势,要学会视具体情况而进行选择。

Grid

Grid面板,可以通过行和列的定义,从而将面板划分成为很多个格子。而每一个格子,其实还可以嵌套grid面板,然后又可以划分。所以最后可以细分到整个窗口的每一个角落。可以说是非常好用,我也经常用。 其宽高有三种长度格式:固定长度、自动长度、比例长度。示例都有啦,自动对号入座即可。

<Grid>
    <Grid.RowDefinitions>
        <!--固定高度-->
        <RowDefinition Height = "100"/> //
        <!--剩余的高度,占其中1份-->
        <RowDefinition Height = "1*"/>  
        <!--剩余的高度,占其中2份-->
        <RowDefinition Height = "2*"/>  
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <!--自动宽度Auto,随里面控件大小的最小值-->
        <ColumnDefinition Width = "Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
</Grid>

这样我们就定义了三行两列的布局。我们也可以定义行(列)的高(宽)。其中还有MaxHeight或者MAXWidth或者MinHeight或者MinWidth。结果如图: 注释:由于第一列宽度设置是Auto,而且没有放置控件,所以在图里没有显示

放置组件

在具体某一个各自中放置组件,在其属性Grid.Row或者Grid。Column说明这个组件放在其所在Grid面板的哪一行哪一列就可以了!

Grid优点

  1. 可以通过行和列的划分,以及Grid里再嵌套Grid从而把面板划分得无比细致。规范整洁,方便控制。

Grid缺点

  1. 每次划分都要写GridDefinition,定义行和列,过于麻烦。如果在某些地方,想要做一个竖向排列或者横向排列的东西,当然是想用StackPanel省省力气。还有,如果是要做像电影票选座那样,每个座位是一个一样的Button,那几十个座位,既要定义行列,又要在Button里面呢说明它是哪一列的

UniFormGrid

UniformGrid是继承于Panel的,Grid的简化版。可以快速定义行列,但是每个格子只有固定大小。

<UniformGrid Rows="3" Columns="3">
     <Button Content="B" Margin="10 10"/>
     <Button Content="B" Margin="10 10"/>
     <Button Content="B" Margin="10 10"/>
     <Button Content="B" Margin="10 10"/>
     <Button Content="B" Margin="10 10"/>
     <Button Content="B" Margin="10 10"/>
     <Button Content="B" Margin="10 10"/>
     <Button Content="B" Margin="10 10"/>
     <Button Content="B" Margin="10 10"/>
 </UniformGrid>

UniformGrid优点

  1. 当然是快速定义行列!而且每个行列大小相同。非常适用于电影票选座界面设计。

UniformGrid缺点

  1. 每个格子的大小都一样,不能作调整。

StackPanel

正如其名,像一个栈一样的Panel(面板或者容器)。里面的空间会从上到下放置。当然我们也可以设置Orientation属性设置横向或者竖向排列。

<StackPanel Orientation="Horizontal">
    <Button Content="按钮"/>
    <Button Content="按钮"/>
    <Button Content="按钮"/>
</StackPanel>

放置组件

组件按程序里的顺序,从上到下(Vertical)或者从左到右(Horizontal)放置。

StackPanel优点

  1. 能够自动帮助你排版。有居中,靠左或者靠右三种方式放置组件。

StackPan缺点

  1. 比如,我们要搞个两行两列的东西,就比较麻烦。要么设置两个StackPanel,但是调整组件的布局,对齐的时候,发现还是不如Grid方便。

DockPanel

DockPanel具有停靠的功能。可以让组件停靠在上(Top)左(Left)下(Bottom)右(Right)。其他面板不好做。Grid只能划分,StackPanel只能让组件往一边靠。

<DockPanel>
     <Button Content="Top" DockPanel.Dock="Top"/>
     <Button Content="Left" DockPanel.Dock="Left"/>
     <Button Content="Right" DockPanel.Dock="Right"/>
     <Button Content="Bottom" DockPanel.Dock="Bottom"/>
     <Button Content="Center"/>
 </DockPanel>

DockPanel优点

  1. 它的功能就是优点,可以停靠。在菜单栏或者顶部搜索栏的时候,比较有用!

布局常用属性

Margin

<!--相当于Margin = "1 1 1 1"->
<Button Margin = "1">

<!--相当于Margin = "1 2 1 2"->
<Button Margin = "1 2">

<Button Margin = "1 2 3 4">

Margin有四个值,分别对应Left,Top,Right,Bottom四个方位的距离,其中距离是指控件边缘离外部的距离。

这个用来做控件的微调十分有用。由于面板知识不牢靠,所以在使用的时候,常常离预期效果差那么一点。这个时候,试用一下Margin来微调,就很好用了。但是缺点也很明显,由于是固定的样式所以不能自适应,如果整体面板有一点改动,那具体的每个控件的Margin可能都要修改,这样做起来挺麻烦。

HorizontalAlignment和VerticalAlignment

HorizontalAlignment="Center" VerticalAlignment="Center"

这个是用来调整竖向和横向的居中或者左对齐或者右对齐的。


本文章使用limfx的vscode插件快速发布