WPF: GridSplitter not visible but functions as expected - wpf

Question

I am creating a new WPF Application where the main window has a grid inside a dock panel. The grid will have 3 columns and one row, out of which the middle column is dedicated for the GridSplitter. The other two columns have a dock panel each, which will have any content (to be created in run-time). My problem is that despite multiple approaches to make the GridSplitter visible, I have not been successful.
I have even followed tips given in this How To page in Microsoft documentation, but to no fruition:
https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/how-to-make-sure-that-a-gridsplitter-is-visible
Here is my XAML code:
<Window
...
Height="600"
Width="650">
<DockPanel LastChildFill="True">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<DockPanel Name="LeftDockPanel" Grid.Column="0" LastChildFill="True" Width="350" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="LightCyan">
</DockPanel>
<DockPanel Name="RightDockPanel" Grid.Column="2" LastChildFill="True" Width="300" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Azure">
</DockPanel>
<GridSplitter Width="5" Background="Red" Grid.Column="1" BorderBrush="Red"
VerticalAlignment="Stretch" HorizontalAlignment="Center"
Margin="3,0,3,0" ResizeBehavior="PreviousAndNext" Panel.ZIndex="1"/>
</Grid>
</DockPanel>
</Window>
I've attempted the following with my code:
Assigned a ZIndex=1 to the grid splitter while it shares a column with the LeftDockPanel
Dedicated a column explicitly for the splitter, assigning it a width
Ensured that the GridSplitter is the last control added to the grid
Combination of 2, 3 and 4 - As you see in the code.
On hovering the mouse in the appropriate area, the cursor does change to expose the gridSplitter, but it is never visible. Even the resizing actions are working as expected.
What am I missing or doing wrong that the GridSplitter is not visible?

Answer 1

Your issue is not reproducible. Maybe you have defined an implicit Style somewhere. Try to set the Template property to a custom template:
<GridSplitter Width="5" Background="Red" Grid.Column="1" BorderBrush="Red"
VerticalAlignment="Stretch" HorizontalAlignment="Center"
Margin="3,0,3,0" ResizeBehavior="PreviousAndNext">
<GridSplitter.Template>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"/>
</ControlTemplate>
</GridSplitter.Template>
</GridSplitter>