Search code examples
wpfxamldatagridstylesmargin

Margin in WPF Datagrid cell not clickable


I created a custom style for WPF DataGrid.

One thing was to add a margin on every cell.
Works fine, but you cannot select a row when you click on the margin.
I have no idea how to Workaround this.

<DataGrid ItemsSource="{Binding Items}">
   <DataGrid.CellStyle>
       <Style TargetType="{x:Type DataGridCell}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <!-- Here is the margin for every cell -->
                        <ContentPresenter Margin="20"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
   </DataGrid.CellStyle>

   <DataGrid.RowStyle>
        <Style TargetType="{x:Type DataGridRow}">
            <Setter Property="BorderThickness" Value="0 1 0 1"/>
            <Setter Property="BorderBrush" Value="{x:Null}"/>
            <Style.Triggers>
                <!-- mouseover works fine, even for the margin -->
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="Orange"/>
                </Trigger>
                <!-- this gets not set when you click on the margin in the cell, so you think when the row highlightes you also can select it, but you cant -->
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
         </Style>
   </DataGrid.RowStyle>           
</DataGrid>

Solution

  • Margin="20" creates empty area around cell content, which is not clickable because is not filled with anything. The simplest fix is to add Border with transparent background (see related QA {x:Null} vs. Transparent brush)

    <ControlTemplate TargetType="{x:Type DataGridCell}">
        <!-- Here ist the margin for every cell -->
        <Border Background="Transparent">
            <ContentPresenter Margin="20"/>
        </Border>
    </ControlTemplate>