Question

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

我遇到了下一个麻烦：当我添加第一项时，GridView会在底部剪切图像。为了证明这一点，我准备了图像1920x1080px（http://i.imgur.com/pJM0Tdp.png），边框上有红线（在XAML中是#p; 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>

有人可以帮帮我吗？

Answer 1

我发现当你将GridViewItemStyle1的底部边距更改为-12时，它会起作用。

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

12可能是项目之间的默认空间。前段时间我正在阅读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应用商店应用XAML：Gridview不会在全屏显示图像

2 个答案: