0

我使用 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 执行此操作，但这需要我创建一个“假”对象来显示添加按钮...

4

3 回答 3

1

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

如果您不介意按钮位于最后一张照片的下一行，则可以使用WinRTXamlToolkitWrapPanel代替StackPanel以避免图片超出窗口并将按钮放在' GridViews内FooterTemplate：

xml:

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

于 2016-10-03T09:21:01.150 回答
0

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

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

于 2016-10-02T22:12:41.923 回答
0

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

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