UWP GridViewのは、私がUWPアプリ</strong>で<strong>GridViewのを持っていると私はそれが/削除<strong>に使用される特定のことを</strong>を削除することができるように<strong>のDataTemplate</strong>に各GridViewの項目に<strong>ボタン</strong>を入れているのDataTemplate

Question

内湖底で項目を削除しますアイテムをグリッドビューから削除します（observableCollectionの背後にある）。私はそれに慣れていないので、MVVMアプローチを使用していない、私はデータとデータのテンプレートのバインディングのための通常のオブザーバブルコレクションを使用しています。

あなたが私にそれをする良い方法を提案できれば、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

このボタンを押したときに呼び出されるButtonにCommandを追加して、パラメータを使用して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); 
    } 
} 

我々は、我々はCommandParameterにIdプロパティを渡すことができ、VideoでIdプロパティを追加することができます。 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>