布局

Canvas

基本面板，传统布局方式，支持与设备无关的坐标定位元素

<Border BorderThickness="" BorderBrush="Black" Margin="">

        <Canvas>

            <Button Canvas.Left="" Canvas.Top="" Content="Left=20,Top=50" />

            <Button Canvas.Right="" Canvas.Bottom="" Content="Right=20,Bottom=50" />

        </Canvas>

    </Border>

效率高，适合矢量绘图

StackPanel

用于顺序垂直或水平排列子元素

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition />

        <RowDefinition />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition />

        <ColumnDefinition />

    </Grid.ColumnDefinitions>

    <Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">

        <StackPanel>

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

        </StackPanel>

    </Border>

    <Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">

        <StackPanel Orientation="Horizontal">

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

        </StackPanel>

    </Border>

    <Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">

        <StackPanel FlowDirection="RightToLeft">

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

        </StackPanel>

    </Border>

    <Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">

        <StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

        </StackPanel>

    </Border>

</Grid>

WrapPanel

与StackPanel类似，当没有空间放置子元素时会自动放到下一行或下一列

<Border BorderThickness="" BorderBrush="Black" Margin="">

    <WrapPanel ItemHeight="">

        <Button Content="" MinWidth="" />

        <Button Content="" MinWidth="" />

        <Button Content="" MinWidth="" />

        <Button Content="" MinWidth="" />

    </WrapPanel>

</Border>

布局会随着窗口大小的改变一起改变

DockPanel

将元素放到面板的某一个边上，拉伸元素填满高度或者宽度，可以设置是否填充剩余空间

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition />

        <RowDefinition />

    </Grid.RowDefinitions>

    <DockPanel Grid.Row="" Margin="">

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

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

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

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

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

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

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

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

    </DockPanel>

    <DockPanel Grid.Row="" Margin="" LastChildFill="False">

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

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

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

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

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

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

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

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

    </DockPanel>

</Grid>

Grid

最常用且功能强大的布局（之前的实例中已经有过使用），允许在一个列表中放置子元素

常用属性 Column\Row\ColumnSpan\RowSpan

尺寸：绝对尺寸、自动尺寸、比例尺寸

<Grid Margin="">

    <Grid.RowDefinitions>

        <RowDefinition />

        <RowDefinition />

        <RowDefinition />

        <RowDefinition />

    </Grid.RowDefinitions>

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Button Grid.Column="" Content="Width=100" />

        <Button Grid.Column="" Content="Width=*" />

    </Grid>

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Button Grid.Column="" Content="Width=100" />

        <Button Grid.Column="" Content="Width=*" />

        <Button Grid.Column="" Content="Width=*" />

        <Button Grid.Column="" Content="Width=*" />

    </Grid>

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="2*" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Button Grid.Column="" Content="Width=100" />

        <Button Grid.Column="" Content="Width=*" />

        <Button Grid.Column="" Content="Width=2*" />

        <Button Grid.Column="" Content="Width=*" />

    </Grid>

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="2*" />

            <ColumnDefinition Width="3*" />

        </Grid.ColumnDefinitions>

        <Button Grid.Column="" Content="Width=100" />

        <Button Grid.Column="" Content="Width=*" />

        <Button Grid.Column="" Content="Width=2*" />

        <Button Grid.Column="" Content="Width=3*" />

    </Grid>

</Grid>

IsSharedSizeScope

通过对SharedSizeGroup命名，相同名字的Grid的高度或者宽度可以设置为相同

<Grid Margin="" Grid.IsSharedSizeScope="True">

                <Grid Grid.Row="" Margin="">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="" SharedSizeGroup="a"/>

                        <ColumnDefinition Width="*" SharedSizeGroup="a"/>

                    </Grid.ColumnDefinitions>

                  　...

                </Grid>

                <Grid Grid.Row="" Margin="">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="" />

                        <ColumnDefinition Width="*" />

                        <ColumnDefinition Width="2*" SharedSizeGroup="a"/>

                        <ColumnDefinition Width="*" />

                    </Grid.ColumnDefinitions>

　　　　　　　　　　　　...

GridSplitter

可以通过鼠标键盘改变尺寸

<Grid Margin="" Grid.IsSharedSizeScope="True">

    <Grid.RowDefinitions>

　　　　...

    </Grid.RowDefinitions>

    <GridSplitter Grid.Row="" HorizontalAlignment="Stretch" VerticalAlignment="Top" ShowsPreview="True" ResizeDirection="Rows" Height="3" Background="Black" />

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

          ...

        </Grid.ColumnDefinitions>

        <GridSplitter Grid.Column="" HorizontalAlignment="Left" VerticalAlignment="Stretch" ShowsPreview="True" Width="" Background="Black" />

        ...

    </Grid>

</Grid>

To be continue...

最新文章

  1. [原创]Centos7 内部常用软件升级计划
  2. Ext.net
  3. [Freescale]E9学习笔记-LTIB总结
  4. Python FTP多线程爆破脚本
  5. HDU 1827 Summer Holiday(Tarjan缩点）
  6. JavaScript学习笔记——JS中的变量复制、参数传递和作用域链
  7. AC自动机(AC automation)
  8. PE结构之重定位表
  9. hdu-3790-最短路径问题(dijkstra算法)
  10. 蓝桥杯- 移动距离-java
  11. InnoDB 逻辑存储结构
  12. python 常用算法
  13. java打包项目将配置文件放在包外面(后续还会有补充)
  14. Runloop详解
  15. Daily Scrum 12.20
  16. Python系列之 - 前端总结
  17. 动态的根据一个资源名获得到对应的资源id
  18. Python-数学篇之计算方法的目录：
  19. Vivaldi浏览器媲美Chrome
  20. Nuget出现错误怎么办？

热门文章

  1. Software license key and activation
  2. 使用PDF.JS在线查看PDF
  3. POJ 3276 Face The Right Way 反转
  4. node.js 抓取网页数据
  5. python补充最常见的内置函数
  6. opencart二次开发小记
  7. viewport ——视区概念，为 自适应网页设计
  8. Android 手机卫士6--高级工具
  9. GJM ：Unity 使用SqlServer数据库 [原创]
  10. mysql 5.7.15 vs mysql 5.6.31性能测试以及不同linux内核性能比较