ListViewItem Horizontal Strechting UWP 10

问题

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.

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?

Here is the result:

And here is the 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>

回答1:

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>

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

来源：https://stackoverflow.com/questions/38027960/listviewitem-horizontal-strechting-uwp-10

标签

xaml

uwp

windows-10-universal

uwp-xaml