UWP ItemsControl content not stretching as in WPF

Question

I am experiencing some behaviour in a UWP project that I am unable to understand, however my implementations of this in WPF work as expected.

If I have a StackPanel, and insert some grids, the grids stretch to fill the width of the StackPanel as expected.

<StackPanel Grid.Row="1">
    <Grid Background="Blue">
        <TextBlock>Item 1</TextBlock>
    </Grid>
    <Grid Background="Green">
        <TextBlock>Item 2</TextBlock>
    </Grid>
    <Grid Background="Red">
        <TextBlock>Item 3</TextBlock>
    </Grid>
    <Grid Background="Pink">
        <TextBlock>Item 4</TextBlock>
    </Grid>
</StackPanel>

However, once I try to introduce binding and collections, this behaviour stops happening.

<ItemsControl ItemsSource="{Binding Devices}" Grid.Row="1">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Background="Violet">
                <TextBlock>Hello</TextBlock>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

I have found similar issues reported dating back to 2010, but none of the solutions have worked thus far. I have also found issues reported here for UWP Grid generally, used in other contexts. I have tried using a ListBox (which behaves the same in this regard), setting HorizontalContentAlignment, using styles as Silverlight users seem to have found joy in doing so, and changing how I express my ItemsControl. Nothing has worked thus far, and I am feeling that there is something wrong with XAML in UWP as I don't seem to experience any issues at all in WPF. Is there a known problem, or am I simply going about this the wrong way?

I simply want the child grid to stretch to fill horizontally. I should mention:

It does behave if I wrap the grid in a ViewBox, but this is not desirable as it has other adverse effects.
If I click on everything down the hierarchy in XAML, starting at ItemsControl, the box rendered around this selection is full width all the way down to (excluding) DataTemplate. DataTemplate and Grid show a tight-bound box, but if I look in the property inspector the Grid has its horizontal alignment as stretch. This leads me to believe that the DataTemplate is wrapping the grid with something that doesn't have a HorizontalAlignment="Stretch", and I have no known mechanism to change this.

Éliette Éliette · Accepted Answer · 2016-03-13T07:18:28

This behaviour seems to only appear in the designer of Visual Studio and Expression Blend. Once built and executing on both Phone and Desktop, everything appears to render correctly.

I've generally had very good experiences with the designer, and did not expect this to be the case. Had I just ignored the designer and progressed, I would have realised this sooner. I have reported this issue via the VisualStudio feedback tool.

UWP ItemsControl content not stretching as in WPF

1 Answers