ListViewItem 水平拉伸 UWP 10

Question

我想在 UWP 10 中水平拉伸 ListView。我还将 HorizontalContentAlignment 设置为 Stretch。它有点管用，但它不完全是我想要的结果。

我将 ListView 背景设置为 Aqua，因此您可以看到 ListView 本身正在拉伸到 100%。内容也很冗长，但是我得到了这个space左右两边

所以我的问题是：我怎样才能删除那些 "margins" 左右？

结果如下：

这里是 XAML:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <AutoSuggestBox x:Name="SalonSearchBox"
                        Grid.Row="0"
                        QueryIcon="Find"
                        PlaceholderText="Suchen..."
                        Margin="8" />
        <ListView x:Name="SalonsListView"
                  Grid.Row="1"
                  Background="Aqua"
                  ItemsSource="{x:Bind ViewModel.Salons, Mode=OneWay}"
                  HorizontalAlignment="Stretch"
                  Margin="0">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment"
                            Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate> 
                <DataTemplate x:DataType="salon:Salon">
                    <Grid Height="110"
                          Padding="8">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.Background>
                            <ImageBrush  ImageSource="{x:Bind ListingImage}"
                                         Stretch="UniformToFill" />
                        </Grid.Background>

                        <TextBlock x:Name="TitleTextBlock"
                                   Grid.Row="1"
                                   Text="{x:Bind Name}"
                                   FontSize="20"
                                   Foreground="White"
                                   FontWeight="SemiBold" />
                        <TextBlock x:Name="LocationTextBlock"
                                   Grid.Row="2"
                                   Foreground="White"
                                   FontWeight="SemiLight">
                            <Run Text="{x:Bind Place.PLZ}" />
                            <Run Text="{x:Bind Place.Address}" />
                        </TextBlock>
                        <TextBlock x:Name="DescriptionTextBlock"
                                   FontWeight="SemiLight"
                                   Grid.Row="3"
                                   x:Phase="1"
                                   Text="{x:Bind Info}"
                                   Foreground="Gray" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Grid>

Answer 1

您需要修改 ItemContainerStyle 的 内边距和外边距：

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

您还已将 Grid 的 填充定义为 8，这将导致您的项目周围出现浅绿色背景。

ListViewItem 水平拉伸 UWP 10

ListViewItem Horizontal Strechting UWP 10

xaml

uwp

windows-10-universal

uwp-xaml