UWP - UWP 목록보기 컨트롤에서 ListViewItem 간의 인터리브를 줄일 수 있습니까?

Question

나는 슬라이딩 가능한 이미지 목록이있는 사용자 지정 컨트롤을 만들고 있습니다. 이 슬라이드 가능한 이미지 목록을 가로 방향으로 ListView로 구현하기로 결정했습니다. 다음은 상기 구현을위한 XAML (테두리의 사용 및 다른 배경 색상이 문제를 설명하기 위해 아니라)이다

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> 

(내가 달성하기 위해 무슨 희망이 그것을 주석했다) :

질문 :는 아이콘 사이의 인터리브가 감소 될 수 있도록, 개인 목록보기 항목이 렌더링되는 내 상자의 폭을 줄일 수 있습니까? 이상적으로, 나는 사용자 정의 너비를 통해 인터리브를 제어 할 수있는 것을 선호합니다 (이 경우 UserControl로 구현하게됩니다). 인터리브를 줄이는 방법이 없다면 동일한 결과를 얻기위한 대안은 무엇입니까? 나는 이미 매우 제한된 성공으로 ContentMargin과 Margin을 시도해 보았고 그것이 내 문제를 해결하지 못한다는 것을 알아 냈습니다. 도움 주셔서 감사합니다.

Answer 1

당신은 ListViewItem의 MinWidth 속성의 기본값을 변경해야

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

그러나, 나는이 UWP Community Toolkit에서 Carousel XAML Control이 당신의 작업에 대해 더 잘 맞는 것 같다 숀 오닐에 동의 할 수 없다. 이 공식 UWP Toolkit demo app에서 살펴볼 수 있습니다.