分割視窗 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>