Question

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

图像中的蓝线是项目的边框。理想情况下，这些项目将以较小的间距彼此对齐。

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

您可以从路径“（程序文件）\ 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>

GridView项目间距

1 个答案: