EKsumic's Blog

let today = new Beginning();

Click the left button to use the catalog.

OR

C#Winform向WPF过渡入门(三)

总目录:https://www.v2know.com/MainPage/Category/WPF

常用的布局容器:

  • Grid
  • StackPanel
  • WrapPanel
  • DockPanel
  • UniformGrid

Grid

Grid为WPF中最常用的布局容器,作为View中的主要组成部分,负责框架中整体的页面布局。

Grid.RowDefinitions:可以创建任意多行。

Grid.ColumnDefinitions:可以创建任意多列。

ShowGridLines:可以设置边距线的显示。

什么是设置边距线的显示?

举个例子:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions> 
</Grid>

这样将把Window分割成两行两列。

这个时候设计器是显示分割的,实际上你必须再在<Grid>里面添加ShowGridLines="True"才会在运行时显示。

一般不显示边距线。(除非你要测试用)

在之前的设计代码基础上,你还可以对<RowDefinition/>设计Height,可以是数值或百分比,或倍数。

重点提一下倍数,你可以写<RowDefinition Height="2*" />——这表示该行Height是另外一行Height的两倍。

倍数写法,不知道在HTML里面有没有,反正我是没用过,这还是第一次见。


StackPanel

Horizontal为水平布局, Vertical为垂直布局。

Orientation:用于设置StackPanel的元素排列方式,默认以垂直的方式布局。

使用方法:

<StackPanel Orientation="Horizontal">
            <Button Width="40" Height="40" Background="Red"/>
            <Button Width="40" Height="40" Background="Beige"/>
            <Button Width="40" Height="40" Background="DarkBlue"/>
            <Button Width="40" Height="40" Background="Pink"/>
            <Button Width="40" Height="40" Background="DarkGray"/>
</StackPanel>

它只是个排列容器,像以上xaml的排列,按钮会靠左边开始按书写顺序排列,上下是居中的。

而在不设置Orientation,默认是垂直布局,顶着Window的顶部边开始从上往下排列。

注意,这些按钮之间是无间距的,它们完全贴合在一起。(这很HTML,非要说的话,这个玩意儿有点像div)


WrapPanel

这个控件就得和上一个控件一起说了,

它与StackPanel的区别在于——它会换行。

嘛,看名称也能看出来罢。以前学C#学到堆和栈,在画示意图的时候,堆就是一堆,栈就像搭积木一样竖直得老高。

而这里的StackPanel也是直来直去的。(甚至只要突出边界,因为只要有一点Space,它就会强行插入,不管溢出)

WrapPanel里面能元素会自动换行,能自动展示出一个比较美观的排列方式。


DockPanel

它有4个枚举值Top、Right、Bottom、Left用于设置元素的锚定位置。

<DockPanel>
            <Button Width="40" Height="40" Background="Red"/>
            <Button Width="40" Height="40" Background="Beige"/>
            <Button Width="40" Height="40" Background="DarkBlue"/>
            <Button Width="40" Height="40" Background="Pink"/>
</DockPanel>

当不设置DockPanel内4个元素的锚定值的时候,默认LastChild元素会填充最后的空间。(直接居中)

<DockPanel LastChildFill="False">
            <Button Width="40" Height="40" Background="Red"/>
            <Button Width="40" Height="40" Background="Beige"/>
            <Button Width="40" Height="40" Background="DarkBlue"/>
            <Button Width="40" Height="40" Background="Pink"/>
</DockPanel>

我们可以通过设置LastChildFill="False"来调整它。

一般的使用方式:

<DockPanel LastChildFill="False">
            <Button DockPanel.Dock="Top" Width="40" Height="40" Background="Red"/>
            <Button DockPanel.Dock="Bottom" Width="40" Height="40" Background="Beige"/>
            <Button DockPanel.Dock="Left" Width="40" Height="40" Background="DarkBlue"/>
            <Button DockPanel.Dock="Right" Width="40" Height="40" Background="Pink"/>
</DockPanel>

不得不说,写WPF程序,感觉IDE的作用太过强劲了,我之前写C#的时候还没这么多自动补全,一些XAML全是自动补全。(草)


UniformGrid

这个可以用来定义Row和Column,与之前不同的是,它无法定义Row和Column的Size。

它的优点是自动化排列和大小。(其实更像自动化的表格)

这让我想到了Winform里面一个控件叫FlowLayoutPanel,也是同样的功能(指自动排列),我还写过这个控件的Scroll版本(为了实现PCR里面的角色选择)。


总结

差不多了,真的和HTML里面div一样了。


下一篇:

关于WPF程序的样式设计和编写

This article was last edited at 2020-12-27 19:14:00

* *