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

【问题标题】：Windows Store App XAML: Gridview doesn't show image on full screenWindows Store App XAML：Gridview 不全屏显示图像
【发布时间】：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>

有人可以帮帮我吗？

【问题讨论】：

标签： c# wpf xaml gridview windows-8

【解决方案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>

【讨论】：