ListViewItem won't stretch to the width of a ListView

Question

I'm currently designing a windows 8 store app using XAML but I have a minor sizing issue. I have a ListView with a DataTemple.

The code for my ListView & DataTemplate are below:

<ListView x:Name="listPageItems"
          Grid.Row="1"
          SelectionMode="Extended"
          IsSwipeEnabled="False"
          ItemsSource="{Binding Mode=OneWay, Source={StaticResource items}}"
          ItemTemplate="{StaticResource NavigationItemTemplate}"
          ScrollViewer.VerticalScrollBarVisibility="Visible">

</ListView>

<DataTemplate x:Key="NavigationItemTemplate">    
        <Grid Height="75">
            <Grid.RowDefinitions>
                <RowDefinition Height="1.6*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Rectangle Fill="White" />
            <Rectangle Fill="{StaticResource SSEGreenBrush}"
                       Grid.Row="1" />
            <Border BorderThickness="2"
                    BorderBrush="{StaticResource SSEGreenBrush}"
                    Grid.RowSpan="2" />
            <TextBlock x:Name="textTitle"
                       Text="{Binding ClientName}"
                       Style="{StaticResource TitleTextStyle}"
                       Foreground="{StaticResource SSEBlueBrush}"
                       Margin="10,5,5,5" />
            <StackPanel Orientation="Horizontal"
                        Grid.Row="1"
                        HorizontalAlignment="Stretch">
                <TextBlock Text="Last Edit :"
                           Style="{StaticResource SubtitleTextStyle}"
                           Foreground="{StaticResource SSEBlueBrush}"
                           Margin="3,0,0,3"
                           VerticalAlignment="Center" />
                <TextBlock Text="SurveyDate"
                           Style="{StaticResource SubtitleTextStyle}"
                           Foreground="{StaticResource SSEBlueBrush}"
                           Margin="3,0,0,3"
                           VerticalAlignment="Center" />
            </StackPanel>
        </Grid>
    </DataTemplate>

The listview is within a grid column with a fixed width of 240.

When the view is displayed the ListViewItems don't stretch to the width of the ListView. I've tried setting numerous properties including the HorizontalContentAlignment but I can't seem to get the ListViewItem to stretch!

Can anybody help?

I'm using Visual studio 2012, C# 4.5 and developing a Windows store app.

Labana

Answer 1

Try adding the following to your ListView definition

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

Selfsufficient

Error: BindingExpression path error: 'Width' property not found on Project.CustomElement, Project.WindowsPhone, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null'. BindingExpression: Path='Width' DataItem=Project.CustomElement, Project.WindowsPhone, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null'; target element is 'Windows.UI.Xaml.Controls.Grid' (Name='null'); target property is 'Width' (type 'Double') – Crockett

On elements in the DataTemplate which do not automatically stretch to full width like the Grid does for example, you have to additionally set HorizontalAlignment="Stretch" – Baryram

I would also like to add a comment that I couldn't get this to work when I also set HorizontalAlignment="Left", but when I removed it, it worked like a charm! – Protractor

Answer 2

The easiest thing to do is just adding HorizontalContentAlignment="Stretch" to the ListView. There normally is no need for anything more.

Woolly