4

I'm trying to use Grid.IsSharedSizeScope to line up databound controls displayed by an ItemsControl next to some contols in the first column of a Grid.

The problem is I can't prevent the controls continuously growing vertically.

How do I stop them from doing this without setting MaxHeight properties. I've tried different settings of VerticalAlignment and VerticalContentAlignment in various places but can't figure it out.

<Grid Grid.IsSharedSizeScope="True" >
    <Grid.RowDefinitions>
        <RowDefinition SharedSizeGroup="RowOne" />
        <RowDefinition SharedSizeGroup="RowTwo" />
        <RowDefinition SharedSizeGroup="RowThree" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <SomeControl Grid.Row="0" Grid.Column="0" />
    <SomeControl Grid.Row="1" Grid.Column="0" />
    <ItemsControl Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" ItemsSource="{Binding Path=SomeSource}" ItemsPanel="{StaticResource MyHorizontalStackPanel}" >
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition SharedSizeGroup="RowOne" />
                            <RowDefinition SharedSizeGroup="RowTwo" />
                            <RowDefinition SharedSizeGroup="RowThree" />
                        </Grid.RowDefinitions>
                        <SomeControl Grid.Row="0" />
                        <SomeControl Grid.Row="1" />
                        <SomeControl Grid.Row="2" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
Grokodile
  • 3,881
  • 5
  • 33
  • 59

1 Answers1

17

Trying to use Grid.IsSharedSizeScope on nested Grids bad, putting the Grid and ItemsControl side by side inside another Grid with two columns, good.

Here is my own solution to my own stupidity:

<!-- outer grid (could be a stack panel) -->
<Grid Grid.IsSharedSizeScope="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <!-- header -->
    <Grid Grid.Column="0" Margin="0,10,10,0">
        <Grid.RowDefinitions>
            <RowDefinition SharedSizeGroup="RowOne" />
            <RowDefinition SharedSizeGroup="RowTwo" />
            <RowDefinition SharedSizeGroup="RowThree" />
        </Grid.RowDefinitions>
        <SomeControl Grid.Row="0" Grid.Column="0" />
        <SomeControl Grid.Row="1" Grid.Column="0" />
    </Grid>
    <!-- rows -->
    <ItemsControl Grid.Column="1" ItemsSource="{Binding Path=SomeSource}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition SharedSizeGroup="RowOne"   Height="Auto" />
                        <RowDefinition SharedSizeGroup="RowTwo"   Height="Auto" />
                        <RowDefinition SharedSizeGroup="RowThree" Height="Auto" />
                    </Grid.RowDefinitions>
                    <!-- define your row here -->
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>
Drew Noakes
  • 300,895
  • 165
  • 679
  • 742
Grokodile
  • 3,881
  • 5
  • 33
  • 59
  • 3
    Although it's been 4 years already... I must say.. don't be so harsh on yourself ;-) – Jony Adamit Mar 28 '15 at 14:27
  • +1. Thanks very much for this. Your approach got rid of some horrible flickering I was seeing in the header when using something similar to the example in your question. It was previously stuck in some kind of endless layout loop, but this new approach sorted it right out. – Drew Noakes Oct 19 '15 at 18:13