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

Question

I have a horizontal listview and I have set all sorts of stretch properties but the list view item remains in the center leaving some space on right and left side of the actual data template grid. I have also noticed same behaviour on vertical listview.

as you can see in the image above the gap is there and is used by the listviewitem reveal highlight. I want to remove this gap.

Code

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

Styles

<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>

Repro

to reproduce the issue you can see this minimal project : https://github.com/touseefbsb/ListViewItemSpacingBug

Answer 1

This is because the default Padding of a ListViewItem is 12,0,12,0 .

Override the padding with another value:

    <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>

And this is what you get: