When is a WPF DataGrid read-only CheckBox not read-only?

I found the answer to this riddle when I decided to style the DataGridCheckBoxColumn of Microsoft’s WPF DataGrid. By default the CheckBox displayed by the column template is not centered horizontally or vertically. I thought this looked at little tacky so I decided to apply a custom Style to the ElementStyle (and EditElementStyle) property.

<Style  x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}" BasedOn="{StaticResource {x:Type CheckBox}}">
    <Setter Property="HorizontalAlignment" Value="Center"/> 
<Setter Property="Margin" Value="0,2,0,0"/> </Style>
<toolkit:DataGridCheckBoxColumn Binding="{Binding IsPensioner}" 
Header
="Pensioner?"
ElementStyle="{StaticResource CheckBoxStyle}"
EditingElementStyle="{StaticResource CheckBoxStyle
}"/> <toolkit:DataGridCheckBoxColumn Binding="{Binding IsEditing,Mode=OneWay}"
Header="Is Editing"
ElementStyle="{StaticResource CheckBoxStyle}"

IsReadOnly="True"
/>

What I later discovered is that applying this style has somehow made my read-only CheckBox editable. But only via mouse clicks! Using the keyboard to focus to the cell and pressing Space didn’t cause the CheckBox to toggle, but left clicking on the CheckBox did. What’s going on?

My guess is that the default style applied to the DataGridCheckBoxColumn’s CheckBox in non-edit mode (ElementStyle) sets the IsHitTestVisible property to False to disable clicking on the cell. The keyboard events are swallowed by the DataGrid using Preview events – so no styling is required to prevent keyboard access.

The rule would therefore appear to be that if you set ElementStyle on the DataGridCheckBoxColumn you must include IsHitTestVisible=”False” to prevent it from “seeming” that the control allows edits.

<Style  x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}" BasedOn="{StaticResource {x:Type CheckBox}}">
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="Margin" Value="0,2,0,0"/>
</Style>
<Style  x:Key="ReadOnlyCheckBoxStyle" TargetType="{x:Type CheckBox}" BasedOn="{StaticResource CheckBoxStyle}">
    <Setter Property="IsHitTestVisible" Value="False"/>
</Style>
<toolkit:DataGridCheckBoxColumn Binding="{Binding IsPensioner}" 
                                Header="Pensioner?" 
                                ElementStyle="{StaticResource ReadOnlyCheckBoxStyle}" 
                                EditingElementStyle="{StaticResource CheckBoxStyle}"/>
<toolkit:DataGridCheckBoxColumn Binding="{Binding IsEditing,Mode=OneWay}" 
                                Header="Is Editing"
                                ElementStyle="{StaticResource ReadOnlyCheckBoxStyle}" 
                                IsReadOnly="True"/>
 

What did you think of this article?




Trackbacks
  • No trackbacks exist for this post.
Comments

Leave a comment

Submitted comments are subject to moderation before being displayed.

 Name

 Email (will not be published)

 Website

Your comment is 0 characters limited to 3000 characters.