DataGridTemplateColumn: Handling mouse click

Question

I have a simple DataGridTemplateColumn with one CheckBox in it.

<DataGridTemplateColumn x:Name="dgcAccepted" Width="50">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <CheckBox IsChecked="{Binding Accepted}" IsThreeState="False" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

The problem is that my CheckBox toggles only when user clicks "inside" the CheckBox and not anywhere else in that cell. How can I achieve that?

Answer 1

You can take a toggle button and put checkbox in its content and bind the property IsChecked witch ChekBox. You have to remove the style from togglebutton so that it looks plane like no control is there.

Define the style in resources

<Style x:Key="PlaneToggleButtonStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And use it like

<DataGridTemplateColumn x:Name="dgcAccepted" Width="50">
<DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
       <ToggleButton  Style="{DynamicResource PlaneToggleButtonStyle}" IsChecked="{Binding IsChecked, ElementName=MyCheckedButton}}">
             <CheckBox x:Name="MyCheckedButton" IsChecked="{Binding Accepted}" IsThreeState="False" />
       </ToggleButton>
    </DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>