ListViewItem水平Strechting UWP 10

时间:2016-06-25 11:24:55

标签: xaml uwp windows-10-universal uwp-xaml

我想在UWP 10中横向拉伸ListView。我还将HorizontalContentAlignment设置为Stretch。它有点工作,但它不完全是我想要的结果。

我将ListView背景设置为Aqua,你可以看到,ListView本身正在拉伸到100%。 内容也是拉伸,但我在左侧和右侧都有这个空间。

所以我的问题是:如何删除那些"边距"左右?

结果如下:

Screenshot

这是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 个答案:

答案 0 :(得分: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>

您还将网格的填充定义为8,这将导致您项目周围的浅绿色背景。