BASeCamp Network Menu, which I wrote about previously, was a handy little tool for connecting to my VPN networks. It, however, had one disadvantage- It was clearly out of place- the style was “outdated” for the OS themes:

As we can see above, the style it uses is more like Office 2003, Windows XP, etc. Since the program is intended for Windows 10, that was a bit of a style issue, I think. Since none of the other Renderers really fit the bill, I set about writing my own “Win10” style menu foldout ToolStrip Renderer; Since the intent was merely to provide for drawing this menu, I’ve skipped certain features as a result to make it a bit easier.

Windows 10 uses an overwhelmingly “flat” style. This worked in my favour since that makes it fairly easy to draw using that style. Windows Forms- and thus the ContextMenuStrip one attaches to the NotifyIcon, allows overriding the standard drawing logic with a ToolStripRenderer implementation; so the first step was to create a class which I derived from the ToolStripSystemRenderer. This attempts to mimic the appearance of many Windows 10 foldouts by first drawing a dark background, then drawing a color over top. However- the color over top is where things were less clear. We want to use the Accent Color that is defined in the Windows Display Properties. How do we find that?

As it happens, dwmapi.dll has us covered. However, it bears warning that this is currently an undocumented function- we need to reference it by ordinal, and since it’s undocumented, it could be problematic when it comes to future compatibility. It’s very much a “use at your own risk” function:

This function uses DWMCOLORIZATIONPARAMS, which we of course, need to define:

Once defined, we can now create a helper method that will give us a straight-up color value:

We allow for an “Opaque” parameter to specify whether the caller wants the Alpha value or not; of course, t he caller could always do this itself but the entire point of functions is to reduce code so may as well put it in this way. it takes the 32-bit integer representing the color and splits it into it’s appropriate byte-sized components through shift operators, and uses those to construct an appropriate Color to return.

Using this color to paint over an opaque dark background (the color used with the Taskbar Right-click menu, for example) gives the following Menu, using the new WIndows 10 Renderer I created:

Not a bad representation, if I say so myself! Not perfect, mind you, but certainly fits better than the Professional ToolStrip Renderer, so I don’t think calling it a success would be entirely out of band. A more interesting problem presents itself, however- When configured in the display properties to have transparency effects,The default Windows 10 Network foldout has a “Blur” effect. How can we do the same thing?

After unsuccessful experiments with DwmExtendGlassIntoFrame and related functions, I eventually stumbled on the SetWindowCompositionAttribute(). This could be used to set an accent on a window directly- including, setting Blur Behind. Of course, as with any P/Invoke, one needs to prepare yourself for the magical journey with some declarations:

If the Blur setting is enabled, then the EnableBlur function is called to enable blur; otherwise, to disable blur. In both cases, it tosses in the Handle of the ToolStrip that is opening, which, apparently, is the Window handle to the actual menu’s “Window”, so it actually works as intended:

I also found that darker colours being drawn seemed to be “more” transparent. Best I could determine was that there is some kind of transclucency key; the closer to black, the more “clear” the glass appears. References I found suggest that SetLayeredWindowAttributes() could be used to adjust the colour key, but I wasn’t able to get it to work as I intended; Since the main effect is that the “Disabled” text, which is gray, appears like more “clear” glass within the coloured blurred menu, I found it to be fine.

It will still be ideal to write additional custom draw routines in order to allow checked/selected items in the listing to be more apparent. As it stands the default “Check” draw routine appears more like an overlay on the top left of the icon, but it’s easy to miss; it would be better to custom draw the items entirely, and instead of a checkmark perhaps highlight the Icon in some fashion to indicate selection.