简单介绍WPF常用布局

2020-04-01  本文已影响0人  LaoK

1.Grid布局

  通过 ColumnDefinitions分隔列,通过RowDefinitions分隔行,如下设置将页面分成2x2的区域

<Grid.ColumnDefinitions>

            <ColumnDefinition/>

            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition/>

  </Grid.RowDefinitions>


Grid2x2区域

2.StackPanel 布局

StackPanel是以顺序的方式布局,上下分布或者左右分布,如下,新增三个button 

StackPanel布局代码

默认的方式是上下分布

上下分布

可以通过更改StackPanel 属性 Orientation="Horizontal"调整未左右布局

左右布局代码 左右布局显示

3.Canvas布局

Canvas是一个类似于坐标系的面板,所有的元素通过设置坐标来决定其在坐标系中的位置。具体表现为使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件

Canvas布局代码 Canvas布局显示

4. DockPanel布局

DockPanel支持让元素简单地停靠在整个面板的某一条边上,然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。

DockPanel有一个Dock附加属性,因此子元素用4个值来控制她们的停靠:Left、Top、Right、Bottom。Dock没有Fill值。作为替代,最后的子元素将加入一个DockPanel并填满所有剩余的空间,除非DockPanel的LastChildFill属性为false,它将朝某个方向停靠。

<DockPanel Grid.Row="1" Grid.Column="1">

            <Button Content="上" DockPanel.Dock="Top"></Button>

            <Button Content="下" DockPanel.Dock="Bottom"></Button>

            <Button Content="左" DockPanel.Dock="Left"></Button>

            <Button Content="右" DockPanel.Dock="Right"></Button>

  </DockPanel>

DockPanel默认显示 设置LastChildFill=False 靠边布局

5.WrapPanel

        WrapPanel布局面板将各个控件按照一定方向罗列,当长度或高度不够时自动调整进行换行换列。Orientation="Horizontal"时各控件从左至右罗列,当面板长度不够时,子控件就会自动换行,继续按照从左至右的顺序排列。Orientation="Vertical"时各控件从上至下罗列,当面板高度不够时,子控件就会自动换列,继续按照从上至下的顺序排列。

设置Horizontal Horizontal显示 Vertical显示
上一篇 下一篇

猜你喜欢

热点阅读