UWP

Question

我正在开发一个包含可滑动图像列表的自定义控件。我决定将这个可滑动的图像列表实现为水平方向的 ListView。下面是上述实现的XAML（使用边框和不同的背景颜色只是为了说明问题）：

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

XAML 产生以下输出（我已经用我希望完成的注释对其进行了注释）：

问题：是否可以减小呈现单个列表视图项的框的宽度，从而减少图标之间的交错？理想情况下，我希望能够通过用户指定的宽度来控制交错（在这种情况下，我最终会将其实现为 UserControl）。如果没有办法减少交错，那么有什么替代方法可以达到同样的效果？我已经尝试了 ContentMargin 和 Margin，但收效甚微，发现它并不能解决我的问题。感谢您的帮助！

Answer 1

您需要更改 MinWidth 属性的默认值 ListViewItem:

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

但是，我不能不同意 Sean O'Neil 的观点 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。

UWP - 是否可以减少 UWP 列表视图控件中 ListViewItems 之间的交错？

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

xaml

listview

listviewitem

uwp-xaml