Stretching ListViewItems over full width in Universal Apps

How can you make the items in your DataTemplate stretch over the full width?

The next image shows a Windows Phone 8 ListView. Every ListViewItem is a container for a TextBox and a CheckBox where the CheckBox needs to be right-aligned.


By default, the following XAML:

<ListView x:Name="list" Margin="20">
            <Grid Background="#22FF0000" Margin="0,0,0,2">
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="50" />
                <TextBlock Text="{Binding Name}" VerticalAlignment="Center" FontSize="20" Margin="20,0,10,0" />
                <CheckBox Grid.Column="1" IsChecked="{Binding IsManager}" VerticalAlignment="Center" />

Will give the following result:


The red background was put here to indicate that the items don’t stretch over the full width.

Solution: Add an ItemContainerStyle to stretch items

Add the following XAML to your ListView children:

    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />

And this is how the result looks like:


This solution works on both Windows Phone 8 and Windows 8.

Grüsse aus Berlin!
This is a cookie free and popup free website.
Join me in making the web enjoyable again by removing the need for annoying cookie warnings and silly newsletter overlays!