Saya sedang mengerjakan kontrol khusus yang merupakan daftar gambar yang dapat digeser. Saya memutuskan untuk menerapkan daftar gambar yang dapat digeser ini sebagai ListView dengan orientasi Horizontal. Di bawah ini adalah XAML untuk implementasi tersebut (penggunaan Borders dan warna latar belakang yang berbeda hanya untuk mengilustrasikan masalah):

<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 itu menghasilkan output berikut (saya telah menjelaskannya dengan apa yang ingin saya capai):

Issue

Pertanyaan: Apakah mungkin untuk mengurangi lebar kotak di mana masing-masing Item Tampilan Daftar dirender, sehingga interleave di antara ikon dapat dikurangi? Idealnya, saya lebih suka bahwa interleave dapat dikontrol melalui lebar yang ditentukan pengguna (dalam hal ini, saya akan menerapkan ini sebagai UserControl). Jika tidak ada cara untuk mengurangi interleave, lalu apa alternatif untuk mencapai hasil yang sama? Saya telah mencoba ContentMargin dan Margin dengan keberhasilan yang sangat terbatas dan ternyata tidak menyelesaikan masalah saya. Terima kasih atas seluruh bantuan Anda!

1
AutomationZombie 25 November 2017, 03:40

1 menjawab

Jawaban Terbaik

Anda perlu mengubah nilai default properti MinWidth dari ListViewItem:

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

Namun, saya tidak setuju dengan Sean O'Neil bahwa Carousel XAML Control dari UWP Community Toolkit tampaknya lebih cocok untuk Anda tugas. Anda dapat melihatnya di Aplikasi demo UWP Toolkit.

1
A. Milto 25 November 2017, 02:01