xamlgridviewuwpadditiondatatemplateselector

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


I use a GridView to display photos and I search an elegant way to allow user to add a new item to a form.

It's in this page that I need to display a list of photos: as a photo represents a "sub sub item" of the form, I wouldn't manage the add of a new photo through the CommandBar. But I would like to use an "Add" button after the last item of the GridView containing the photos.

At this time I only found a solution that partially work: enter image description here

Here is the 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> 

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

=> Is there a better way to do this? Or do you see a an alternative? I'm looking for doing this through a DataTemplateSelector, but that would require me to create a "false" object for displaying the add button...


Solution

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

    If you don't mind the button is in the next line of your last photo, you can use WinRTXamlToolkit's WrapPanel instead of StackPanel to avoid the pictures goes out of the window and put the button inside the GridView's 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>
    

    Result: enter image description here

    If you really want to put the Button side by side after the last item of GridView. The only Option is DataTemplateSelector.