uwp gridview删除项目,其中包含datatemplate中的按钮

时间:2017-05-07 10:31:54

标签: c# xaml gridview mvvm uwp-xaml

我在UWP应用中有 gridview,我在 datatemplate 的每个gridview项目中添加了按钮,以便它可以用于从gridview中删除/删除该特定项目(将其从 observableCollection 后面删除)。我没有使用 MVVM 方法,因为我对它不太熟悉,我使用普通的Observable Collection来绑定数据和数据模板。

如果您可以建议我更好的方法,使用MVVM的myabe请建议我如何做到这一点。 提前致谢

代码:

XAML GRID VIEW (带红色背景的按钮是我想用来删除项目的按钮)

<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方法来填充集合,它工作正常,我想这不是相关的。

1 个答案:

答案 0 :(得分:1)

我们可以将Command添加到Button以在按下此按钮时调用,我们可以使用参数传递给Command属性。

要使用Command,我们应该能够定义一个继承自ICommandDelegateCommand类。

例如:

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);
    }
}

我们可以在Id中添加Video属性,然后我们可以将Id属性传递给CommandParameter。点击Button后,将触发ExecuteDeleteCommand方法。我们可以使用IdVideo中找到HistoryVideos,并使用Remove方法将其删除。

ViewModel代码:

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>