Comment styliser contextmenu horizontale

Question

Je voudrais faire un contextmenu comme le bleu sur cette image:

Je ne peux pas comprendre comment le faire faire, vous avez des indices/tutoriels/... pour partager avec moi?

Pour l'instant, je suis coincé avec ce XAML

<Style x:Name="HorizontalContextMenu" TargetType="{x:Type ContextMenu}"> 

    <Setter Property="Background" Value="CadetBlue" /> 
    <Setter Property="BorderBrush" Value="DarkBlue" /> 

    <Setter Property="HorizontalOffset" Value="50"/> 
    <Setter Property="VerticalOffset" Value="50"/> 

    <Setter Property="Height" Value="48"/> 

    <Setter Property="SnapsToDevicePixels" Value="True" /> 
    <Setter Property="OverridesDefaultStyle" Value="True" /> 
    <Setter Property="Grid.IsSharedSizeScope" Value="true" /> 
    <Setter Property="HasDropShadow" Value="True" /> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ContextMenu"> 
       <Border BorderThickness="0"> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="24"/> 
          <ColumnDefinition Width="*"/> 
         </Grid.ColumnDefinitions> 

         <Path Width="100" Height="100" 
           Data="{DynamicResource RightArrow}" 
           Fill="Blue" Stretch="Fill" 
           Grid.Column="0"/> 

         <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.Column="1" Orientation="Horizontal"/> 

        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 

</Style> 

Answer 1

Après deux jours de réflexion, je réalise enfin cette solution:

1. Frontend XAML

   <Button x:Name="btnExpressions" Style="{StaticResource MyMenuButton}" Content="Expressions" Tag="{x:Static iconPacks:PackIconMaterialKind.HeartPulse}" Click="BtnExpressions_Click"> 
          <Button.ContextMenu> 
           <ContextMenu Style="{StaticResource HorizontalContextMenu}"> 
   
            <MenuItem Name="BtnA" Header="B" Tag="{x:Static iconPacks:PackIconMaterialKind.RunFast}" Style="{StaticResource HMI}"/> 
            <MenuItem Name="BtnB" Header="F" Tag="{x:Static iconPacks:PackIconMaterialKind.RunFast}" Style="{StaticResource HMI}"/> 
            <MenuItem Name="BtnC" Header="T" Tag="{x:Static iconPacks:PackIconMaterialKind.RunFast}" Style="{StaticResource HMI}"/> 
   
           </ContextMenu> 
          </Button.ContextMenu> 
         </Button> 
   

2. Style XAML

   <Style x:Key="HorizontalContextMenu" TargetType="{x:Type ContextMenu}"> 
   
   <Setter Property="Background" Value="#AF38789E" /> 
   <Setter Property="BorderThickness" Value="0"/> 
   <Setter Property="Height" Value="48"/> 
   
   <Setter Property="ItemsPanel"> 
       <Setter.Value> 
        <ItemsPanelTemplate> 
         <VirtualizingStackPanel Orientation="Horizontal" Background="Transparent"/> 
        </ItemsPanelTemplate> 
       </Setter.Value> 
   </Setter> 
   
   <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ContextMenu" > 
         <Border BorderThickness="0"> 
          <Grid> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="10"/> 
            <ColumnDefinition Width="*"/> 
           </Grid.ColumnDefinitions> 
   
           <Path Data="M0,0.5 L1,0.75 1,0.25Z" Margin="0" 
             Grid.Column="0" 
             StrokeThickness="0" 
             Stroke="{TemplateBinding Background}" 
             Fill="{TemplateBinding Background}" 
             Stretch="Fill" 
             Width="10" Height="20"/> 
   
           <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"Grid.Column="1" Orientation="Horizontal" Background="{TemplateBinding Background}"/> 
          </Grid> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
   </Setter> 
   </Style> 
   
   <Style x:Key="HMI" TargetType="MenuItem"> 
   
   <Setter Property="Foreground" Value="White"/> 
   <Setter Property="Opacity" Value="0.5"/> 
   <Setter Property="Width" Value="48" /> 
   <Setter Property="Height" Value="48" /> 
   
   <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type MenuItem}"> 
         <Border> 
          <iconPacks:PackIconMaterial Kind="{Binding Tag, RelativeSource={RelativeSource AncestorType=MenuItem}}" VerticalAlignment="Center" HorizontalAlignment="Center"/> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
   </Setter> 
   
   <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="true"> 
        <Setter Property="Opacity" Value="1" /> 
       </Trigger> 
   </Style.Triggers> 
   
   </Style> 
   

3. code derrière (version VB.NET)

   Private Sub BtnExpressions_Click(sender As Object, e As RoutedEventArgs) 
       Dim btn As FrameworkElement = sender 
       If btn IsNot Nothing Then 
   
        btn.ContextMenu.PlacementTarget = btn 
        btn.ContextMenu.Placement = Primitives.PlacementMode.Right 
        btn.ContextMenu.HorizontalOffset = -10 
        btn.ContextMenu.VerticalOffset = 0 
        btn.ContextMenu.IsOpen = True 
   
       End If 
   End Sub 
   

Hope cela aide quelqu'un d'autre.