ListView 中的 Xamarin Forms 按钮命令绑定 [英] Xamarin Forms Button Command binding inside a ListView

问题描述

我有以下问题，在我看来，我有一个 Listview.在这个列表视图中，我想要两个按钮.一个用于编辑项目，一个用于删除它.

I have the following problem, in my view I have a Listview. In this listview I would like to have two buttons. One for editing the item, one to delete it.

这是我在 XAML 中的列表视图

<ListView Grid.Row="1" x:Name="ArbeitsEinträgeList" ItemsSource="{Binding EintragList}" SelectedItem="{Binding SelectedItem}">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <ViewCell.View>
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition/>
                  <ColumnDefinition/>
                  <ColumnDefinition/>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Text="{Binding Titel}" TextColor="{Binding Fehlerhaft, Converter={StaticResource EintragartConverter}}"></Label>
                <Label Grid.Column="1" Text="{Binding Beginn}" TextColor="{Binding BeginnManuell, Converter={StaticResource EintragartConverter}}"></Label>
                <Label Grid.Column="2" Text="{Binding Ende}" TextColor="{Binding EndeManuell, Converter={StaticResource EintragartConverter}}"></Label>
                <Button Grid.Column="3" Command="{Binding EditEintragCommand}" Text="&#xf040;" FontFamily="../Ressources/fontawesome.ttf#FontAwesome"></Button>
                <Button Grid.Column="4" Command="{Binding DeleteEintragCommand}" Text="&#xF00D;" FontFamily="../Ressources/fontawesome.ttf#FontAwesome"></Button>
              </Grid>
            </ViewCell.View>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>

在我的 ViewModel 中有我需要的一切，我已经使用不在列表视图中的按钮测试了命令，并且效果很好.

In my ViewModel is everything I need, I have tested the commands with a button not in the listview and it works perfect.

如果我将鼠标悬停在绑定上，则会出现消息无法解析符号'...'"

If I hover over the binding, the message "Cannot resolve symbol '...'" appears

推荐答案

Jan,

由于您使用了列表视图并且您的命令位于 DataTemplate 中，因此绑定会附加到 ItemSource 中每个单独模型的绑定上下文.

Since you've used a list view and your commands are inside the DataTemplate, the binding is attached to the binding context of the each individual model in the ItemSource.

解决此问题的方法是执行以下操作:

A way around this is do do the following:

<ListView Grid.Row="1" x:Name="ArbeitsEinträgeList" ItemsSource="{Binding EintragList}" SelectedItem="{Binding SelectedItem}">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <ViewCell.View>
              <Grid x:Name="Item">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition/>
                  <ColumnDefinition/>
                  <ColumnDefinition/>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Text="{Binding Titel}" TextColor="{Binding Fehlerhaft, Converter={StaticResource EintragartConverter}}"></Label>
                <Label Grid.Column="1" Text="{Binding Beginn}" TextColor="{Binding BeginnManuell, Converter={StaticResource EintragartConverter}}"></Label>
                <Label Grid.Column="2" Text="{Binding Ende}" TextColor="{Binding EndeManuell, Converter={StaticResource EintragartConverter}}"></Label>
                <Button Grid.Column="3" BindingContext="{Binding Source={x:Reference ArbeitsEinträgeList}, Path=BindingContext}"   Command="{Binding EditEintragCommand}"   CommandParameter="{Binding Source={x:Reference Item}, Path=BindingContext}" Text="&#xf040;" FontFamily="../Ressources/fontawesome.ttf#FontAwesome"></Button>
                <Button Grid.Column="4" BindingContext="{Binding Source={x:Reference ArbeitsEinträgeList}, Path=BindingContext}" Command="{Binding DeleteEintragCommand}"  CommandParameter="{Binding Source={x:Reference Item}, Path=BindingContext}" Text="&#xF00D;" FontFamily="../Ressources/fontawesome.ttf#FontAwesome"></Button>
              </Grid>
            </ViewCell.View>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>

因此，您将绑定源设置为引用列表视图的绑定上下文(即您的视图模型或ArbeitsEinträgeList".您还可以将命令参数设置为每个单独项目的绑定上下文.如您所见，我在网格上有 x:Name="Item" 和 CommandParameter="{Binding Source={x:Reference Item}, Path=BindingContext}".

So you set the binding source to reference the binding context of the list view (i.e your view model or "ArbeitsEinträgeList". You can also set the command parameter to be the binding context of each individual item. As you can see I have x:Name="Item" on the grid and CommandParameter="{Binding Source={x:Reference Item}, Path=BindingContext}".

简单地说，像这样声明命令允许您在视图模型中定义通用命令，并且当命令执行时，命令参数是单个项目的绑定上下文.

Simply, declaring commands like this allows you do define a generic command in your view model and when the command is executed with the command parameter being the binding context of the individual item.

 public ICommand DeleteEintragCommand
        {
            get
            {
                return new Command((e) =>
                    {
                        var item = (e as MyModelObject);
                        // delete logic on item
                    });
            }
        }

这篇关于ListView 中的 Xamarin Forms 按钮命令绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！