[C＃/ WPF] GridSplitter分割レイアウト、コントロールディバイダーをドラッグしてコントロールのサイズを変更

オリジナル： [C＃/ WPF] GridSplitter分割レイアウト、コントロールディバイダーをドラッグしてコントロールのサイズを変更

要件：インターフェイスはコントロールの複数の部分で構成されており、コントロール間の仕切りバーをドラッグしてサイズを変更する必要があります。

MainWindow.xaml：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="300"/>
        <ColumnDefinition Width="300"/>
    </Grid.ColumnDefinitions>

    <ListBox Grid.Row="0" Grid.Column="0">
        <ListBoxItem>aaaa</ListBoxItem>
        <ListBoxItem>bbbb</ListBoxItem>
        <ListBoxItem>cccb</ListBoxItem>
    </ListBox>

    <TextBlock Grid.Row="0" Grid.Column="1">sadfas</TextBlock>

    <GridSplitter Grid.Row="0" Grid.Column="0" Width="0" VerticalAlignment="Stretch" HorizontalAlignment="Right"/>

</Grid>

実行効果は次のとおりです。

赤い点線は、コントロールバーのサイズを変更するために仕切りバーをドラッグすることを示します。

ピット：

• グリッドとその行と列を使用して定義する必要があります。それ以外の場合は表示できますが、ドラッグできません。たとえば、次の表現は無効です。

<StackPanel Orientation="Horizontal">
    <TextBlock Text="LLLLLLLLLLLLLL"/>
    <GridSplitter Width="10" HorizontalAlignment="Center" VerticalAlignment="Stretch" Background="Wheat"/>
    <TextBlock Text="RRRRRRRRRRRRRR"/>
</StackPanel>

• 左と右の分割列の場合、GridSplitter Widthの幅を指定し、VerticalAlignmentを設定する必要があります。それ以外の場合は無効です。
• 行を上下に分割するには、仕切りのG​​ridSplitterの高さを指定し、Horizo​​ntalAlignmentを設定する必要があります。それ以外の場合は無効です。

---

次に、より詳細な例を示します。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
        xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
        mc:Ignorable="d"
        Title="MainWindow" Height="600" Width="1000">

    <Grid>
        <Grid.RowDefinitions/>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Text="LLLLLLLLLLLLLL"/>
        <GridSplitter Grid.Row="0" Grid.Column="1" Width="10" HorizontalAlignment="Center" VerticalAlignment="Stretch" Background="Wheat"/>

        <Grid Grid.Row="0" Grid.Column="2">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="10"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Row="0" Grid.Column="0" Text="RRRRRRTTTTTTTT"/>
            <GridSplitter Grid.Row="1" Grid.Column="0" Height="10" HorizontalAlignment="Stretch" Background="Wheat"/>
            <TextBlock Grid.Row="2" Grid.Column="0" Text="RRRRRRBBBBBBBB"/>

        </Grid>       
    </Grid>

</Window>

ランニングエフェクトが図に示されています。下の水平および垂直の黄色の仕切りをドラッグできます。

重要な参照：

• 使用されているクラスGridSplitterについて

• 列を左右に分割する方法：https : //msdn.microsoft.com/en-us/library/ms745672(v=vs.110).aspx

• 行を上下に分割する方法：https : //msdn.microsoft.com/en-us/library/ms743457(v=vs.110).aspx