c# - MenuItem template change based on bound data -

basically have view bound viewmodel has menuitems.

what want whenever menu title "-" want place separator.

theoretically seems can avoid templateselectors if think it's inevitable please share solutions.

here xaml:

<window x:class="wpfapp1.menuitemstyle"         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:wpfapp1"         mc:ignorable="d"         title="menuitemstyle" height="300" width="300">     <dockpanel>         <menu dockpanel.dock="top" itemssource="{binding menuitems}">             <menu.itemtemplate>                 <hierarchicaldatatemplate itemssource="{binding children}">                     <hierarchicaldatatemplate.triggers>                         <datatrigger binding="{binding title}" value="-">                             <setter property="contenttemplate">                                 <setter.value>                                     <hierarchicaldatatemplate itemssource="{binding children}">                                         <separator />                                     </hierarchicaldatatemplate>                                 </setter.value>                             </setter>                         </datatrigger>                     </hierarchicaldatatemplate.triggers>                      <textblock text="{binding title}" background="red" />                 </hierarchicaldatatemplate>             </menu.itemtemplate>          </menu>         <grid>         </grid>     </dockpanel> </window> 

and here code behind:

namespace wpfapp1 {     /// <summary>     /// interaction logic menuitemstyle.xaml     /// </summary>     public partial class menuitemstyle : window     {         public menuitemstyle()         {             initializecomponent();              this.datacontext = this;         }          public observablecollection<menuitem> menuitems { get; set; } = new observablecollection<menuitem> {             new menuitem{ title = "m1"                 ,children= new observablecollection<menuitem>{                     new menuitem{ title = "m2"},                     new menuitem{ title = "-"},                     new menuitem{ title = "m3"},                 }             }         };     }      public class menuitem     {         public string title { get; set; }            public observablecollection<menuitem> children { get; set; }     } } 

i have searched everywhere solution couldn't find pragmatic one.

you can create style menuitems. make either local concrete menu instance (by placing in menu's resources) or place in resource dictionary:

<menu itemssource="{binding menuitems}">     <menu.resources>         <style targettype="menuitem">             <style.triggers>                 <datatrigger binding="{binding title}" value="-">                     <setter property="template">                          <setter.value>                             <controltemplate>                                 <separator/>                             </controltemplate>                         </setter.value>                     </setter>                 </datatrigger>             </style.triggers>         </style>     </menu.resources>     <menu.itemtemplate>         <hierarchicaldatatemplate itemssource="{binding children}">             <textblock text="{binding title}" background="red" />         </hierarchicaldatatemplate>     </menu.itemtemplate> </menu>