点击列表视图项目上的手势

时间:2017-07-06 10:46:11

标签: c# xaml xamarin xamarin.forms

我在点击列表视图中的项目后尝试打开另一个视图。 我尝试添加TapGestureRegonizer甚至添加ViewCell网格等等。这些似乎都不起作用。我已经为标签添加了一个轻击手势,这似乎有效,但同样不适用于列表视图项目。这看起来像列表视图这样的简单问题,但似乎没有内置的功能。

Xaml:

<ListView x:Name="dataList"
      ItemsSource="{Binding routeLabels}"
      HasUnevenRows="True"
      Grid.Row="1"
      Grid.Column="0"
      Grid.ColumnSpan="3">
</ListView>

背后的代码:

var listviewgesture = new TapGestureRecognizer();
listviewgesture.SetBinding(TapGestureRecognizer.CommandProperty,"LoadRoutePage");
dataList.GestureRecognizers.Add(listviewgesture);

视图模型:

public ICommand LoadRoutePage { get; protected set; }



public DriverDashboardViewModel(INavigation navigation,MessagDatabase database)
    {
        this._database = database;
        this.Navigation = navigation;
        this.LoadNotifications = new Command(async () => await OpenNotificationsPage());
        this.LoadRoutePage = new Command(async () => await OpenRoutePage());

    }

public async Task OpenRoutePage()
    {

        await Navigation.PushAsync(new RoutePageView());
    }

要明确LoadNotifications方法在打开网页时有效,但LoadRoutePage没有。所以我知道视图和视图模型之间存在某种程度的通信。

3 个答案:

答案 0 :(得分:7)

您不应该向TapGestureRecognizer添加ListView。每个单元格都有处理它们的事件,而GestureRecognizer可能只会混淆ListView关于点击应该做什么。有几种方法可以解决这个问题。

<强> 1。 SelectedItem绑定

SelectedItem属性绑定到ListView并在该属性的setter中处理方法调用。

<ListView x:Name="dataList" ItemsSource="{Binding routeLabels}"
          HasUnevenRows="True" Grid.Row="1" Grid.Column="0"        
          Grid.ColumnSpan="3" SelectedItem="{Binding SelectedItem}">
</ListView>

在你的viewmodel中:

string _selectedItem;

public string SelectedItem {
    get {return _selectedItem; } 
    set 
    { 
        _selectedItem = value;
        // Additional code
    }
}

<强> 2。使用内置事件ItemSelected或ItemTapped

ListView有一些您可以挂钩的事件,名为ItemSelectedItemTapped。这些可以在代码隐藏中捕获,并且可以处理您尝试实现的目标。

<ListView x:Name="dataList" ItemsSource="{Binding routeLabels}"
          HasUnevenRows="True" Grid.Row="1" Grid.Column="0"        
          Grid.ColumnSpan="3" ItemSelected="Handle_ItemSelected" ItemTapped="Handle_ItemTapped">
</ListView>

第3。使用事件命令与行为绑定

由于您使用的是视图模型,因此理想情况下您不需要这些事件,因为它们是在UI端处理的。有一些NuGet包可以将事件转换为您可以在viewmodel中处理的Command。例如,查看Corcav.Behaviors

<强> 4。创建您自己的行为

我有一个我经常使用的,看起来像这样:

public class ListViewSelectedItemBehavior : Behavior<ListView>
{
    public static readonly BindableProperty CommandProperty = BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(ListViewSelectedItemBehavior));

    public ICommand Command
    {
        get { return (ICommand)GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }

    public ListView AssociatedObject { get; private set; }

    protected override void OnAttachedTo(ListView bindable)
    {
        base.OnAttachedTo(bindable);
        AssociatedObject = bindable;
        bindable.BindingContextChanged += OnBindingContextChanged;
        bindable.ItemSelected += OnListViewItemSelected;
    }

    protected override void OnDetachingFrom(ListView bindable)
    {
        base.OnDetachingFrom(bindable);
        bindable.BindingContextChanged -= OnBindingContextChanged;
        bindable.ItemSelected -= OnListViewItemSelected;
        AssociatedObject = null;
    }

    private void OnBindingContextChanged(object sender, EventArgs e)
    {
        OnBindingContextChanged();
    }

    private void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        if (Command == null)
            return;

        if (Command.CanExecute(e.SelectedItem))
            Command.Execute(e.SelectedItem);
    }

    protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();
        BindingContext = AssociatedObject.BindingContext;
    }
}

要将此添加到您的ListView,您只需向其添加行为:

<ListView x:Name="dataList" ItemsSource="{Binding routeLabels}"
          HasUnevenRows="True" Grid.Row="1" Grid.Column="0"        
          Grid.ColumnSpan="3">
    <ListView.Behaviors>
        <behaviors:ListViewSelectedItemBehavior Command="{Binding ItemSelectedCommand}" />
    </ListView.Behaviors>
</ListView>

在这种情况下,ItemSelectedCommand是ViewModel中的Command对象。

答案 1 :(得分:0)

不确定我是否理解正确,但是当有人点击列表视图的元素时,您正试图让事件发生?

如果是这样,您不需要识别器,只需在XAML中添加ItemTapped:

<ListView x:Name="dataList"
      ItemsSource="{Binding routeLabels}"
      HasUnevenRows="True"
      Grid.Row="1"
      Grid.Column="0"
      ItemTapped="Name of event"
      Grid.ColumnSpan="3">
</ListView>

这将为您生成一个事件(在创建ItemTapped时只需执行双选项卡),在这里您可以放置​​代码

答案 2 :(得分:0)

您正在将命令而不是事件绑定到“Tapped”事件。尝试这样的事情:

代码背后的代码:

var listviewgesture = new TapGestureRecognizer();
listviewgesture.Tapped += Handle_listViewItemTapped;
dataList.GestureRecognizers.Add(listviewgesture);

视图模型:

private void Handle_listViewItemTapped(object sender, EventArgs e)
{
    viewModel.OpenRoutePage();
}