ListViewItem 水平拉伸 UWP 10 [英] ListViewItem Horizontal Strechting UWP 10

问题描述

我想在 UWP 10 中水平拉伸 ListView.我还将 Horizo​​ntalContentAlignment 设置为 Stretch.它有点工作，但它不完全是我想要的结果.

I want to horizontally stretch a ListView in UWP 10. I also set the HorizontalContentAlignment to Stretch. It kinda works, but its not exactly the result i wanted.

我将 ListView 背景设置为 Aqua，因此您可以看到，ListView 本身正在拉伸至 100%.内容也很长，但我在左边和右边都有这个空间.

I set the ListView background to Aqua so, you could see, that the ListView itself is strechting to 100%. The content is also strechting, but I got this space on the left and on the right.

所以我的问题是:我怎样才能去掉那些左右的边距"?

So my question is: How can i remove those "margins" left and right?

结果如下:

这里是 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>

推荐答案

你需要修改ItemContainerStyle的 padding和margin:

You need to modify ItemContainerStyle's padding and margin:

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

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

You also have defined Grid's padding to 8, what will result in aqua background around your item.

这篇关于ListViewItem 水平拉伸 UWP 10的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！