XAMLギャラリー:2ペイン + 可変セパレータ(GridSplitter)

この記事では、メイン領域 (Grid) を *2ペインに分割し、中央にドラッグ可能なセパレータ (GridSplitter) を置いて、ユーザーが左右の幅を変えられるようにする XAML を紹介します。

ソースコード
実行例

ソースコード

<Window x:Class="【プロジェクト名】.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Window.Title>GridSplitter Sample</Window.Title>
    <Window.Width>300</Window.Width>
    <Window.Height>200</Window.Height>
    <Window.FontSize>16</Window.FontSize>

    <Window.Content>
        <!-- ==================== Main Area ==================== -->
        <Grid>

            <!-- 左右2ペイン + セパレータ -->
            <Grid.ColumnDefinitions>
                <!-- 左側コンテンツ: 最初は 1* -->
                <ColumnDefinition Width="1*" />
                
                <!-- セパレータ用: Auto (グリッドサイズ自身に合わせる) -->
                <ColumnDefinition Width="Auto" />
                
                <!-- 右側コンテンツ: 最初は 1* -->
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>

            <!-- 左側コンテンツ -->
            <Border Grid.Column="0" Background="#FFF8F8F8" Margin="4">
                <TextBlock Text="左ペイン" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Border>

            <!-- グリッドセパレータ -->
            <GridSplitter
                Grid.Column="1"
                Width="5"
                HorizontalAlignment="Center"
                VerticalAlignment="Stretch"
                Background="Gray"
                ShowsPreview="True"
                ResizeDirection="Columns"
                Margin="2"/>
            
            <!-- 右側コンテンツ -->
            <Border Grid.Column="2" Background="#FFF0F0FF" Margin="4">
                <TextBlock Text="右ペイン" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Border>

        </Grid>
    </Window.Content>
</Window>

実行例

中央つまみ(Splitter)を左右にマウスでドラックすることで、左右の領域が変化することが確認出来ます。