CODEWITHSUNDEEP
xamllistviewuwpspacing
Imanol Zubiaurre
Imanol Zubiaurre

Reputation: 161

Spacing between horizontal listview items not zero

I having problems with spacing between horizontal listview items of the orange section (top header) as you can see in the images below:

enter image description here

I can't set the spacing to zero, so the items are one next the other without the gap (in red) like are items in the gridview of the middle section (in green). I have tried with padding, margin, items width values... but there's some kind of minimum spacing set somewhere that is giving this problem.

Code:

       <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>

Any advices or ideas? Should I try any other approach?

Thanks in advance!

Upvotes: 2

Views: 419

Answers (2)

Michal Kania
Michal Kania

Reputation: 606

Two simple steps

STEP 1

Add this to your 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>

STEP 2

Make a small change in your DataTemplate in your GridViewItem

change from

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

to

Margin="0"

and you're done :)

Upvotes: 1

Shubham Sahu
Shubham Sahu

Reputation: 2015

It is because of ListViewItemContainerStyle, so add this few more lines in your listview and also remove the all margins for GridViewItem items you set.

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

Output:

Screenshot

So the final codes will be

<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>

Upvotes: 0

Related Questions