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?

Try setting HorizontalAlignment and VerticalAlignment to stretch. — dev hedgehog, Nov 06 '13 at 08:50
@eranotzap: Yes, I don't have any `CellEditingTemplate`, but it is working without that. — dotNET, Nov 06 '13 at 13:55
@devhedgehog: This works, but aligns the checkbox to the top-left corner of the cell. Setting HorizontalContentAlignment etc. do not bring it back to center. Any ideas? — dotNET, Nov 06 '13 at 13:57
@Yes, that's what I did. I set both `HorizontalAlignment` and `VerticalAlignment`to `Stretch`, which now lets me click anywhere in the cell to toggle the CheckBox. BUT the CheckBox itself is now anchored to the top-left corner of the cell. I further tried setting other properties like `HorizontalContentAlignment` and `VerticalContentAlignment` to bring it to center, but that doesn't have any effect on the position of CheckBox either. — dotNET, Nov 06 '13 at 14:56

D J · Accepted Answer · 2013-11-08T10:20:38.830

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>

That looks promising. Let me try that. Where is PlaneToggleButtonStyle defined? Or do I have to create an empty style like `` in my DataGrid Resources? — dotNET, Nov 06 '13 at 12:23
That works, but the ToggleButton shows in the cell, even when I have applied an empty style to it. I guess this style needs to have some contents in it. Ideas? — dotNET, Nov 06 '13 at 14:01

DataGridTemplateColumn: Handling mouse click

1 Answers1