Wpf布局控件--Grid

最基本的Grid、Stackpanel

UniformGrid

Canvas

Wrappannel

DockPannel

装饰器Border

 

 

Grid

一、功能最强大，布局最灵活的容器

 默认就是有一个Grid

Window转到定义是由ContentControl来的  

Window里面只能有一个对象，一个标签，不是Grid其他也可以，只要是唯一一个就可以

不像winform里面可以多个

 

一般都是用Grid

Grid可以可以放多个控件

Grid继承自Panel  

 Grid、StackPanel、Border默认都是和窗口是一样大的

 需要什么属性手动添加就行了

拖控件会自动生成一些额外的属性，拖进来还得改，还得删，麻烦  

 去掉，也是会占满窗口

 

二、分行分列其实就是网格

分列<Grid.ColumnDefinitions>，

　　有几列添加几个列定义<ColumnDefinition Width="*"/>

分行<Grid.RowDefinitions>，

　　有几行添加几个行定义<RowDefinition Height="*"/>

三、尺寸

默认都是等分的

可以在设计窗口，点击边框添加，这上面的147*并不是固定尺寸，是比例，会根据窗口自动缩放

1、*代表比例，相对尺寸

1*，2*，3*，倍数

 

2、定死：

也可以固定120个单位的宽度，没有像素概念

也不一定不建议这样做，按照自己实际业务场景，必须定死就这样写

如果内容发生变化会显示不全

 3、auto：

　　自动宽度

　　会按照内容最宽的宽度自适应

4、MinWidth：

　　最小宽度

　　如果里面有更大的宽度，也会撑开

5、MaxWidth：

　　超过会遮挡，没意义

　　达不到，会自动缩到内容的最大宽度

 

行同理

分成内容区域划分 

 

划分区域好了

怎么放内容

四、内容

1、往哪里放的问题

序号从0开始

不指定默认就是0

依赖附加属性

Grid.Column ：Grid为子项辅助布局使用的

Grid.Row：

 

winform里面使用Dock属性针对父对象往那边停靠

WPF有不同特色的布局控件，不同的布局方式，不同辅助布局属性

　　设计巧妙，哪个控件就用哪个控件的辅助布局属性。定制

最基本的指定，往哪里放的问题

 

2、跨列、跨行

ColumnSpan：从当前列开始合并几个单元格

RowSan

应用场景：合并列头，报表，父列头大类

 先了解最基本的属性，再扩展

循序渐进

 

关键属性

添加新的窗口，App.xaml里面设置为启动窗口

 

3、拖动

1、拖动控件

<GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="5" Background="Gray"/>

2、尺寸共享

让数据行联动，拖动表头，表数据跟着同样移动

在顶级Grid添加属性，开启尺寸共享的功能

<Grid Grid.IsSharedSizeScope="True">

再在支持拖动的每一列，添加属性

<ColumnDefinition Width="50" SharedSizeGroup="Header"/>

 SharedSizeGroup名可以随便定义

    <Grid Grid.IsSharedSizeScope="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/><!--列头-->
            <RowDefinition /><!--数据表-->
        </Grid.RowDefinitions>
        <!--列头-->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50" SharedSizeGroup="Header"/>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Border Background="Green "/>
            <Border Background="orange " Grid.Column="1"/>
            <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="5" Background="Gray"/> <!--Stretch(填充父容器的剩余空间)-->
        </Grid>
        <!--数据表-->
        <Grid Grid.Row="1" Height="30" VerticalAlignment="Top" Margin="0,10,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="Header"/><!--第二行第一列没有指定宽度，还是会与第一行第一列保持同样宽度-->
                <ColumnDefinition Width="100"/>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Border Background="Green "/>
            <Border Background="orange " Grid.Column="1"/>
        </Grid>

行同理，可以高度共享，上下拖动

 

4、布局辅助属性

HorizontalAlignment：水平方向的对齐，枚举：左、中、右、Stretch。

　　默认Stretch，水平方向拉伸Stretch(填充父容器的剩余空间)，靠右

　　三种结果左、中、右，与垂直方向上、中、下，组成9种布局方式

　　垂直居中，如果没有设置高度，就显示不出来，默认auto

Margin：边距，左、上、右、下顺序 

 Padding：用的比较少