WPF学习笔记系列之一（布局详情）

布局：
StackPanel 栈布局：控件不会拐弯且多出的不再显示。
DockPanel   停靠布局吸在上边下边或左右。
WrapPanel    环绕布局   一行控件会拐弯
Canvas 进行基于坐标的布局

Grid中若不指定Grid.Row属性及Grid.Column则默认为：0行，0列。RowDefinitions ColumnDefinitions ShowGridLines=true

<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
ColumnDefinition Width="*"></ColumnDefinition>
<Grid.RowDefinitions>
<RowDefinition Height="*"> </RowDefinition>
</Grid.RowDefinitions>
布局舍入：
如果一个窗体的两个部分被分正好要分一个像素就会使边框分开而不清楚，使用Grid 的UseLayoutRounding 属性设置为true就可以。
跨越多行多列：
    Grid.RowSpan="n" Grid.ColumnSpan="n"

    <Grid ShowGridLines="true">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*">
            </ColumnDefinition>
            <ColumnDefinition Width="Auto">
            </ColumnDefinition>
            <ColumnDefinition Width="Auto">
            </ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBox Margin="10" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">This is a test.</TextBox>
        <Button Margin="10,10,2,10" Padding="3" Grid.Row="1" Grid.Column="1">OK</Button>
        <Button Margin="2,10,10,10" Padding="3" Grid.Row="1" Grid.Column="2">Cancel</Button>
    </Grid>

Grid中使用GridSplitter分隔条使用原则：
1.    若要非和别的控件放在一个单元格中就要调整好边距，以使它们不重叠。更好的方法是预留一列或一行专门放置GridSplitter并将预留行或列的Heigh 或Width属性值设置为Auto。
2.    GridSplitter对象总是改变整行或整列的尺寸（而不是改变单个单元格的尺寸）为了使GridSplitter对象的外观和其行为一致，需要拉伸GridSplitter 对象使其穿越整行或整列，而不是将其限制在一个单元格中，为此，可以使用RowSpan或ColumnSpan
3. 太小不可见要设置高宽长，若竖直的则设置为：VerticalAlignment="Stretch" Width="10" 横的则：HorizontalAlignment="Center"
例子如下：
<Grid ShowGridLines="true">
        <Grid.RowDefinitions>
            <RowDefinition ></RowDefinition>
            <RowDefinition ></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100">
            </ColumnDefinition>
            <ColumnDefinition Width="Auto">
            </ColumnDefinition>
            <ColumnDefinition Width="50">
            </ColumnDefinition>
        </Grid.ColumnDefinitions>
        
        <Button Margin="3" Grid.Row="0" Grid.Column="0">左</Button>
        <Button Margin="3" Grid.Row="0" Grid.Column="2">右</Button>
        <Button Margin="3" Grid.Row="1" Grid.Column="0">左</Button>
        <Button Margin="3" Grid.Row="1" Grid.Column="2">右</Button>
        <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Center" ShowsPreview="True"></GridSplitter>
    </Grid>
ShowsPreview="True" ShowPreview GridSplitter的属性，当设置为false时当你拖动时马上就看到效果，而为true是就只显示你托运的阴影直到放开鼠标。
一个Grid中多个GridSplitter代码如下：
<Window x:Class="StudyWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="孙业宝学习WPF开始" Height="350" Width="525">
    
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition ></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        
        <Grid Grid.Column="0" VerticalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition ></RowDefinition>
                <RowDefinition ></RowDefinition>
            </Grid.RowDefinitions>
            <Button Margin="3" Grid.Row="0" >左上</Button>
            <Button Margin="3" Grid.Row="1">左下</Button>
        </Grid>
        
       <GridSplitter Grid.Column="1" Width="3" HorizontalAlignment="Center" VerticalAlignment="Stretch" ShowsPreview="false"></GridSplitter>

     <Grid Grid.Column="2">
      <Grid.RowDefinitions>
    <RowDefinition ></RowDefinition>
         <RowDefinition Height="Auto" ></RowDefinition>
                <RowDefinition ></RowDefinition>
            </Grid.RowDefinitions>
        <Button Margin="3" Grid.Row="0">右上</Button>
        <Button Margin="3" Grid.Row="2">右下</Button>
   
        <GridSplitter Grid.Row="1" Height="3" HorizontalAlignment="Stretch " ShowsPreview="false"></GridSplitter>
    </Grid>
</Grid>
</Window>
共享尺寸组：也就是两个不同的grid可以设置其两个列宽度相同通过设置Grid的 Grid.IsSharedSizeScope=true; 且把想要使用共享尺寸组的列的SharedSizeGroup="相同的名称" 例子代码如下：
<Grid Grid.IsSharedSizeScope="True" Margin="3">
<Grid Margin="3" BackGround="LightYellow" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel" ></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Margin="5"> A very long bit of text</Label>
<Label Grid.Column="1" Margin="5" >More Text</Label>
<TextBox Grid.Column="2" Margin="5" >A text box</TextBox>
</Grid>
<Grid Margin="3" BackGround="LightYellow" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel">
</ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grdi.ColumnDefinitinos>
<Label Margin="5" >Short</Lable>
<TextBox Grid.Column="1" Margin="5" >A text box</TextBox>
</Grid>

WPF学习笔记系列之一 （布局详情）

WPF学习笔记系列之一（布局详情）