Question

I’m bulding a small WPF app over here. It’s all built strictly with MVVM, using nothing but DataTemplates linked to view model types.

I’ve seen alot of questions about how to stretch and clip the contents of ListBoxes so that the items fill its parent. After alot of experimenting I managed to get my head around that but now I find myself in the same scenario with the ItemsControl but the same tricks doesn’t seem to work.

Here’s one of the DataTemplates in use (a simple TextBox). Note how I tried setting the HorizontalAlignment …

<DataTemplate DataType="{x:Type vm:OneOfMyViewModelTypes}">
    <TextBox 
        Text="{Binding Path=Value}"
        HorizontalAlignment="Stretch"
        />
</DataTemplate>

Here’s the ItemsControl inside a Grid …

<Grid Background="Gray">
            <Grid.Margin>
                <Thickness 
                    Left="{StaticResource ConfigurationDefaultMargin}" 
                    Right="{StaticResource ConfigurationDefaultMargin}" 
                    Bottom="{StaticResource ConfigurationDefaultMargin}" 
                    Top="{StaticResource ConfigurationDefaultMargin}" 
                    />
            </Grid.Margin>
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="_key" Width="Auto"/>
                <ColumnDefinition SharedSizeGroup="_value" Width="*"/>
            </Grid.ColumnDefinitions>

            <ItemsControl 
                Background="DimGray" 
                Grid.IsSharedSizeScope="True"
                ItemsSource="{Binding Path=Configuration, Mode=OneWay}" 
                HorizontalAlignment="Stretch" 
                HorizontalContentAlignment="Stretch"
                >
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition SharedSizeGroup="_key"/>
                                <ColumnDefinition SharedSizeGroup="_value"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock
                                Style="{StaticResource ExtensionConfigurationLabel}"
                                Grid.Column="0"
                                Margin="5,5,5,0"
                                Text="{Binding Path=Caption}" 
                                />
                            <ContentPresenter 
                                Grid.Column="1"
                                HorizontalAlignment="Stretch"
                                Margin="5,5,5,0"
                                Content="{Binding}" 
                                />
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>

I’ve used colors to see how the controls sizes. The Grid is gray and the ItemsControl is dark gray.

This is the result …

As you can see from the colors the containing Grid stretches while the ItemsControl does not. I did set its HorizontalAlignment property to Stretch but it seems it has no effect. Is there anything else I need do?

Thanks

Answer 1

You have two columns in your main (outer) grid, yet you use only the first column.
The second column uses all the remaining space.