How to prevent ItemsControl from horizontally stretching to fit children

Question

I have an ItemsControl, nothing fancy:-

<ItemsControl ItemsSource="{Binding ...}"
              ItemTemplate="{StaticResource ...}" />

The ItemTemplate contains the following XAML:-

<Border BorderThickness="0,0,0,1"
        BorderBrush="LightGray"
        Padding="0,2,0,2">
    <Grid>
        <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*"
                               SharedSizeGroup="Prompt" />
             <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0"
                   Text="{Binding ...}" />
        <NumericUpDown Grid.Column="1"
                       Width="75"
                       Text="{Binding ...}" />
    </Grid>
</Border>

This produces a UI looking like this:-

However if the text in the TextBlock is very long, it pushes the NumericUpDown off the r.h. edge of the ItemsControl, e.g.:-

I was hoping that once the NumericUpDown had been "pushed up" against the r.h. edge of the ItemsControl, the TextBlock would then start getting truncated. I assume the current behaviour is due to the ItemsControl using a StackPanel as its items presenter. How can I get it to do what I want?

Answer 1

After a lot of running into dead-ends thinking I could resolve this by changing the ItemsPresenter or ItemsPanel, I ended up using a DockPanel within my ItemTemplate, instead of the grid:-

<Border BorderThickness="0,0,0,1"
        BorderBrush="LightGray"
        Padding="0,2,0,2">
    <DockPanel LastChildFill="true">
        <NumericUpDown DockPanel.Dock="Right"
                       Width="75"
                       Text="{Binding ...}" />

        <TextBlock Text="{Binding ...}" />
    </DockPanel>
</Border>

I'm not entirely sure why the DockPanel respects the size of the parent ItemsControl, while the Grid was happy to horizontally "overrun" off the edge. This is an aspect of WPF that I still struggle with - which controls' sizes are affected by their parent, and which are affected by their children's sizes!

Answer 2

When you are using SharedSizeGroup with Grid.IsSharedSizeScope="True" the column's Star sizing is treated as Auto, more not official informations here.

The IsSharedSizeScope should not be used for arranging the controls described in the question. You should remove all SharedSizeGroup attributes and set the ItemsControl's HorizontalAlignment to Left.

Answer 3

I think that you might want to try setting the Control.HorizontalContentAlignment Property to Stretch on your ItemsControl. According to the linked page, this:

Gets or sets the horizontal alignment of the control's content.

In plain English, this means that it should set the Width of the rendered children, or items, to the same Width as the ItemsControl.