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.

Written by Loek van den Ouweland on February 11, 2015. Questions regarding this artice? You can send them to the address below.
By using this site, you acknowledge that you have read and understand our Cookie and Privacy Policy.