WPF DataGrid Text Vertical Alignment
<p>I'm working with a WPF DataGrid. I'm trying to get the contents of my DataGridTextColumns to center the displayed text vertically. </p>

<p>Currently, my cell values look like this: <a href="https://imgur.com/nkbE7Wt" rel="nofollow noreferrer">http://imgur.com/nkbE7Wt</a>. As you can see, they are vertically aligned towards the top of the cells. </p>

<p>I tried adding a template to the style of my DataGridCells, this works, and it centers the text like so: <a href="https://imgur.com/TCo6RCa" rel="nofollow noreferrer">http://imgur.com/TCo6RCa</a>. The style for the DataGridCells is as follows: </p>

<pre><code>&lt;Style x:Key="DataGridCellStyle" TargetType="{x:Type DataGridCell}"&gt;
    &lt;Style.Triggers&gt;
        &lt;Trigger Property="IsSelected" Value="True"&gt;
            &lt;Setter Property="Background" Value="{StaticResource SelectedBrush}" /&gt;
            &lt;Setter Property="TextElement.Foreground" Value="#111111" /&gt;
        &lt;/Trigger&gt;        
    &lt;/Style.Triggers&gt;
    &lt;Setter Property="Background" Value="Transparent" /&gt;
    &lt;Setter Property="TextElement.Foreground" Value="#666666" /&gt;
    &lt;Setter Property="BorderBrush" Value="Transparent" /&gt;
    &lt;Setter Property="BorderThickness" Value="1" /&gt;

    &lt;Setter Property="Template"&gt;
        &lt;Setter.Value&gt;
            &lt;ControlTemplate TargetType="{x:Type DataGridCell}"&gt;
                &lt;Border Background="Transparent"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="0"
                        SnapsToDevicePixels="True"
                        Padding="5"
                        VerticalAlignment="Center"&gt;
                    &lt;ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /&gt;
                &lt;/Border&gt;
            &lt;/ControlTemplate&gt;
        &lt;/Setter.Value&gt;
    &lt;/Setter&gt;
&lt;/Style&gt;
</code></pre>

<p>This added template does basically exactly what I want in terms of how it should be displayed. However there is an issue. When the user clicks on any cell to highlight the row, they must click within the border that is set in the style to actually get the DataGrid to highlight the row. </p>

<p>Using <a href="http://snoopwpf.codeplex.com/" rel="nofollow noreferrer">Snoop</a> I am able to see that it is the border causing the issue. This: <a href="https://imgur.com/9pD0W5C" rel="nofollow noreferrer">http://imgur.com/9pD0W5C</a> is what Snoop shows as the border, and unless my mouse is on or in the red highlighted line when clicked, the row will not be selected/highlighted. </p>

<p>Is there any way I can modify my template to allow for it to highlight the row when any part of the cell is clicked and not just within the border? </p>

<p>Or alternatively, is there some easy way I can vertically center the text in my cells? </p>

<p>I have already tried setting <code>TextElement.VerticalAlignment</code> in my style, but this causes there to be some extra lines within the datagrid that look weird.</p>