WPF GridSplitter 使用範例：可調整大小的網格分割器

步驟 1：定義 Grid 行列結構

<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />  <!-- 分割器列 -->
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
</Grid>

步驟 2：加入 GridSplitter

<GridSplitter ResizeDirection="Rows"
              Grid.Column="0" Grid.ColumnSpan="2"
              Grid.Row="1"
              Width="Auto" Height="3"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch"
              Margin="0" />

屬性說明

完整範例：左右分欄 + 上下分列

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!-- 左上 -->
    <Border Background="LightBlue" Grid.Row="0" Grid.Column="0"><TextBlock Text="左上" /></Border>
    <!-- 右上 -->
    <Border Background="LightGreen" Grid.Row="0" Grid.Column="2"><TextBlock Text="右上" /></Border>

    <!-- 垂直分割器 -->
    <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="3"
                  Width="5" HorizontalAlignment="Center"
                  VerticalAlignment="Stretch"
                  ResizeDirection="Columns" />

    <!-- 水平分割器 -->
    <GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"
                  Height="5" VerticalAlignment="Center"
                  HorizontalAlignment="Stretch"
                  ResizeDirection="Rows" />

    <!-- 左下 -->
    <Border Background="LightYellow" Grid.Row="2" Grid.Column="0"><TextBlock Text="左下" /></Border>
    <!-- 右下 -->
    <Border Background="LightPink" Grid.Row="2" Grid.Column="2"><TextBlock Text="右下" /></Border>
</Grid>

提示

• 分割器所在的 Row/Column 設為 Auto 高度/寬度，避免佔用內容空間。
• 搭配 ShowsPreview="True" 可在拖曳時顯示半透明預覽線。
• 若分割器不響應，確認父 Grid 的 Background 不為透明（或設定 Background="Transparent" 確保命中測試）。