ListViewItem 没有扩展到页面的宽度

Question

我正在定义一个这样的 ListView：

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

我遇到的问题是每个 ListViewItem 都有不同的宽度，具体取决于 GridView 中的元素数量。

如何强制每个 ListViewItem 使用屏幕的最大宽度（以便每个 ListViewItem 的“Assets/BookShelf.jpg”都相同）。

请查看附图以更好地展示我的问题。

谢谢

Answer 1

为了给你最好的答案，我需要一个预期布局的虚拟屏幕截图，但听起来你想要拉伸右列，这可以通过将其宽度设置为星 (*) 而不是 Auto（只占用所需的空间）。

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" /> <!-- ONLY TAKE UP SPACE NEEDED -->
            <ColumnDefinition Width="*" /> <!-- TAKE UP ALL AVAILABLE SPACE -->
        </Grid.ColumnDefinitions>

Answer 2

答案是这段代码：

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

在这段代码中，我们设置了 ItemContainerStyle：Horizo​​ntalAlignment = "Strech" 和 Horizo​​ntalContentAlignment = "Strech"，它成功了。