UWP - Is it possible to reduce the interleave between ListViewItems in a UWP List View control?

Question

I am working on a custom control that a slidable list of images. I decided to implement this slideable image list as a ListView with Horizontal orientation. Below is the XAML for the said implementation (the use of Borders and different background colors is only to illustrate the issue):

<Page
    x:Class="VanillaListView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:VanillaListView"
    mc:Ignorable="d">

    <Page.Resources>
        <DataTemplate x:Key="ListViewItemTemplate" x:DataType="BitmapImage">
            <Border BorderBrush="Red" 
                    BorderThickness="1" 
                    Padding="0"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Background="White">
                <Image x:Name="theIcon"
                        Stretch="UniformToFill"
                        Source="{Binding Path=DisplayImage}"
                        HorizontalAlignment="Center" 
                        VerticalAlignment="Center">
                </Image>
            </Border>
        </DataTemplate>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="6.7*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="80*"/>
        </Grid.RowDefinitions>


        <ListView x:Name="theListView"
            ItemsSource="{Binding MyImageList}" 
            Grid.Row="0"
            ItemTemplate="{StaticResource ListViewItemTemplate}"
            ScrollViewer.HorizontalScrollBarVisibility="Hidden"
            ScrollViewer.HorizontalScrollMode="Enabled"
            ScrollViewer.VerticalScrollBarVisibility="Hidden" 
            ScrollViewer.VerticalScrollMode="Disabled">

            <ListView.DataContext>
                <local:MyViewModel/>
            </ListView.DataContext>

            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsStackPanel Orientation="Horizontal" 
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>

            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Margin" Value="0"/>
                    <Setter Property="HorizontalAlignment" Value="Center"/>
                    <Setter Property="VerticalAlignment" Value="Top"/>
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                    <Setter Property="BorderBrush" Value="Black"/>
                    <Setter Property="BorderThickness" Value="1"/>
                    <Setter Property="Background" Value="LightBlue"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListViewItem">
                                <ListViewItemPresenter HorizontalAlignment="Center" 
                                    HorizontalContentAlignment="Center"
                                    ListViewItemPresenterHorizontalContentAlignment="Center"
                                    ListViewItemPresenterPadding="0"
                                    Margin="0"
                                    BorderThickness="1" BorderBrush="Black"
                                    ListViewItemPresenterVerticalContentAlignment="Top"
                                    Background="LightBlue"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>
    </Grid>
</Page>

That XAML produces the following output (I have annotated it with what I hope to accomplish):

Question: Is it possible to reduce the width of the box within which the individual List View Items are rendered, so that the interleave between the icons can be reduced? Ideally, I’d prefer that the interleave be able to be controlled via a user specified width (in which case, I will end up implementing this as a UserControl). If there isn’t a way to reduce the interleave, then what are the alternatives to accomplish the same result? I have already tried ContentMargin and Margin with very limited success and found out that it doesn’t solve my problem. Thanks for all your help!

Answer 1

You need to change the default value of MinWidth property of ListViewItem:

    <ListView x:Name="theListView" ...>
        ...
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                ...
                <Setter Property="MinWidth" Value="0"/>
                ...
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

However, I can't disagree with Sean O'Neil that Carousel XAML Control from the UWP Community Toolkit seems to fit better for your task. You can take a look at it in this official UWP Toolkit demo app.