如何在单击GridViewItem时将新的GridViewItem添加到GridView？

Question

我有一个像图片的想法。但我不知道如何通过代码来完成。请帮帮我。我是新手。

这是我的代码，我写了节目的GridView

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.RowDefinitions> 
     <RowDefinition /> 
     <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <GridView Grid.Row="0" x:Name="gridView" ItemsSource="{x:Bind Tabs}"> 
     <GridView.ItemTemplate> 
      <DataTemplate x:DataType="data:Tab"> 
       <Grid Width="350" Margin="10"> 
        <Grid.RowDefinitions> 
         <RowDefinition/> 
        </Grid.RowDefinitions> 
        <Border BorderBrush="#FF035CA8" BorderThickness="2"> 
         <Image Width="350" Source="{x:Bind Image }" Grid.Row="0"/> 
        </Border> 
        <Grid Margin="0,110,0,0" 
          Height="40" 
          Width="350"> 
         <Grid.Background> 
          <SolidColorBrush Color="#FF035CA8" Opacity="0.34"/> 
         </Grid.Background> 
         <TextBlock Foreground="White" 
            Height="20" 
            HorizontalAlignment="Center" 
            Margin="0" 
            Text="{x:Bind tabName}"/> 
        </Grid> 
       </Grid> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
    </GridView> 
</Grid 

Answer 1

MainPage.xaml中

<Page 
    x:Class="App2.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App2" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <GridView 
      x:Name="gv" 
      IsItemClickEnabled="True" 
      ItemClick="gv_ItemClick"> 
      <GridView.ItemTemplate> 
       <DataTemplate> 
        <local:ItemView/> 
       </DataTemplate> 
      </GridView.ItemTemplate> 
     </GridView> 
    </Grid> 
</Page> 

MainPage.xaml.cs中

using System.Collections.ObjectModel; 
using Windows.UI.Xaml.Controls; 

namespace App2 
{ 
    public sealed partial class MainPage : Page 
    { 
     ObservableCollection<object> items = new ObservableCollection<object>(); 

     public MainPage() 
     { 
      this.InitializeComponent(); 
      this.items.Add(new ItemAddModel()); 
      this.gv.ItemsSource = this.items; 
     } 

     private void gv_ItemClick(object sender, ItemClickEventArgs e) 
     { 
      if (e.ClickedItem is ItemAddModel) 
      { 
       this.items.Insert(this.items.Count - 1, new ItemModel { Text = $"Item {this.items.Count}" }); 
      } 
     } 
    } 
} 

ItemView控件。 xaml

个

<UserControl 
    x:Class="App2.ItemView" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App2" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    d:DesignHeight="300" 
    d:DesignWidth="400"> 

    <Grid 
     Background="White" 
     Width="320" 
     Height="240"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup 
       x:Name="ItemOrAddStates"> 
       <VisualState 
        x:Name="ItemViewState"/> 
       <VisualState 
        x:Name="ItemAddViewState"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames 
          Storyboard.TargetName="ItemViewTextBlock" 
          Storyboard.TargetProperty="Visibility"> 
          <DiscreteObjectKeyFrame 
           KeyTime="0" 
           Value="Collapsed" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames 
          Storyboard.TargetName="ItemAddTextBlock" 
          Storyboard.TargetProperty="Visibility"> 
          <DiscreteObjectKeyFrame 
           KeyTime="0" 
           Value="Visible" /> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <TextBlock 
      x:Name="ItemViewTextBlock" 
      Margin="15" 
      Text="{Binding Text}" 
      FontSize="24" /> 
     <TextBlock 
      x:Name="ItemAddTextBlock" 
      Text="+" 
      Visibility="Collapsed" 
      VerticalAlignment="Center" 
      HorizontalAlignment="Center" 
      FontSize="72" /> 
    </Grid> 
</UserControl> 

ItemView.xaml.cs

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 

namespace App2 
{ 
    public sealed partial class ItemView : UserControl 
    { 
     public ItemView() 
     { 
      this.InitializeComponent(); 
      this.DataContextChanged += ItemView_DataContextChanged; 
     } 

     private void ItemView_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args) 
     { 
      VisualStateManager.GoToState(
       this, 
       args.NewValue is ItemModel 
       ? "ItemViewState" 
       : "ItemAddViewState", 
       false); 
     } 
    } 
} 

class ItemAddModel 
{ 
} 

class ItemModel 
{ 
    public string Text { get; set; } 
}