c# - 列数が動的な WPF グリッド

Question

私は WPF を初めて使用し、視覚効果を実現するのに苦労しています。データ駆動型の列数を持つオブジェクトの 2 次元グリッドを作成したいと考えています。コードビハインドなしでMVVMを使用しようとしています。この点についていくつかの投稿を見て、次のことを思いつきました。

<UserControl x:Class="Demo.Views.SideBySideStackPanelView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:views="clr-namespace:Demo.Views"
             xmlns:viewModels="clr-namespace:Demo.ViewModels"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <DataTemplate x:Key="ColumnTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="400"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*" SharedSizeGroup="TreeView"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*" SharedSizeGroup="DetailView"/>
                </Grid.RowDefinitions>

                <DockPanel Grid.Row="0" LastChildFill="True">
                    <TextBlock Text="{Binding Name}" DockPanel.Dock="Left"/>
                    <Button Command="{Binding Close}" DockPanel.Dock="Right" HorizontalAlignment="Right">
                        <Image Width="10" Height="10" Source="/Demo;component/Images/Close.png" />
                    </Button>
                </DockPanel>

                <views:TreeView Grid.Row="1"/>

                <GridSplitter 
                    ResizeDirection="Rows" 
                    VerticalAlignment="Center"
                    HorizontalAlignment="Stretch"
                    Height="5"
                    Grid.Row="2"
                    Name="sideBySideSplitter"/>

                <views:TreeDetail Grid.Row="2"/>

            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid d:DataContext="{d:DesignInstance viewModels:MainWindowViewModel}" Grid.IsSharedSizeScope="True">
        <ItemsControl ItemsSource="{Binding PluginItem}" ItemTemplate="{StaticResource ColumnTemplate}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>
</UserControl>

TreeView ビューはバインドされた基本的な TreeView であり、TreeDetail ビューはバインドされた単純な Grid です。

コントロールは多かれ少なかれコンテンツを希望どおりにレンダリングしますが、列の上部にあるツリー ビューを操作すると、ツリーにスクロール バーが表示されるのではなく、コントロールが垂直に拡張されます。GridSplitter はまったく機能しません。実際、詳細オブジェクトの真ん中にレンダリングされているように見えます。

TabControl.ContentTemplate に同様の DataTemplate があり、必要に応じて機能します。GridSplitter を移動すると、必要に応じていずれかの側にスクロール バーが表示され、TreeView アイテムを開くと、そのコントロールにスクロール バーが表示されます。

私が求めているのは、ユーザーが水平および垂直の「スプリッター」を使用してセルのサイズを制御し、セル内のユーザー オブジェクトが必要に応じてセル内をスクロールできる Excel のようなプレゼンテーションです。今のところ、固定サイズの列を使用できます。

提供されたヘルプに感謝します。ありがとう。