ContextMenu with ItemsSource and Separators - wpf

Question

I'd like to bind the ItemsSource of a ContextMenu to a collection in my view model and I'd like the ContextMenu to show Separators as well.
Usually a Separator in a ContextMenu is rendered as a horizontal line. But this doesn't seem to work in my case. Maybe you can shed some light into this?
I know that view models should implement INotifyPropertyChanged but for the sake of simplicity I stripped my example of all unnecessary stuff.
MenuItemViewModel.vb:
Public Class MenuItemViewModel
Public Property IsSeparator As Boolean
Public Property Caption As String
End Class
MainViewModel.vb:
Public Class MainViewModel
Private ReadOnly _items As List(Of MenuItemViewModel)
Public Sub New()
_items = New List(Of MenuItemViewModel)
_items.Add(New MenuItemViewModel With {.Caption = "Item 1"})
_items.Add(New MenuItemViewModel With {.IsSeparator = True, .Caption = "Sep 1"})
_items.Add(New MenuItemViewModel With {.Caption = "Item 2"})
_items.Add(New MenuItemViewModel With {.Caption = "Item 3"})
_items.Add(New MenuItemViewModel With {.IsSeparator = True, .Caption = "Sep 2"})
_items.Add(New MenuItemViewModel With {.Caption = "Item 4"})
End Sub
Public ReadOnly Property Items As List(Of MenuItemViewModel)
Get
Return _items
End Get
End Property
End Class
MenuItemTemplateSelector.vb:
Public Class MenuItemTemplateSelector
Inherits DataTemplateSelector
Public Property ItemTemplate As DataTemplate
Public Property SeparatorTemplate As DataTemplate
Public Overrides Function SelectTemplate(item As Object, container As DependencyObject) As DataTemplate
Dim menuItem As MenuItemViewModel
menuItem = TryCast(item, MenuItemViewModel)
If (menuItem IsNot Nothing) AndAlso menuItem.IsSeparator Then
Return Me.SeparatorTemplate
Else
Return Me.ItemTemplate
End If
End Function
End Class
MainWindow.xaml:
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp3"
mc:Ignorable="d"
d:DataContext="{d:DesignInstance local:MainViewModel, IsDesignTimeCreatable=True}"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<local:MainViewModel />
</Window.DataContext>
<Window.Resources>
<DataTemplate x:Key="mit">
<TextBlock Text="{Binding Caption}" />
</DataTemplate>
<DataTemplate x:Key="mst">
<Separator />
<!--<Separator Style="{StaticResource {x:Static MenuItem.SeparatorStyleKey}}" />-->
</DataTemplate>
<local:MenuItemTemplateSelector x:Key="mits"
ItemTemplate="{StaticResource mit}"
SeparatorTemplate="{StaticResource mst}" />
</Window.Resources>
<Grid>
<TextBox HorizontalAlignment="Center" VerticalAlignment="Center" Text="Right click me">
<TextBox.ContextMenu>
<ContextMenu ItemsSource="{Binding Items}" ItemTemplateSelector="{StaticResource mits}" />
</TextBox.ContextMenu>
</TextBox>
</Grid>
</Window>
If you right click on the TextBox the ContextMenu pops up, but the Separators are not rendered as horizontal lines, they instead look like common menu items but without caption, They even blue up when the mouse hovers over them.
Since they have a caption in the view model and this caption doesn't show, it seems that it's really not using the defined ItemTemplate, but what template does it use? Or does a simple <Separator /> does not create a horizontal line anymore)?
How can I get a default separator to show up?
Edit: It seems, that my Separator gets wrapped inside a MenuItem, but how can I avoid that?

Answer 1

Following Ed Plunkett's comment I got rid of the "MenuItemTemplateSelector.vb" file and all the corresponding window resources ("mit", "mst" and "mits").
Then I added the following new window resources...
<ControlTemplate x:Key="mist" TargetType="{x:Type MenuItem}">
<Separator />
</ControlTemplate>
<ControlTemplate x:Key="mict" TargetType="{x:Type MenuItem}">
<MenuItem Header="{Binding Caption}" />
</ControlTemplate>
<Style x:Key="cmics" TargetType="{x:Type MenuItem}">
<Setter Property="Template" Value="{StaticResource mict}" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsSeparator}" Value="True">
<Setter Property="Template" Value="{StaticResource mist}" />
</DataTrigger>
</Style.Triggers>
</Style>
...and changed my TextBox to...
<TextBox HorizontalAlignment="Center" VerticalAlignment="Center" Text="Right click me">
<TextBox.ContextMenu>
<ContextMenu ItemsSource="{Binding Items}" ItemContainerStyle="{StaticResource cmics}" />
</TextBox.ContextMenu>
</TextBox>
...and everything works fine.
Thank you Ed Plunkett.