• WPF 页面布局 DockPanel Grid StackPanel UniformGrid WrapPanel WPF布局入门 WPF布局资料


    在布局常用的布局属性

    HorizontalAlignment: 用于设置元素的水平位置VerticalAlignment: 用于设置元素的垂直位置
    Margin: 指定元素与容器的边距
    Height: 指定元素的高度
    Width: 指定素的宽度
    WinHeight/WinWidth: 指定元素的最小高度和宽度MaxHeight/MaxWidth: 指定元素的最大高度和宽度
    Padding: 指定元素内部边距

    通常使用元素 

    DockPanel

    包含在DockPanel中的元素,具备DockPanel.Dock的4个枚举值 (Top/Left/Right/Botom) 用于设置元素的错定位置LastChildFill:容器中的最后一个元素时,默认该元素填充DockPanel所有空间,默认值为TrueDockPanel中的元素未显示添加DockPanel.Dock属性时,系统则会默认为DockPanel.Dock=“Left"

    1. <DockPane1>
    2. <Button DockPanel.Dock="Top" Width="40" Height="40" Background="Red"/>
    3. <Button DockPanel.Dock="Left" Width="40" Height="40" Background="Yellow"/>
    4. <Button DockPanel.Dock="Right" Width="40" Height="40" Background="Blue"/>
    5. <Button DockPanel.Dock="Bottom" Width="40" Height="40" Background="Green"/>
    6. DockPanel>

    Grid

    Grid为最常用的布局容器,作为View中的主要组成部分,负责框架中整体的页面布局。
    ShowGridLines: 可以设置行业的边距线的显示。

    Grid.RowDefinitions:可以创建任意行,进行固定高度与百分比或自适应高度设置Grid.ColumnDefinitions: 可以创建任意列,进行固定宽度与百分或自适应宽度设置

    1. <Grid ShowGridLines="True">
    2. <Grid.RowDefinitions>
    3. <RowDefinition/><RowDefinition/>
    4. Grid.RowDefinitions>
    5. <Grid.ColumnDefinitions>
    6. <ColumnDefinition/>
    7. <ColumnDefinition/>
    8. Grid.ColumnDefinitions>
    9. Grid>
    1. <Grid showGridlines="True">
    2. <Grid.RowDefinitions>
    3. <RowDefinition/>
    4. <RowDefinition/>
    5. Grid.RowDefinitions>
    6. <Grid.ColumnDefinitions>
    7. <ColumnDefinition/>
    8. <ColumnDefinition/>
    9. <Grid.ColumnDefinitions>
    10. <Border Background="#F26321" Margin="5"/>
    11. <Border Background="#8CC43D" Grid.Column="1" Margin="5"/>
    12. <Border Background="#0OABED" Grid.Row="1" Grid.Column="0" Margin="5"/>
    13. <Border Background="#EFB70B" Grid.Row="1" Grid.Column="0" Margin="5"/>
    14. Grid>

    StackPanel

    StackPanel 是一个垂直或水平排列控件的控件。使用 Orientation 属性来指定是垂直对齐还是水平对齐。

    • Horizontal:水平方向。
    • Vertical :垂直方向。

    1. <StackPanel Orientation="Horizontal">
    2. <Button Width="100" Height="40" Background="Red"/>
    3. <Button Width="100" Height="40" Background="Yellow"/>
    4. <Button Width="100" Height="40" Background="Blue"/>
    5. <Button Width="100" Height="40" Background="Green"/>
    6. StackPane1>

    UniformGrid

    与Grid不同的是,该容器具备Columns/Rows 属性 通过设置该属性UniformGrid则具备相应的行与列,但是设置的Columns/Rows不允许单独的进行容器的大小设置。位于UniformGrid中的子元素,按输入顺序排列至容器中直至填充容器的所有空间。未显示指定Columns/RowsUniformGrid则为子元素动态分配Columns/Rows,换行与换列的基准主要基于UniformGrid的容器大小(宽度与高度)。

    1. <UniformGrid>
    2. <Button Width="40" Height="40" Background="Red"/>
    3. <Button Width="40" Height="40" Background="Yellow"/>
    4. <Button Width="40" Height="40" Background="Blue"/>
    5. <Button Width="40" Height="40" Background="Green"/>
    6. UniformGrid>

    1. <UniformGrid Columns="2" Rows="3">
    2. <Button width="100" Height="40"/>
    3. <Button width="100" Height="40"/>
    4. <Button width="100" Height="40"/>
    5. <Button width="100" Height="40"/>
    6. UniformGrid>

    WrapPanel

    WrapPanel与StackPanel类似的功能,相对于WrapPanel,具有在有限的容器范围内,可以自动换行,或者换列处理。具体则取决于WrapPanel的排列方式(Qrientation)。默认水平布局方向(Horizontal)

    1. <WrapPanel>
    2. <Button Width="100" Height="40" Background="Red"/>
    3. <Button Width="100" Height="40" Background="Yellow"/>
    4. <Button Width="100" Height="40" Background="Blue"/>
    5. <Button Width="100" Height="40" Background="Green"/>
    6. <Button Width="100" Height="40" Background="#54FF9F"/>
    7. <Button Width="100" Height="40" Background="#6A5ACD"/>
    8. WrapPanel>

    Canvas  

    精准定位  一个类似坐标系的面板,通过left,right,right,bottom 四个字段来设置控件的摆放位置 

    1. <Canvas>
    2. <Button Content="Test1" Canvas.Left="0" Canvas.Top="20" Width="60"/>
    3. <Button Content="Test2" Canvas.Right="0" Canvas.Bottom="60" Width="60"/>
    4. <Button Content="Test3" Canvas.Left="150" Canvas.Top="50" Width="60"/>
    5. <Button Content="Test4" Canvas.Right="150" Canvas.Bottom="50" Width="60"/>
    6. Canvas>
    7. <Canvas>
    8. <Button Content="Test1" Canvas.Left="150" Canvas.Top="60" Width="90" Height="50" Background="Yellow" Foreground="Gray"/>
    9. <Button Content="Test2" Canvas.Left="150" Canvas.Top="80" Width="90" Height="50" Background="Red" Foreground="White"/>
    10. <Button Content="Test3" Canvas.Left="150" Canvas.Top="100" Width="90" Height="50" Background="green" Foreground="White"/>
    11. <Button Content="Test4" Canvas.Left="150" Canvas.Top="120" Width="90" Height="50" />
    12. Canvas>
    13. <Canvas>
    14. <Button Content="Test1" Panel.ZIndex="3" Canvas.Left="150" Canvas.Top="60" Width="90" Height="50" Background="Yellow" Foreground="Gray"/>
    15. <Button Content="Test2" Panel.ZIndex="2" Canvas.Left="150" Canvas.Top="80" Width="90" Height="50" Background="Red" Foreground="White"/>
    16. <Button Content="Test3" Panel.ZIndex="1" Canvas.Left="150" Canvas.Top="100" Width="90" Height="50" Background="green" Foreground="White"/>
    17. <Button Content="Test4" Panel.ZIndex="0" Canvas.Left="150" Canvas.Top="120" Width="90" Height="50" />
    18. Canvas>

    canvas还有一个z_index属性来设置控件的折叠顺序,如果不设置z_index,系统是按照控件定义的先后顺序来排序,定义了z_index属性,可调整控件的重叠顺序

    例:不加z_index时

  • 相关阅读:
    java mysql体检管理系统源码
    使用Python,Xpath获取所有的漫画章节路径,并下载漫画图片生成单个/多个pdf,并进行pdf合并
    机器学习入门五
    最大路径和——给定一个二叉树的头节点head,路径规定不同问题下的解法
    Linux进程上下文切换:理解特权模式和进程切换
    Django之初入门
    MMDetection 使用示例:从入门到出门
    Ubuntu下 非wheel组不能切换到 root su root必须输入密码 sudo时必须输入账户密码 账户需具有sudo权限
    文本特征处理——N-Gram、长度规范及数据增强
    51单片机-(中断系统)
  • 原文地址:https://blog.csdn.net/weijia3624/article/details/130903327