如何风格化水平上下文菜单

Question

我想制作一个上下文菜单，就像这张图片上的蓝色菜单：

我不知道怎么做，所以你有一些 clues/tutorials/... 可以与我分享吗？

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

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

前端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>

风格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>

代码隐藏（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

希望这对其他人有帮助。

如何风格化水平上下文菜单

How to stylise horizontal contextmenu

wpf

styles

contextmenu