1.Grid布局
通过 ColumnDefinitions分隔列,通过RowDefinitions分隔行,如下设置将页面分成2x2的区域
Grid2x2区域<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
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显示
网友评论