WPF Tips(3) Splitterで画面を分割する

今回もWPFのTipsです。最近WPFでソフトを作っているので、紹介したいものがたくさんあるのです。

WPFで開発をしているとWindowsフォームにあるSplitterやSplitContainerみたいに画面を分割するための
コントロールが無いことに気づくと思います。

でも、ご心配なく。ちゃんとあります。GridパネルとGridSplitterというコントロールを使用します。
以下は最近私が開発しているソフトの画面なのですが、画面をGridSplitterを使って左右に分割しています。



画面からは読み取れませんが、画面の左側にTreeViewと右側にListViewを配置しています。
以下は該当部分のXAMLになります。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        
        <TreeView Grid.Column="0"></TreeView>
        <GridSplitter VerticalAlignment="Stretch" Width="2"/>
        <ListView Grid.Column="1"></ListView>
    </Grid>

まず、Gridパネルに列を２列定義します。そして、TreeViewを左側の列にListViewを右側の列に配置します。
そして、その真ん中にGridSplitterというWindowsフォームのSplitterに該当するコントロールを配置します。

今回は画面を左右に分割しているので、GridSplitterのVerticalAlignmentにStreah(縦に伸ばす)を指定しています。

GridSplitterを配置する列は定義する必要はありません。

以上で、完了です。Splitter部分にカーソルを持っていくと、左右のコントロールのサイズを調整することが出来ます。