水平列表视图项目之间的间距不为零

Question

我在橙色部分（顶部标题）的水平列表视图项目之间的间距有问题，如下图所示：

我无法将间距设置为零，因此项目彼此相邻，没有间隙（红色），就像中间部分的网格视图中的项目（绿色）一样。我已经尝试过填充、边距、项目宽度值......但是在某处设置了某种最小间距会导致这个问题。

代码：

       <Grid  Grid.Row="2" x:Name="HyperfocalContentRoot" Margin="0,15,0,0" Background="{StaticResource AppPageResultThemeColor}">
        <Grid.RowDefinitions>
            <RowDefinition Height="75" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="75" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid x:Name="tbHyperfocalMain" Width="75" Height="75" Margin="1.5,0,-1.5,1.5" DoubleTapped="tbHyperfocalMain_DoubleTapped">
            <TextBlock Grid.Row="0" Grid.Column="0" x:Name="tbHyperfocalHeaderTable" Text="Focal\nlength" 
                Margin="1" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="WrapWholeWords"                       
                Style="{StaticResource ThemeBaseTextBlockStyle}"/>
        </Grid>

        <ScrollViewer Grid.Row="0" Grid.Column="1" x:Name="HyperfocalTop" Margin="1.5,0,0,0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" VerticalScrollMode="Disabled" ViewChanged="HyperfocalTop_ViewChanged" >
            <ListView x:Name="gridHyperfocalTop" Grid.Row="0" Grid.Column="1" Margin="0" ItemsSource="{Binding}" DataContext="{Binding listFocal}" HorizontalContentAlignment="Stretch" IsTapEnabled="False" IsHoldingEnabled="False">

                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal" Height="75"/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>

                <ListView.ItemTemplate>
                    <DataTemplate>
                        <GridViewItem  Margin="-10,1,-20,1" HorizontalAlignment="Center" Width="75" Height="75" Background="{StaticResource DarkGreyThemeColor}">
                            <TextBlock x:Name="tbHyperfocalTop" Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center"  Style="{StaticResource GoldenThemeStyle}"/>
                        </GridViewItem>
                    </DataTemplate>
                </ListView.ItemTemplate>

            </ListView>
        </ScrollViewer>

        <ScrollViewer Grid.Row="1" Grid.Column="0" x:Name="HyperfocalLeft"  Margin="1.5,0,0,0.75" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" ViewChanged="HyperfocalLeft_ViewChanged">

            <ListView x:Name="gridHyperfocalLeft" ItemsSource="{Binding}" HorizontalContentAlignment="Stretch" IsTapEnabled="False" IsHoldingEnabled="False">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <GridViewItem  Margin="-12,1,1,1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="75" Height="75" Background="{StaticResource DarkGreyThemeColor}">
                            <TextBlock x:Name="tbHyperfocalLeft" Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource GoldenThemeStyle}"/>
                        </GridViewItem>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

        </ScrollViewer>

        <ScrollViewer Grid.Row="1" Grid.Column="1" x:Name="HyperfocalMiddle" Margin="1.5" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" ViewChanged="HyperfocalMiddle_ViewChanged">

            <GridView x:Name="gridHyperfocalMiddle" ItemsSource="{Binding}" HorizontalContentAlignment="Stretch" IsTapEnabled="False" IsHoldingEnabled="False" >
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <ContentPresenter x:Name="contentPresenter"/>
                                </ControlTemplate>
                                <!--HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              Margin="{TemplateBinding Padding}" />-->
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GridView.ItemContainerStyle>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid MaximumRowsOrColumns="24" Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Grid x:Name="cellHyperfocal"  Margin="-1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="75" Height="75" Background="{StaticResource MediumDarkGreyThemeColor}" Tapped="cellHyperfocal_Tapped" DoubleTapped="cellHyperfocal_DoubleTapped">
                            <TextBlock x:Name="tbHyperfocal" Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource ThemeBaseTextBlockStyle}" FontSize="14"/>
                        </Grid>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </ScrollViewer>

有什么建议或想法吗？我应该尝试其他方法吗？

提前致谢！

Answer 1

两个简单的步骤

第 1 步

将此添加到您的 ListView

<ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Margin" Value="0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Height" Value="75" />
            <Setter Property="Width" Value="75" />
            <Setter Property="MinWidth" Value="75" />
            <Setter Property="MinHeight" Value="75" />
        </Style>
</ListView.ItemContainerStyle>

第 2 步

对 GridViewItem 中的 DataTemplate 进行小改动

改变

Margin="-10,1,-20,1"

到

边距=“0”

你就完成了:)

Answer 2

这是因为 ListViewItemContainerStyle，所以在你的列表视图中添加这几行，同时删除你设置的 GridViewItem 项目的所有边距。

<ListView>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="-5" />
         </Style>
    </ListView.ItemContainerStyle>
</ListView>

输出：

所以最终的代码是

<Grid  Grid.Row="2" x:Name="HyperfocalContentRoot" Margin="0,15,0,0" Background="{StaticResource AppPageResultThemeColor}">
    <Grid.RowDefinitions>
        <RowDefinition Height="75" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="75" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid x:Name="tbHyperfocalMain" Width="75" Height="75" Margin="1.5,0,-1.5,1.5" DoubleTapped="tbHyperfocalMain_DoubleTapped">
        <TextBlock Grid.Row="0" Grid.Column="0" x:Name="tbHyperfocalHeaderTable" Text="Focal\nlength" 
            Margin="1" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="WrapWholeWords"                       
            Style="{StaticResource ThemeBaseTextBlockStyle}"/>
    </Grid>

    <ScrollViewer Grid.Row="0" Grid.Column="1" x:Name="HyperfocalTop" Margin="1.5,0,0,0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" VerticalScrollMode="Disabled" ViewChanged="HyperfocalTop_ViewChanged" >
        <ListView x:Name="gridHyperfocalTop" Grid.Row="0" Grid.Column="1" Margin="0" ItemsSource="{Binding}" DataContext="{Binding listFocal}" HorizontalContentAlignment="Stretch" IsTapEnabled="False" IsHoldingEnabled="False">

            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Margin" Value="-5" />
                </Style>
            </ListView.ItemContainerStyle>

            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal" Height="75"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>

            <ListView.ItemTemplate>
                <DataTemplate>
                    <GridViewItem HorizontalAlignment="Center" Width="75" Height="75" Background="{StaticResource DarkGreyThemeColor}">
                        <TextBlock x:Name="tbHyperfocalTop" Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center"  Style="{StaticResource GoldenThemeStyle}"/>
                    </GridViewItem>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>
    </ScrollViewer>

    <ScrollViewer Grid.Row="1" Grid.Column="0" x:Name="HyperfocalLeft"  Margin="1.5,0,0,0.75" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" ViewChanged="HyperfocalLeft_ViewChanged">

        <ListView x:Name="gridHyperfocalLeft" ItemsSource="{Binding}" HorizontalContentAlignment="Stretch" IsTapEnabled="False" IsHoldingEnabled="False">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <GridViewItem  Margin="-12,1,1,1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="75" Height="75" Background="{StaticResource DarkGreyThemeColor}">
                        <TextBlock x:Name="tbHyperfocalLeft" Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource GoldenThemeStyle}"/>
                    </GridViewItem>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </ScrollViewer>

    <ScrollViewer Grid.Row="1" Grid.Column="1" x:Name="HyperfocalMiddle" Margin="1.5" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" ViewChanged="HyperfocalMiddle_ViewChanged">

        <GridView x:Name="gridHyperfocalMiddle" ItemsSource="{Binding}" HorizontalContentAlignment="Stretch" IsTapEnabled="False" IsHoldingEnabled="False" >
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <ContentPresenter x:Name="contentPresenter"/>
                            </ControlTemplate>
                            <!--HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          Margin="{TemplateBinding Padding}" />-->
                        </Setter.Value>
                    </Setter>
                </Style>
            </GridView.ItemContainerStyle>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid MaximumRowsOrColumns="24" Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid x:Name="cellHyperfocal"  Margin="-1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="75" Height="75" Background="{StaticResource MediumDarkGreyThemeColor}" Tapped="cellHyperfocal_Tapped" DoubleTapped="cellHyperfocal_DoubleTapped">
                        <TextBlock x:Name="tbHyperfocal" Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource ThemeBaseTextBlockStyle}" FontSize="14"/>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </ScrollViewer>
</Grid>