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

Question

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

我遇到了下一个麻烦：当我添加第一个项目时，GridView 在底部剪切图像。为了证明这一点，我准备了一张1920x1080px的图片（http://i.imgur.com/pJM0Tdp.png) with Red line on border (it's 1.png in XAML). As you can see on screenshot of my app 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>

有人可以帮帮我吗？

Answer 1

我发现当您将 GridViewItemStyle1 中的底部边距更改为 -12 时，它就可以工作了。

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

12 可能是项目之间的默认 space。前段时间我正在阅读 Windows Phone 7 条设计指南，其中提到 12 是边距和尺寸的幻数。

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

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

Windows Store App XAML: Gridview doesn't show image on full screen

c#

wpf

xaml

gridview

windows-8