GridView Item Spacing

Question

I have a Calendar, each day has a Gridview with UserControl items. These items are just a rectangle with a icon and text. However, each item in the GridView has unwanted spacing around it. Setting the Height of the Grid in the DataTemplate shows how big the extra space is.

The Blue line in the image is the border of the item. Ideally the items would be right up against each other with a small padding.

Putting a negative Margin on the ItemsPanelTemplate brings them closer together but the actual spacing of the items does not change, meaning the tap areas of the items overlaps.

This is the style of view I am hoping for however.

Thanks

UI CODE

<GridView x:Name="gvwInspections" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Hidden">
        <GridView.ContextFlyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="Load" x:Name="mnuLoad" Click="mnuLoad_Click" />
                <MenuFlyoutItem Text="Load + Copy to Calender" x:Name="mnuLoadCalender" Click="mnuLoadCalender_Click"  />
                <MenuFlyoutSeparator />
                <MenuFlyoutItem Text="Cancel" FontWeight="Bold" x:Name="mnuCancel" Click="mnuCancel_Click" />
            </MenuFlyout>
        </GridView.ContextFlyout>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <!--<local:ScheduleItemCalenderPanel />-->
                <StackPanel>
                    <StackPanel.Resources>
                        <Style TargetType="GridViewItem">
                            <Setter Property="VerticalContentAlignment" Value="Stretch" />
                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                            <Setter Property="VerticalAlignment" Value="Stretch" />
                            <Setter Property="HorizontalAlignment" Value="Stretch" />                                
                            <Setter Property="Margin" Value="3,-8,3,-8" />
                        </Style>
                    </StackPanel.Resources>
                </StackPanel>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.ItemTemplate>                
            <DataTemplate>
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="grdScheduleItemDate" Tapped="grdScheduleItemDate_Tapped" DoubleTapped="UserControl_DoubleTapped" Height="28" BorderBrush="#DDDDDD" BorderThickness="1">
                    <Grid.Resources>
                        <res:HexToSolidColorBrush x:Name="BrushConverter" />
                        <res:ForegroundFromBackground x:Name="foregroundToBackground" />
                        <res:StatusToIcon x:Name="statusToIcon" />
                    </Grid.Resources>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Rectangle Grid.ColumnSpan="99" Fill="{Binding BackgroundColour, Converter={StaticResource BrushConverter}}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
                    <!-- status icon -->
                    <BitmapIcon UriSource="{Binding itemStatus, Converter={StaticResource statusToIcon}}" Height="20" Width="20" Margin="4,0,2,0" Foreground="{Binding BackgroundColour, Converter={StaticResource foregroundToBackground}}" />
                    <!-- register -->
                    <TextBlock Grid.Column="1" Text="{Binding sc_element}" Foreground="{Binding BackgroundColour, Converter={StaticResource foregroundToBackground}}" Margin="4,0,2,0" VerticalAlignment="Center" FontSize="12" />
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

Answer 1

This issue is because the default min height of the GridViewItem is 44, but you set the height of the Grid in your DataTemplate is 28.

You could see these relevant information in the generic.xaml file from the path ' (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\SDK version\Generic'. See Theme resources in the resource dictionary structure for more details.

To solve this issue, you could override the default theme resource on your page.

<Page.Resources>
    <x:Double x:Key="GridViewItemMinHeight">28</x:Double>
</Page.Resources>