locked
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

    Wednesday, May 21, 2014 3:44 AM

Answers

  • 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#

    • Marked as answer by eitanb Wednesday, May 21, 2014 4:30 PM
    Wednesday, May 21, 2014 10:05 AM

All replies

  • 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#

    • Marked as answer by eitanb Wednesday, May 21, 2014 4:30 PM
    Wednesday, May 21, 2014 10:05 AM
  • Thanks Dave :)
    Wednesday, May 21, 2014 4:31 PM