WPF Binding Two Checkboxes with IsChecked Property

Question

I have a WPF UI, with the following elements:

• The checked checkbox is in a DataGridRow.
• The rest is in the DataGridRowDetails. (It contains a smaller DataGrid)

What I want to get done is to bind the two (shown by red arrows) checkboxes together, so that when one is checked, the other also gets checked, and vice-versa.

I have already taken a look at these questions:

1) WPF Binding with 2 Checkboxes

But when I try this, the click handlers stop working. (The checkboxes stop working altogether)

2) wpf bindings between two checkboxes

When I use triggers, one checkbox triggers the other, and it inturn triggers the other, and goes on.. UI gets stuck.

Sample of my code:

<DataGrid x:Name="DataGrid1">
    <DataGrid.Columns>
        <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>


                    <CheckBox x:Name="SelectionCheckBox1" PreviewMouseLeftButtonDown="SelectionCheckBox1_PreviewMouseLeftButtonDown"
                              Loaded="SelectionCheckBox1_Loaded"
                              IsChecked="{Binding ElementName=HeaderCheckBox1, Path=IsChecked, Mode=TwoWay}">
                    </CheckBox>


                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <DockPanel LastChildFill="True">
            <DataGrid>
                <DataGrid.Columns>
                    <DataGridTemplateColumn>
                        <DataGridTemplateColumn.HeaderTemplate>
                             <DataTemplate>


                                 <CheckBox x:Name="HeaderCheckBox1" PreviewMouseLeftButtonDown="HeaderCheckBox_PreviewMouseLeftButtonDown"
                                           IsChecked="{Binding ElementName=SelectionCheckBox1, Path=IsChecked, Mode=TwoWay}">
                                 </CheckBox>


                             </DataTemplate>
                    </DataGridTemplateColumn.HeaderTemplate>
               </DataGrid.Columns>
             </DataGridTemplateColumn>
           </DataGrid>
           </DockPanel>
       </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>

Concern : Because the second Checkbox appears only after the row is selected ( which means the other checkbox is selected), I am unable to find the second checkbox through VisualTreeHelpers also.

Some idea even leading to a possible solution will be much appreciated.

Answer 1

i would suggest 2 way binding them to a property they both can access (somewhere inside the window for example) since with solution 1 you are creating an infinite loop

• Checkbox 1: clicked => notify changed
• Checkbox 2: changed => update => notify changed
• Checkbox 1: changed => update => notify changed
• ...

Answer 2

You will need to create a property in ViewModel say that property is called IsSelected, then you have to bind both these checkboxes to that Property. And it should have its dataContext as your view model and not an Element.

IsChecked="{Binding IsSelected, Mode=TwoWay}"

If your VM is not data context then you will have to traverse to find VM and then bind to it