GridView 项目间距答案

【问题标题】：GridView Item SpacingGridView 项目间距
【发布时间】：2019-10-07 07:39:51
【问题描述】：

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

图像中的蓝线是项目的边框。理想情况下，这些项目会用一个小填充物相互抵靠。

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

这是我希望的视图风格。

谢谢

用户界面代码

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

【问题讨论】：

标签： c# gridview uwp uwp-xaml

【解决方案1】：

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

您可以在路径“(Program Files)\Windows Kits\10\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>

【讨论】：

谢谢！我一直在努力寻找似乎永远停止了这一切的财产。不知道为什么我没有想到最小高度，但这可能是我下次首先想到的。