WPF-XMAL-布局和控件-布局(二)

分割窗口 GridSplitter

功能

可拖动布局中的分割条来确定每部分占窗口的比例

使用

GridSplitter需放到Grid中，最好预留一行/列专门存放，将预留的行/列的Height/Width设置Auto;

GridSplitter改变的是一行或者一列的尺寸，但为使外观和行为保持一致，需拉伸GridSplitter对象，使用RowSpan/ColumnSpan;

GridSplitter对象很小，为使其看的见，可设置竖直的VerticalAlignment="Stretch" ，并将width设置为固定值。水平设置HorizontalAlignment="Stretch"和Height；

GridSplitter的VerticalAlignment/HorizontalAlignment还决定了分割条拖动对齐和拖动的方向。默认为center。

     <Title="MainWindow" Height="250" Width="400">
    <Grid  Margin="5">
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="20"/>
            <RowDefinition Height="auto"/>
            <RowDefinition MinHeight="20"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="20"/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition MinWidth="20"/>
        </Grid.ColumnDefinitions>


        <Button Grid.Column="0" Grid.Row="0" Margin="5">1</Button>
        <Button Grid.Column="2" Grid.Row="0" Margin="5">2</Button>
        <Button Grid.Column="0" Grid.Row="2" Margin="5">3</Button>
        <Button Grid.Column="2" Grid.Row="2" Margin="5">4</Button>

        <GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Width="5" VerticalAlignment="Stretch" HorizontalAlignment="Center"  />
        <GridSplitter Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Height="5" VerticalAlignment="Center" HorizontalAlignment="Stretch" />
    </Grid>

共享尺寸组

功能

共享尺寸组的使用可使在同一组中尺寸大小相匹配，优点是使独立的Grid控件具有相同的比例

使用

使用时设置父Grid中Grid.IsSharedSizeScope="True"

在需要共享的Gri加入相同的共享组SharedSizeGroup="xxx"

   <Title="MainWindow" Height="250" Width="400">
    <Grid Margin="5" Grid.IsSharedSizeScope="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" Grid.Column="0" Margin="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="left01" Width="auto"/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Row="0"  Text="the width Change will Changed Down TextBlock" Background="AliceBlue"/>
            <GridSplitter Grid.Column="1" Width="5" VerticalAlignment="Stretch" HorizontalAlignment="Center" Margin="2"/>
            <TextBox Grid.Column="2"/>
        </Grid>
        
        <Grid Grid.Row="1" Margin="1">
            <TextBlock Text="Text Between Two Grids....."/>
        </Grid >
        
        <Grid Grid.Row="2" Grid.Column="0" Margin="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="left01" Width="auto"/>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Row="0" Text="Changed" Background="AntiqueWhite"/>
            <TextBox Grid.Column="1"/>
        </Grid>
    </Grid>