WPF 垂直GridSplitterのポイント

C# WPF

１周遅れのWPF入門です。難易度低めやけど、ハマるとつらい系。

検索してこのページに辿りついてる人ならご存知の通り、WPFのGridSplitterって結構正しく書くのが難しい。
そもそも GridSplitterってなんやねんって人はあんまいないと思うけど、図示してみると

実は正しく機能させるためのポイントは決まってる。

  1. 外枠になるGridを３分割する
    1. 左側のペイン
    2. つまみ(GridSplitter)
    3. 右側のペイン
  2. ３分割した真ん中のペインのサイズをAutoにする

実際MSDNにもそう書いてる。
方法 : ユーザーによるサイズ変更が可能なアプリケーションを GridSplitter で作成する | Microsoft Docs

でも、そのポイントだけじゃうまくいかないのな。今日はそういうお話。
順番に行きます。

  1. VS2013 でWPFアプリケーションのプロジェクトを新規で作る
  2. Gridを３分割する
  3. 真ん中をGridSplitterする
  4. ３分割Gridの真ん中のWidthをAutoにする

１．VS2013 でWPFアプリケーションのプロジェクトを新規で作る
WpfApplication1って名前でテキトーに。（今回はさすがに省略します）

２．Gridを３分割する
ここで

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="167*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="318*"/>
        </Grid.ColumnDefinitions>

    </Grid>
</Window>

まあ、全部手で書いてもしれてますね。GUIでの編集がおすすめですが。
続いて

３．真ん中をGridSplitterする
Grid.Column="1"にWidth="5"のGridSplitterを配置します。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="167*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="318*"/>
        </Grid.ColumnDefinitions>
        <GridSplitter Grid.Column="1" Width="5"/>

    </Grid>

この状態で実行してみると、確かにそれっぽい雰囲気になります。

これでＯＫなハズなんやけど、実際には奇妙な挙動になります。
具体的には、GridSplitterが右には移動するけど左にはいかないのです。
より現象がわかるように左のペイン(Grid.Column=0）と右ペイン（Grid.Column=2）に背景色をつけてみましょう。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="167*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="318*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" Background="Aquamarine"></StackPanel>
        <GridSplitter Grid.Column="1" Width="5"/>
        <StackPanel Grid.Column="2" Background="DodgerBlue"></StackPanel>
    </Grid>

実行したらこんな感じ。

で、左にはGridSplitterが動かないので右に移動させると

こうなって・・・
あれれー

モーゼの十戒みたいに左右にペインが割れていきます。なんだこれ？

さて、いよいよ今回の記事の結論です。
実はこの謎の挙動はGridSplitterに１つ属性を追加するだけで解決できます。だけど、わからんかったらずっとわからんと思うんだよねー

答えは
「HorizontalAlignmentにCenterもしくはStretchを入れる」
です。

ええっHorizontalAlignmentのデフォルトってStretchじゃねーの？って思うよねー
でも、このケースは違う。挙動から推測するとHorizontalAlignment="Right"になってる。（ちなみにHorizontalAlignment="Left"って設定すると、右には行けなくて左に動かすとモーゼの十戒みたいになる。蛇足ながら）

垂直GridSplitter設定したのにモーゼの十戒になっちゃうとお困りの方は、GridSplitterに

「HorizontalAlignmentにCenterもしくはStretchを入れる」

を試してみてください。

では、ここまでの全XAMLコードを載せます。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="167*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="318*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" Background="Aquamarine"></StackPanel>
        <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center" />
        <StackPanel Grid.Column="2" Background="DodgerBlue"></StackPanel>
    </Grid>
</Window>

こういう話はほぼほぼWindows Store App用のXAMLでも同じ感じになります。
Windows Store Appの場合Gridレイアウトをどの程度使うかって話はありますが。

以上です。