Question

我有一个水平的列表视图，并且设置了各种拉伸属性，但是列表视图项保留在中心，在实际数据模板网格的左右两侧留有一些空间。我也注意到垂直列表视图上的行为相同。

如您在图像上方看到的那样，

间隙在那里，并且由listviewitem显示高亮显示。我想消除这个差距。

代码

<ListView Style="{StaticResource PivotListViewStyle}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid  Style="{StaticResource TileGridStyle}" >
                <-- other irrelivant xaml-->
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

样式

<Style TargetType="ListView" x:Key="StretchListviewStyle">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Stretch"/>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="ListView" x:Key="PivotListViewStyle" BasedOn="{StaticResource StretchListviewStyle}">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <ItemsStackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>        
</Style>

<Style x:Key="TileGridStretchStyle" TargetType="Grid">
    <Setter Property="Height" Value="{StaticResource MainItemHeight}"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="Margin" Value="2"/>
    <Setter Property="Padding" Value="4"/>
    <Setter Property="Background">
        <Setter.Value>
            <SolidColorBrush Color="{ThemeResource SystemAccentColor}"/>
        </Setter.Value>
    </Setter>
</Style>

<x:Double x:Key="MainItemHeight">114</x:Double>

<Style x:Key="TileGridStyle" TargetType="Grid"  BasedOn="{StaticResource TileGridStretchStyle}">
    <Setter Property="Width" Value="{StaticResource MainItemHeight}"/>
</Style>

复制

要重现该问题，您可以看到以下最小项目：https://github.com/touseefbsb/ListViewItemSpacingBug

Answer 1

这是因为Padding的默认ListViewItem是12,0,12,0。

使用另一个值替代填充：

    <Style TargetType="ListView" x:Key="StretchListviewStyle">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="VerticalContentAlignment" Value="Stretch" />
                    <Setter Property="HorizontalAlignment" Value="Stretch" />
                    <Setter Property="VerticalAlignment" Value="Stretch" />
                    <Setter Property="Padding" Value="1"/>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

这就是你得到的：

uwp列表视图项目永远不会覆盖可用的水平空间

1 个答案: