Grid with dynamic number of columns

See more:

C#

WPF

grid

MVVM

I am quite new to WPF, and am struggling with accomplishing a visual effect - I would like to have a two-dimensional grid of objects with a data-driven number of columns. I am trying to go with MVVM with zero code-behind.

I have the following structure:

<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>

The TreeView view is a basic bound TreeView and the TreeDetail view is a simple bound Grid.

The control does render my content more-or-less as desired, but when I interact with the tree view that is in the upper part of the column the control expands vertically rather than a scroll bar showing up in the tree. The GridSplitter doesn't work at all; in fact it appears to render in the middle of the detail object.

I have a similar DataTemplate in a TabControl.ContentTemplate and it works as desired. Moving the GridSplitter causes scroll bars to show up on either side when necessary and opening up TreeView items causes scroll bars to show up in that control.

What I am after is an Excel-like presentation where the user can control the sizes of the cells with horizontal and vertical "splitters" and the user objects within the cells scroll within the cell as necessary. I can live with fixed-size columns for now.

I would appreciate any help provided. Thanks.