UWP

Question

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

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

我需要在此页面中显示照片列表：因为照片代表表单的 "sub sub item"，所以我不会通过 CommandBar 管理添加新照片。但我想在包含照片的 GridView 的最后一项之后使用 "Add" 按钮。

此时我只找到了一个部分有效的解决方案：

这里是 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 执行此操作，但这需要我创建一个 "false" 对象来显示添加按钮...

Answer 1

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

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

Answer 2

As I use a StackPanel, the Add button is no longer visible if I display 3 photos...

如果您不介意按钮在上一张照片的下一行，您可以使用 WinRTXamlToolkit 的 WrapPanel 而不是 StackPanel 以避免图片丢失在 window 之外，将按钮放在 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>

结果：

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

Answer 3

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

我的套牌 class，我给了它 bool 属性 isButton
在可观察的牌组集合中，将第一个项目的 isButton 设置为 true
为 gridview 创建两个数据模板（面板和按钮）并为 gridview 创建一个数据模板选择器，并检查 isButton 属性
如果 isButton 是 true，模板选择器将使用按钮模板
否则使用套牌模板

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

UWP - GridView : how to add an "Add" button after the last item?

xaml

gridview

add

datatemplateselector