WPFのXAMLで3ペインレイアウト

XAMLでアプリケーションのレイアウトを考えていて、左側にリストビュー、右側にテキストボックスと、画像のプレビュー用の画像を表示するようにしたい。

また、各コントロールはウィンドウサイズの変更やGridSplitterの移動に連動してサイズが変更するようにしたい。

ファイル名:MainWindow.xaml

<Window x:Class="AutoLayout01.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:AutoLayout01"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <DockPanel
            Grid.Column="0">
            <ListView>
                <ListView.Resources>
                    <Style x:Key="listviewHeaderStyle" TargetType="GridViewColumnHeader">
                        <Setter Property="HorizontalContentAlignment" Value="Left" />
                    </Style>
                </ListView.Resources>
                <ListView.View>
                    <GridView
                        ColumnHeaderContainerStyle="{StaticResource listviewHeaderStyle}">
                        <GridViewColumn
                            Width="200"
                            Header="名前">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock
                                            Width="Auto"
                                            TextAlignment="Left"
                                            Text="" />
                                    </StackPanel>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn
                            Width="300"
                            Header="コメント">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock
                                            Width="Auto"
                                            TextAlignment="Left"
                                            Text="" />
                                    </StackPanel>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
        </DockPanel> 
        <GridSplitter
            Grid.Column="1"
            HorizontalAlignment="Stretch" />        
        <DockPanel
            Grid.Column="2">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="5" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <StackPanel
                    Margin="10"
                    Grid.Row="0">
                    <Label>コメント</Label>
                    <TextBox
                        Height="120"
                        Text="内容">
                    </TextBox>
                </StackPanel> 
                <GridSplitter
                    Grid.Row="1"
                    HorizontalAlignment="Stretch" />        
                <DockPanel
                    AllowDrop="True"
                    Margin = "10"
                    Grid.Row="2">
                    <Image Source="H:\Pictures\20250128\memo.jpg" />
                </DockPanel> 
            </Grid>
        </DockPanel> 
    </Grid>
</Window>

実行スクリーンショット

始め2ペインで考えていて左側にLabelとTextBoxとImageをStackPanelで縦積みする方法を考えていました。
縦積みのStackPanelの子要素は幅は目一杯広がりますが、高さは子要素で指定する必要があり、LabelとTextBoxは高さを指定出来ますが、Imageは表示する画像のサイズによって必要な高さが変わってきます。

DockPanelで縦横が目一杯に広がるようにし、そちらにImageを配置しようと思いましたが、StackPanelの子要素としてDockPanelを配置すると思った通りに動作してくれません。先ほども述べましたがStackPanelの子要素は高さをしてしてあげる必要があるため、DockPanelの高さを指定する必要があるようです。

それで、StackPanelで問題がないLabelとTextboxと、DockPanelを使いたいImageをGridを仕切ることにしてみました。

とりあえず希望通りレイアウトを作ることができました。ただ、こちらをアプリケーションで使おうと思うと、ツールバーやステータスバー、検索ボックスなどが欲しくなります。XAMLのXMLのネストが深くなり、レイアウトの把握が困難になりそうです。

IDEのVisualStudioをつかってレイアウトすると楽になるかもしれませんが、生成されるXAMLはさらに複雑になりそうな感じがして気が進みません。

アプリケーションの仕様としては、よく使うファイル（主に画像や音声）を登録しコメントを併記し、ドラックアンドドロップで他のアプリケーションで開くことを考えています。

C#のWPFでListViewの選択項目とテキストボックスをバインドする。

いまいち理解できていないのですが、コードを書いてみたら思った通りに動作したので記事にしてみました。ソースコードファイル名:FileEntity.csusing System.ComponentModel;using Reactive.Bin...

WPFで画像ファイルを別アプリケーションへドラックアンドドロップ

ファイル名:MainWindow.xaml<Window x:Class="FileCliper.MainWindow" xmlns=" xmlns:x=" xmlns:d=" xmlns:mc=" xmlns:local="clr-nam...

使いそうな機能は学習しましたので、そのうち作りたいと思います。