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张照片，则不再显示“添加”按钮...

=＆GT;有一个更好的方法吗？或者你看到另一种选择？我正在寻找通过DataTemplateSelector执行此操作，但这需要我创建一个“false”对象来显示添加按钮...

Answer 1

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

如果您不介意该按钮位于上一张照片的下一行，则可以使用WinRTXamlToolkit WrapPanel而不是StackPanel来避免图片从窗口中移出并将按钮放在GridView＆＃39; 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的最后一项之后并排放置Button。唯一的选项是DataTemplateSelector。

Answer 2

最好的解决方案可能是使用CommandBar并添加＆＃34;添加＆＃34;按钮位于面板的最底部，因为这与UWP设计指南最为一致。 GridView还有一个FooterTemplate，它允许您在整个GridView的页脚中添加一些XAML（但不是直接在项目之后）。

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

Answer 3

我也尝试为自己的应用程序做类似的事情，但实际上并没有明显的方法来实现它。关于我的应用程序功能的一些背景知识：这是一个抽认卡应用程序，可在首页的gridview中显示卡片组，并在gridview的前面显示添加按钮。这就是我所做的：

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

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

3 个答案: