UWP - GridView：如何在最后一项之后添加“添加”按钮？

Question

我使用 GridView 来显示照片，并寻找一种优雅的方式来允许用户向表单添加新项目。

• 表单包含很多字段：它显示在一个 Pivot 中，其中每个 PivotItem 代表表单的一个类别。
• 某些类别包含一个或多个子项：它们通过主从页面显示。

我需要在这个页面中显示照片列表：由于照片代表表单的“子子项”，因此我不会通过 CommandBar 管理添加新照片。但我想在包含照片的 GridView 的最后一项之后使用“添加”按钮。

此时我只找到了部分可行的解决方案：

这是 XAML：

<Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Photos"  Grid.Row="0"/>
<StackPanel Orientation="Horizontal" Grid.Row="1">
    <GridView ItemsSource="{Binding images}">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Gray" BorderThickness="1" 
                        Padding="10"
                        Height="150" Width="190">
                    <Image Stretch="UniformToFill"
                           Source="{Binding bitmap_image}" />
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
    <Border BorderBrush="Gray" BorderThickness="1" 
            Padding="10"
            Height="150" Width="190">
        <Button Command="{Binding Path=DataContext.AddPhotoCommand, ElementName=DetailsPage}"
                Height="100" Width="100">
            <Viewbox>
                <SymbolIcon Symbol="Add"/>
            </Viewbox>
        </Button>
    </Border>
</StackPanel>
</Grid> 

当我使用 StackPanel 时，如果我显示 3 张照片，则添加按钮不再可见...

=> 有更好的方法吗？还是您看到了替代方案？我正在寻找通过 DataTemplateSelector 执行此操作，但这需要我创建一个“假”对象来显示添加按钮...

Answer 1

当我使用 StackPanel 时，如果我显示 3 张照片，则添加按钮不再可见...

如果您不介意按钮在最后一张照片的下一行，您可以使用WinRTXamlToolkit 的WrapPanel 而不是StackPanel 以避免图片跳出窗口并放置按钮在GridView 的FooterTemplate 内：

Xaml：

<Page
x:Class="AddButtonSample.MainPage"
xmlns:controls="using:WinRTXamlToolkit.Controls"
...
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBlock Text="Photos"  Grid.Row="0"/>
    <controls:WrapPanel Orientation="Horizontal" Grid.Row="1">
        <GridView ItemsSource="{Binding images}">
            <GridView.FooterTemplate>
                <DataTemplate>
                    <Button Command="{Binding Path=AddPhotoCommand}" Height="100" Width="100">
                        <Viewbox>
                            <SymbolIcon Symbol="Add"/>
                        </Viewbox>
                    </Button>
                </DataTemplate>
            </GridView.FooterTemplate>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="Gray" BorderThickness="1" 
                    Padding="10"
                    Height="150" Width="190">
                        <Image Stretch="UniformToFill"
                       Source="{Binding bitmap_image}" />
                    </Border>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </controls:WrapPanel>
</Grid>

结果：

如果你真的想把按钮并排放在GridView 的最后一项之后。唯一的选项是DataTemplateSelector。

Answer 2

最好的解决方案可能是使用CommandBar 并将“添加”按钮放在面板的最底部，因为这将最符合 UWP 设计指南。 GridView 也有一个FooterTemplate，它允许您在整个GridView 的页脚中添加一些XAML（但不能直接在项目之后）。

如果您仍希望将添加项作为GridView 内容的一部分，则您确实需要使用假项和DataTemplateSelector。这个解决方案不是很干净，但可能是唯一简单的方法。

Answer 3

我也尝试为自己的应用程序做类似的事情，但确实没有明显的方法来实现它。我的应用程序的一些背景知识：它是一个抽认卡应用程序，在主页的网格视图中显示卡片组，添加按钮位于网格视图的前面。这就是我所做的：

1. 对于我的甲板类，我给了它一个bool 属性isButton
2. 在可观察的牌组中，将第一项的isButton设置为true
3. 为gridview（甲板和按钮）制作两个数据模板，为gridview制作一个数据模板选择器，并检查isButton属性
4. 如果isButton 是true，模板选择器将使用按钮模板
5. 否则使用甲板模板