如何设计水平上下文菜单的样式

Question

我想在这张图片上创建一个类似蓝色的上下文：

我无法想象如何制作它所以你有一些线索/教程/ ......与我分享？

现在，我坚持使用这个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

经过两天的反思，我终于实现了这个解决方案：

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. 样式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. 代码背后（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
   

希望这有助于其他人。