UWP GridView控件与BUTTOM删除内的DataTemplate

Question

项目我有UWP应用一个GridView和我在的DataTemplate把按钮在每个GridView的项目，以便它可以被用来删除/移除特定从gridview中删除它（从移除它后面的observableCollection）。我没有使用MVVM的方法，因为我对它不太熟悉，我使用一个普通的Observable Collection来绑定数据和数据模板。

如果你可以建议我一个更好的方法来做到这一点，myabe使用MVVM，请告诉我如何做到这一点。 在此先感谢

代码：

XAML网格视图（按钮，红背地面的按钮，我想使用删除项）

<controls:AdaptiveGridView Name="HistoryGridView" StretchContentForSingleRow="False" 
          Style="{StaticResource MainGridView}" 
          ItemClick ="HistoryGridView_SelectionChanged" 
          ItemsSource="{x:Bind HistoryVideos, Mode=OneWay}"> 
    <controls:AdaptiveGridView.ItemTemplate> 
     <DataTemplate x:DataType="data:Video"> 
      <StackPanel Margin="4" > 
       <Grid> 
        <Button Background="Red" 
          HorizontalAlignment="Right" VerticalAlignment="Top" 
          Height="36" Canvas.ZIndex="1" 
          Style="{StaticResource TransparentButton}" Width="36"> 
         <fa:FontAwesome Icon="Close" FontSize="20" HorizontalAlignment="Center" Foreground="White" 
              /> 
        </Button> 
        <Image Canvas.ZIndex="0" Source="{x:Bind Thumbnail}" Style="{StaticResource GridViewImage}"/> 
        <Border Style="{StaticResource TimeBorder}" Height="Auto" VerticalAlignment="Bottom" 
          Canvas.ZIndex="1" 
          HorizontalAlignment="Left"> 
         <TextBlock Text="{x:Bind Duration}" Foreground="White" Height="Auto"/> 
        </Border> 
       </Grid> 
       <TextBlock Text="{x:Bind Name}" Style="{StaticResource GridViewVideoName}"/> 
       <TextBlock Text="{x:Bind ParentName}" Style="{StaticResource GridViewParentName}"/> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch"> 
        <TextBlock Text="{x:Bind Views}" Style="{StaticResource GridViewViews}"/> 
        <TextBlock Text="Views" HorizontalAlignment="Right"/> 
       </StackPanel> 
      </StackPanel> 

     </DataTemplate> 
    </controls:AdaptiveGridView.ItemTemplate> 
</controls:AdaptiveGridView> 

代码背后

public History() 
{ 
    this.InitializeComponent(); 
    HistoryVideos = new ObservableCollection<Video>(); 
} 

public ObservableCollection<Video> HistoryVideos { get; private set; } 

我正在使用onnavigated来填充集合的方法，它工作正常，也我猜这不是相关的。

Answer 1

我们可以Command添加到Button当按下这个按钮来调用，我们可以使用参数传递给Command属性。

要使用命令，我们应该能够定义从ICommand继承的DelegateCommand类。

例如：

internal class DelegateCommand : ICommand 
{ 
    private Action<object> execute; 
    private Func<object, bool> canExecute; 

    public DelegateCommand(Action<object> execute) 
    { 
     this.execute = execute; 
     this.canExecute = (x) => { return true; }; 
    } 

    public DelegateCommand(Action<object> execute, Func<object, bool> canExecute) 
    { 
     this.execute = execute; 
     this.canExecute = canExecute; 
    } 

    public bool CanExecute(object parameter) 
    { 
     return canExecute(parameter); 
    } 

    public event EventHandler CanExecuteChanged; 

    public void RaiseCanExecuteChanged() 
    { 
     if (CanExecuteChanged != null) 
     { 
      CanExecuteChanged(this, EventArgs.Empty); 
     } 
    } 

    public void Execute(object parameter) 
    { 
     execute(parameter); 
    } 
} 

我们所用的Video添加Id财产，那么我们可以在Id财产传给CommandParameter。当我们点击Button时，将会触发ExecuteDeleteCommand方法。我们可以使用Id找到HistoryVideos中的Video，并使用Remove方法将其删除。

视图模型代码：

internal class ViewModel 
{ 
    private ObservableCollection<Viedo> _videos; 

    public ObservableCollection<Viedo> Videos 
    { 
     get 
     { 
      return _videos; 
     } 
     set 
     { 
      if (_videos != value) 
      { 
       _videos = value; 
      } 
     } 
    } 

    public ICommand DeleteCommand { set; get; } 

    private void ExecuteDeleteCommand(object param) 
    { 
     int id = (Int32)param; 
     Viedo cus = GetCustomerById(id); 

     if (cus != null) 
     { 
      Videos.Remove(cus); 
     } 
    } 

    private Viedo GetCustomerById(int id) 
    { 
     try 
     { 
      return Videos.First(x => x.Id == id); 
     } 
     catch 
     { 
      return null; 
     } 
    } 

    public ViewModel() 
    { 
     Videos = new ObservableCollection<Viedo>(); 
     for (int i = 0; i < 5; i++) 
     { 
      Videos.Add(new Viedo()); 
      Videos[i].Name = "Name"; 
      Videos[i].Id = i; 
     } 

     this.DeleteCommand = new DelegateCommand(ExecuteDeleteCommand); 
    } 
} 

的XAML代码：

<GridView Name="MyGridView" ItemsSource="{Binding Videos}"> 
    <GridView.ItemTemplate> 
     <DataTemplate> 
      <StackPanel> 
       <TextBlock Text="{Binding Name}"></TextBlock> 
       <Button Background="Red" 
        HorizontalAlignment="Right" VerticalAlignment="Top" 
        Height="36" Canvas.ZIndex="1" 
       Width="36" Command="{Binding DataContext.DeleteCommand, ElementName=MyGridView}" CommandParameter="{Binding Id}"> 
       </Button> 
      </StackPanel> 
     </DataTemplate> 
    </GridView.ItemTemplate> 
</GridView> 

背后的代码：

private ViewModel myViewModel; 

public MainPage() 
{ 
    this.InitializeComponent(); 
    myViewModel = new ViewModel(); 
    MyGridView.DataContext = myViewModel; 
} 

更新：

<GridView Name="MyGridView" ItemsSource="{x:Bind myViewModel.Videos}"> 
    <GridView.ItemTemplate> 
     <DataTemplate x:DataType="local:Viedo"> 
      <StackPanel> 
       <TextBlock Text="{x:Bind Name}"></TextBlock> 
       <Button Background="Red" 
        HorizontalAlignment="Right" VerticalAlignment="Top" 
        Height="36" Canvas.ZIndex="1" 
       Width="36" Command="{Binding DataContext.DeleteCommand, ElementName=MyGridView}" CommandParameter="{Binding Id}"> 
       </Button> 
      </StackPanel> 
     </DataTemplate> 
    </GridView.ItemTemplate> 
</GridView>