WPF ContextMenu Style

Question

Hello,
I need advice on how to achieve a similar style context menu, as shown. Thanks a lot. 

Answer 1

My first piece of advice is that you should realise this is tricky.

If you extract the template for the menuitem using blend or visual studio, you'll get xaml like here:

https://msdn.microsoft.com/en-us/library/ms747082%28v=vs.90%29.aspx?f=255&MSPPError=-2147217396

Quite a lot of markup there.

Paste that in, apply it and start tinkering.

Transparent black:

<SolidColorBrush Color="#99000000" x:Key="TransparentBlack"/>

Bear in mind that if you just change the opacity of the contextmenu then that affects everything in it.

Your highlight color looks like 100% opacity cyan to me so that's relatively simple.

---

Hope that helps.

Technet articles: WPF: MVVM Friendly User Notification; All my Technet Articles

Answer 2

If you want to make the context menu transparent you could set its Opacity property to any value less than 1:

    <Window.ContextMenu>
        <ContextMenu Opacity="0.5">
            <MenuItem Header="1"/>
            <MenuItem Header="2"/>
            <MenuItem Header="3"/>
        </ContextMenu>
    </Window.ContextMenu>

If you want to change the overall appearance of it, you could define a custom style, e.g.:

<ContextMenu Opacity="0.5">
            <MenuItem Header="1"/>
            <MenuItem Header="2"/>
            <MenuItem Header="3"/>
            <ContextMenu.Style>
                <Style TargetType="{x:Type ContextMenu}">
                    <Setter Property="SnapsToDevicePixels" Value="True" />
                    <Setter Property="OverridesDefaultStyle" Value="True" />
                    <Setter Property="Grid.IsSharedSizeScope" Value="true" />
                    <Setter Property="HasDropShadow" Value="True" />
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ContextMenu}">
                                <Border x:Name="Border" Background="#000" BorderThickness="1">
                                    <ScrollViewer x:Name="ScrollViewer">
                                        <ItemsPresenter />
                                    </ScrollViewer>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ContextMenu.Style>
        </ContextMenu>

Hope that helps.

Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.