How to bind to IsReadOnly property of DataGridCheckBoxColumn in xaml?

Question

I am trying to bind to the IsReadOnly property but it doesn’t seem to work. How could I achieve this? What is wrong with my approach? Below is sample code replicating the issue.

Update: added the code behind file... I have a observable collection hanging as a property from the code behind, which is used as the data context. The problem is not when property changes, even when I bind it for the first time the checked property is binded correctly but IsReadonly isn't.

public class ModelClass:INotifyPropertyChanged
{
    private bool m_IsReadOnly;
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string propName)
    {
        if(PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));

        }
    }
    public bool IsReadOnly
    {
        get { return m_IsReadOnly; } 
        set
        {
            m_IsReadOnly = value;
            OnPropertyChanged("IsReadOnly");
        }
    }
}

---

<Window x:Class="TestWpfApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:TestWpfApp"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525"
    DataContext="{Binding RelativeSource={RelativeSource Self}}" >

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="63*"/>
        <RowDefinition Height="17*"/>
    </Grid.RowDefinitions>
    <DataGrid x:Name="modelClassDataGrid"
              AutoGenerateColumns="False" 
              EnableRowVirtualization="True" 
              ItemsSource="{Binding Models}" 
              Grid.RowSpan="2" RowDetailsVisibilityMode="VisibleWhenSelected">
        <DataGrid.Columns>
            <DataGridCheckBoxColumn x:Name="col1" 
                                    Binding="{Binding IsReadOnly}" 
                                    IsReadOnly="{Binding IsReadOnly}" //doesn't work
                                    Header="With Binding" 
                                    Width="SizeToHeader"/>
            <DataGridCheckBoxColumn x:Name="col2" 
                                    Binding="{Binding IsReadOnly}" 
                                    IsReadOnly="True"
                                    Header="Without Binding" 
                                    Width="SizeToHeader"/>
        </DataGrid.Columns>
    </DataGrid>
    <DataGrid x:Name="dataGrid" HorizontalAlignment="Left" Margin="324,163,0,0" VerticalAlignment="Top"/>
</Grid>

  public partial class MainWindow : Window
{
    private ObservableCollection<ModelClass> _models = new ObservableCollection<ModelClass>(new List<ModelClass>()
    {
        new ModelClass() {IsReadOnly = false},
        new ModelClass() {IsReadOnly = true},
        new ModelClass() {IsReadOnly = false},
    });

    public MainWindow()
    {
        InitializeComponent();
    }

    public ObservableCollection<ModelClass> Models
    {
        get { return _models; }
    }
}

Answer 1

It's because there are two types of element style inside the <DataGridCheckBoxColumn>, and you need to specify the IsHitTestVisible="False" argument for the ElementStyle.

 <DataGridCheckBoxColumn x:Name="col1" 
                                Binding="{Binding IsReadOnly}" 
                                IsReadOnly="{Binding IsReadOnly}"
                                ElementStyle="{StaticResource ReadOnlyCheckBoxStyle}"  
                                Header="With Binding" 
                                Width="SizeToHeader"/>

and the ReadOnlyCheckBoxStyle like this

<Style x:Key="ReadOnlyCheckBoxStyle" TargetType="{x:Type CheckBox}">
      <Setter Property="IsHitTestVisible" Value="False"/> 
</Style>