locked
WPF ContextMenu Style RRS feed

  • Question

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

    ContextMenu Style

    Saturday, August 15, 2015 4:35 PM

Answers

  • 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.



    • Edited by Andy ONeill Monday, August 17, 2015 8:05 AM
    • Marked as answer by ORRNY66 Monday, August 17, 2015 12:47 PM
    Sunday, August 16, 2015 9:25 AM
  • 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.

    • Marked as answer by ORRNY66 Monday, August 17, 2015 12:46 PM
    Sunday, August 16, 2015 8:35 PM

All replies

  • 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.



    • Edited by Andy ONeill Monday, August 17, 2015 8:05 AM
    • Marked as answer by ORRNY66 Monday, August 17, 2015 12:47 PM
    Sunday, August 16, 2015 9:25 AM
  • 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.

    • Marked as answer by ORRNY66 Monday, August 17, 2015 12:46 PM
    Sunday, August 16, 2015 8:35 PM