Интервал между горизонтальными элементами списка не ноль

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

Сделайтенебольшое изменение в DataTemplate в вашем GridViewItem

изменение с

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

до

Margin = "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>