Home > Software design >  How to make Command binding to CheckBox in ListView?
How to make Command binding to CheckBox in ListView?

Time:10-13

The problem is actually as stated in the title. If the CheckBoxis outside, I can make a command binding as below and it works fine.

My CheckBox command binding doesn't work if I enclose it in a ListView. Also, when I create a CheckBoxCommand in the Model, there is no binding error, but I couldn't figure out how to use CheckBoxCommand in my Model.

<CheckBox>
    <i:Interaction.Triggers>
       <i:EventTrigger EventName="Click">
            <i:InvokeCommandAction Command="{Binding CheckBoxCommand}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</CheckBox>

ViewModel

 public RelayCommand CheckBoxCommand { get; set; }

 public AnalysisViewModel()
 {
     CheckBoxCommand = new RelayCommand(CheckBoxClick);
 }

 private void CheckBoxClick(object param)
 {
     Console.WriteLine("Click");
 }

It does not work in the following case. How can I run it with an application in the following situation?

<ListView ItemsSource="{Binding checkMessageList}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <CheckBox Content="{Binding ID}">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <i:InvokeCommandAction Command="{Binding CheckBoxCommand}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </CheckBox>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListView>

MyModel

public static readonly ObservableCollection<CanBusDataMessageResponse> checkMessageList = new ObservableCollection<CanBusDataMessageResponse>();

public class CanBusDataMessageResponse
{
    public int IDE { get; set; }
    public int ID { get; set; }
    public byte RTR { get; set; }
    public byte DLC { get; set; }
    public byte Byte0 { get; set; }
    public byte Byte1 { get; set; }
    public byte Byte2 { get; set; }
    public byte Byte3 { get; set; }
    public byte Byte4 { get; set; }
    public byte Byte5 { get; set; }
    public byte Byte6 { get; set; }
    public byte Byte7 { get; set; }
    public DateTime Time { get; set; }
}

CodePudding user response:

Up command binding my checkBox doesn't work if I enclose it in a listView.

If your CheckBox is defined in the ItemTemplate of the ListView, its DataContext is set to the item in the checkMessageList that it was created for, not to the data context of the ListBox.

Your original binding below expects a property CheckBoxCommand on items in the collection that is bound to ItemSource. If you add a command to your item model, this binding should work.

<i:InvokeCommandAction Command="{Binding CheckBoxCommand}"/>

In order to bind to the CheckBoxCommand in the view model that is the data context of the ListView (and also contains checkMessageList) you can use a RelativeSource binding.

<i:InvokeCommandAction Command="{Binding DataContext.CheckBoxCommand, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}"/>
  • Related