WPF——02_布局控件

49 阅读2分钟

创建WPF窗口

UniformGrid(均分布局)

image.png UniformGrid(均分布局) 字面意思就是将一个界面平均分成若干个单元格

UniformGrid控件提供了3个属性,分别是FirstColumn、Columns 、Rows,FirstColumn设置从第一行开始空

image.png 这里没有设置UniformGrid的属性的效果,它会根据子元素的数量和UniformGrid自身的尺寸来决定行数和列数

这里我们设置横3竖3的9个单元格,然后从第2个单元格开始空,就可以达成以下效果

image.png


StackPanel(栈式布局)

StackPanel用于垂直或水平的堆叠内部元素,StackPanel内部有Orientation枚举属性,用于设置内部子元素在StackPanel中垂直或者水平排列,水平排列(Horizontal)和垂直排列(Vertical) 默认值是垂直排列(Vertical)

 <StackPanel>
     <Button Content="按键1" Width="120" Height="80" Margin="20"/>
     <Button Content="按键2" Width="120" Height="80" Margin="20"/>
     <Button Content="按键3" Width="120" Height="80" Margin="20"/>
     <Button Content="按键4" Width="120" Height="80" Margin="20"/>
 </StackPanel>

image.png

 <StackPanel Orientation="Horizontal">
     <Button Content="按键1" Width="120" Height="80" Margin="20"/>
     <Button Content="按键2" Width="120" Height="80" Margin="20"/>
     <Button Content="按键3" Width="120" Height="80" Margin="20"/>
     <Button Content="按键4" Width="120" Height="80" Margin="20"/>
 </StackPanel>

将Orientation属性设置为Horizontal后,UI页面从垂直转换为水平排列

image.png


# WrapPanel(瀑布流布局)

WrapPanel控件是将子控件按从左到右顺序排列

 <WrapPanel Orientation="Horizontal">
     <Button Content="按键1" Width="120" Height="80" Margin="20"/>
     <Button Content="按键2" Width="120" Height="80" Margin="20"/>
     <Button Content="按键3" Width="120" Height="80" Margin="20"/>
     <Button Content="按键4" Width="120" Height="80" Margin="20"/>
     <Button Content="按键5" Width="120" Height="80" Margin="20"/>
     <Button Content="按键6" Width="120" Height="80" Margin="20"/>
     <Button Content="按键7" Width="120" Height="80" Margin="20"/>
     <Button Content="按键8" Width="120" Height="80" Margin="20"/>
 </WrapPanel>

image.png


DockPanel(停靠布局)

DockPanel提供一个枚举依赖属性,Dock 这个属性是附加到子元素身上的,用来指示子元素在DockPanel显示停靠方位,其值分为Left,Right,Top,Bottom,DockPanel还提供了一个LastChildFill 属性,用来指示最后一个子元素是否填满剩余的空间

 <DockPanel>
     <Button DockPanel.Dock="Left" Content="按键1" Margin="5" />
     <Button DockPanel.Dock="Top" Content="按键2" Margin="5" />
     <Button DockPanel.Dock="Right" Content="按键3" Margin="5" />
     <Button DockPanel.Dock="Bottom" Content="按键4" Margin="5" />
     <Button  Content="按键5" Margin="5" />
 </DockPanel>

image.png