ListViewItem is not expanding to the width of the page, how to solve that?

Question

I am defining a ListView like this:

  <DataTemplate x:Key="LibraryItemTemplate">
        <Grid Height="191"
              UseLayoutRounding="True">
            <Grid.Background>
                <ImageBrush Stretch="Fill"
                            ImageSource="Assets/BookShelf.jpg" />
            </Grid.Background>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Grid x:Name="gridTitle"
                  Background="{Binding Text, Converter={StaticResource LibraryItemBackgroundConverter}, ElementName=tbTitle}"
                  Margin="6,4,6,13">

                <TextBlock x:Name="tbTitle"
                           TextWrapping="Wrap"
                           VerticalAlignment="Center"
                           RenderTransformOrigin="0.5,0.5"
                           Width="100"
                           Margin="0,0,0,0.2"
                           TextAlignment="Center"
                           FontSize="24"
                           FontWeight="Bold"
                           UseLayoutRounding="False"
                           d:LayoutRounding="Auto">
                    <TextBlock.RenderTransform>
                        <CompositeTransform Rotation="-90" />
                    </TextBlock.RenderTransform>
                    <Run Text="{Binding Title}" />
                </TextBlock>
            </Grid>

            <Grid x:Name="gridBooks"
                  Grid.Column="1"
                  Margin="0">

                <GridView x:Name="booksGridView"
                          AutomationProperties.AutomationId="ItemGridView"
                          AutomationProperties.Name="Grouped Items"
                          ItemsSource="{Binding Items}"
                          ItemTemplateSelector="{StaticResource textbookTemplateSelector}"
                          SelectionMode="Multiple"
                          IsItemClickEnabled="True"
                          ItemClick="booksGridView_ItemClick"
                          SelectionChanged="booksGridView_SelectionChanged"
                          IsSwipeEnabled="false"
                          ScrollViewer.VerticalScrollBarVisibility="Auto">

                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>
            </Grid>
        </Grid>
    </DataTemplate>


    <Grid Grid.Row="1"
          Margin="80,0,12,0">

        <ListView     x:Name="libraryListView"
                      AutomationProperties.AutomationId="VideoListView"
                      AutomationProperties.Name="Videos"
                      TabIndex="1"
                      Padding="0,0,4,0"
                      ItemsSource="{Binding}"
                      IsSwipeEnabled="False"
                      SelectionChanged="LibraryListView_SelectionChanged"
                      ItemTemplate="{StaticResource LibraryItemTemplate}"
                      ItemContainerStyle="{StaticResource LibraryListViewItemStyle}">
        </ListView>
    </Grid>

The problem I am having is that each ListViewItem has different width, based on the number of elements in the GridView.

How can I force each ListViewItem to use the maximum width of the screen (so that the "Assets/BookShelf.jpg" will be the same for each of the ListViewItems).

Please see the attached image to better demonstrate my problem.

Thanks

Answer 1

use:

<ListView ..>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment" Value="Strech" />

<Setter Property="HorizontalContentAlignment" Value="Strech" />
</Style>
</ListView.ItemContainerStyle>
...
</ListView>

---

Microsoft Certified Solutions Developer - Windows Store Apps Using C#

Answer 2

Thanks Dave :)