Question

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

<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产生以下输出（我已经用我希望完成的内容注释了它）：

Issue

问题：是否可以减小渲染各个列表视图项的框的宽度，以便减少图标之间的交错？理想情况下，我希望能够通过用户指定的宽度来控制交错（在这种情况下，我最终会将其实现为UserControl）。如果没有办法减少交错，那么有什么方法可以实现相同的结果呢？我已经尝试过ContentMargin和Margin，但成功非常有限，并发现它无法解决我的问题。谢谢你的帮助！

Answer 1

您需要更改MinWidth的{{1}}属性的默认值：

ListViewItem

但是，我不同意Sean O＆＃39; Neil Carousel XAML Control来自UWP Community Toolkit似乎更适合您的任务。您可以在此官方UWP Toolkit demo app中查看它。

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

1 个答案: