How do I get WPF GridSplitter controls working inside an ItemsControl?

Asked
Viewd1435

0

Could anyone possibly explain to me why the following simple example works:

<ItemsControl x:Class="UserControl1"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="5" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid Background="Yellow" />

        <GridSplitter Grid.Row="1"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch" />

        <Grid Grid.Row="2"
              Background="Orange" />
    </Grid>
</ItemsControl>

...but when I make the ItemsPanelTemplate's the main one, it does not:

<ItemsControl x:Class="UserControl1"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="5" />
                    <RowDefinition />
                </Grid.RowDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <Grid Background="Yellow" />

    <GridSplitter Grid.Row="1"
                  HorizontalAlignment="Stretch" 
                  VerticalAlignment="Stretch" />

    <Grid Grid.Row="2" Background="Orange" />
</ItemsControl>

They both display a Yellow box on top of an Orange box, with a horizontal splitter between them. In the first example the splitter works correctly, allowing you to resize the two areas. In the second example (that produces a near identical visual tree), the splitter is locked, it won't allow me to drag it to resize the two areas!

This is a very simplified example of what I'm trying to achieve - but it demonstrates the issue I'm getting in my actual app. I must be missing something, what's stopping the splitter from functioning? All three children get added to the ItemsPanelTemplate grid ok....

Any explanation or fix would be much appreciated!

Regards, Dave

1 ответов

4

oh no one replied? it is because the GridSplitter must be the immediate child of the parent Grid to know the actual size of the columns.