ざこノート
2018-05-25 [WPF]

[WPF] GridSplitter 画面を分割して境界線をドラッグしてリサイズする

Gridの中にGridSplitterを配置して、隣り合うコントロールの幅をリサイズします。

環境

  • Windows 10 Pro 64bit 1709
  • Visual Studio Community 2017 15.5.7
  • .NET Framework 4.6.1

結果

横に分割

横に分割する

縦に分割

縦に分割する

実装

横に分割

垂直に区切って列幅をリサイズします。

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

    <Label Grid.Row="0" Grid.Column="0" Content="Content:"/>
    <Label Grid.Row="0" Grid.Column="2" Content="Note:"/>
    <GridSplitter Grid.Row="1" Grid.Column="1" Width="5" HorizontalAlignment="Stretch"/>
    <TextBox Grid.Row="1" Grid.Column="0" AcceptsReturn="True"/>
    <TextBox Grid.Row="1" Grid.Column="2" AcceptsReturn="True"/>
</Grid>

縦に分割

水平に区切って行高さをリサイズします。

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

    <Label Grid.Row="0" Grid.Column="0" Content="Content:"/>
    <Label Grid.Row="2" Grid.Column="0" Content="Note:"/>
    <GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
                  Height="5"
                  HorizontalAlignment="Stretch"/>
    <TextBox Grid.Row="0" Grid.Column="1" AcceptsReturn="True"/>
    <TextBox Grid.Row="2" Grid.Column="1" AcceptsReturn="True"/>
</Grid>

感謝