Windows Store App XAML：Gridview 不全屏显示图像

Posted 2023-04-12

【中文标题】Windows Store App XAML：Gridview 不全屏显示图像

【英文标题】：Windows Store App XAML: Gridview doesn't show image on full screen

【发布时间】：2015-05-02 02:51:25

【问题描述】：

几天前，我开始使用 C#/XAML 开发一个 Windows 应用商店应用程序。在我的应用程序中，我想显示带有图像的 GridView，但第一个图像必须全屏显示（例如，如果用户的屏幕为 1920x1080 像素，则第一个 GridView 项必须为 1920x1080 像素）。

我遇到了下一个问题：当我添加第一个项目时，GridView 会在底部剪切图像。 为了证明这一点，我准备了图像 1920x1080px (http://i.imgur.com/pJM0Tdp.png)，边框上有红线（在 XAML 中是 1.png）。正如您在我的应用程序http://i.imgur.com/56kKYcY.png 的屏幕截图中看到的那样，顶部、左侧和右侧都有红线，但底部的线缺失，黑色背景可见。

这是我的 XAML 代码：

<Page.Resources>
    <Style x:Key="GridViewItemStyle1" TargetType="GridViewItem">
        <Setter Property="FontFamily" Value="ThemeResource ContentControlThemeFontFamily"/>
        <Setter Property="FontSize" Value="ThemeResource ControlContentThemeFontSize"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="Margin" Value="0,0,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <GridViewItemPresenter CheckHintBrush="ThemeResource ListViewItemCheckHintThemeBrush"
                                           CheckBrush="ThemeResource ListViewItemCheckThemeBrush"
                                           ContentMargin="0"
                                           ContentTransitions="TemplateBinding ContentTransitions"
                                           CheckSelectingBrush="ThemeResource ListViewItemCheckSelectingThemeBrush"
                                           DragForeground="ThemeResource ListViewItemDragForegroundThemeBrush"
                                           DragOpacity="ThemeResource ListViewItemDragThemeOpacity"
                                           DragBackground="ThemeResource ListViewItemDragBackgroundThemeBrush"
                                           DisabledOpacity="ThemeResource ListViewItemDisabledThemeOpacity"
                                           FocusBorderBrush="ThemeResource ListViewItemFocusBorderThemeBrush"
                                           HorizontalContentAlignment="TemplateBinding HorizontalContentAlignment"
                                           Padding="TemplateBinding Padding"
                                           PointerOverBackgroundMargin="0"
                                           PlaceholderBackground="ThemeResource ListViewItemPlaceholderBackgroundThemeBrush"
                                           PointerOverBackground="ThemeResource ListViewItemPointerOverBackgroundThemeBrush"
                                           ReorderHintOffset="ThemeResource ListViewItemReorderHintThemeOffset"
                                           SelectedPointerOverBorderBrush="ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush"
                                           SelectionCheckMarkVisualEnabled="True"
                                           SelectedForeground="ThemeResource ListViewItemSelectedForegroundThemeBrush"
                                           SelectedPointerOverBackground="ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush"
                                           SelectedBorderThickness="ThemeResource GridViewItemCompactSelectedBorderThemeThickness"
                                           SelectedBackground="ThemeResource ListViewItemSelectedBackgroundThemeBrush"
                                           VerticalContentAlignment="TemplateBinding VerticalContentAlignment"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<GridView ItemsSource="Binding List" ItemContainerStyle="StaticResource GridViewItemStyle1">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Image Source="Assets/1.png" Width="1920" Height="1080"/>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

有人可以帮帮我吗？

【参考方案1】：

我发现，当您将 GridViewItemStyle1 中的下边距更改为 -12 时，它会起作用。

<Setter Property="Margin" Value="0,0,0,-12"/>

12 可能是项目之间的默认空间。前段时间我在阅读 Windows Phone 7 设计指南，其中提到 12 是一个神奇的数字，用于表示边距和大小。

【讨论】：

您的解决方案有效，但当我尝试选择项目时它无法正常工作。当我的 GridView 中有多个项目并且我试图选择其中一项时，我看到它们相互重叠，因为我们使用 在 GridViewItemStyle1 中。

【参考方案2】：

我找到了解决这个问题的简单方法。所有我们需要的，它在 GridView 中设置 Padding="0"。 这是解决我的问题的代码：

<GridView Padding="0" ItemsSource="Binding List" ItemContainerStyle="StaticResource GridViewItemStyle1">
<GridView.ItemTemplate>
    <DataTemplate>
        <Image Source="Assets/1.png" Width="1920" Height="1080"/>
    </DataTemplate>
</GridView.ItemTemplate>