GridView 项目间距

Question

我有一个日历，每天都有一个 Gridview 和 UserControl 个项目。这些项目只是一个带有图标和文本的矩形。但是，GridView 中的每个项目周围都有不需要的间距。在 DataTemplate 中设置网格的高度显示额外的 space 有多大。

图片中的蓝线是项目的边框。理想情况下，这些项目将通过小填充相互对齐。

在 ItemsPanelTemplate 上设置负边距会使它们靠得更近，但项目的实际间距不会改变，这意味着项目的点击区域重叠。

然而，这是我所希望的视图风格。

谢谢

UI 代码

<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

这个问题是因为 GridViewItem 的默认最小高度是 44，但是您在 DataTemplate 中将 Grid 的高度设置为 28。

您可以在路径为“(Program Files)\Windows Kits\DesignTime\CommonConfiguration\Neutral\UAP\SDK version\Generic”的 generic.xaml 文件中看到这些相关信息。有关详细信息，请参阅 Theme resources in the resource dictionary structure。

要解决此问题，您可以覆盖页面上的默认主题资源。

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

GridView 项目间距

GridView Item Spacing

c#

gridview

uwp

uwp-xaml