WPF: How to enable shadows and rounded corners on ToolTips in Windows 11

Originally published:
Windows 11 originally came out in 2021, however, an official Windows 11 theme has not yet been released for WPF (more on that here). Because of this, WPF apps still have more of a Windows 8/10 look. Luckily, there are some easy things you can do to modernise your WPF user interfaces. You could of course, create your own custom styles, however this can take quite a bit of work. This article covers something that can be done easily, without much work and without breaking compatibility with older operating systems.

Enabling shadows and rounded corners on ToolTips

WPF presents its ToolTips in seperate top level windows. This allows them to easily show on top of other content and not be limited to the size and position of its parent window. Windows 11 includes a built in feature as part of the DWM (Desktop Window Manager) that rounds top level windows. You can control this feature using the DwnSetWindowAttribute Windows function. Using this function, we can tell Windows 11 to have the DWM apply rounded corners and a shadow on WPF ToolTips.

Normal WPF ToolTip on Windows 11 vs WPF ToolTip on Windows 11 with rounded corners and a shadow
Normal WPF ToolTip on Windows 11 vs WPF ToolTip on Windows 11 with rounded corners and a shadow

How to enable shadows and rounded corners on ToolTips

To enable shadows and rounded corners on all ToolTips, we can create a style in App.xaml/Application.xaml that defines an EventSetter so that we can run code ever time a ToolTip opens to apply the rounded corners. If you don't have any resources added in App.xaml/Application.xaml yet, you can create an element called Application.Resources and put this style there.

Tip: You could also define this style in a Window or other element’s resources to only apply shadows and rounded corners to all ToolTips for all child elements of that element or on an individual element to only apply it to ToolTips for that element.

XAML:

<Style TargetType="ToolTip">

<EventSetter Event="Opened" Handler="ToolTip_Opened"/>

</Style>


Now, in the code we must first define the DwnSetWindowAttribute function like so, so that we can call it using platform invoke as it is a Windows function: 

C#:

[DllImport("dwmapi.dll", PreserveSig = true)]

public static extern int DwmSetWindowAttribute(IntPtr hwnd, int attr, ref int attrValue, int attrSize);


VB:

<DllImport("dwmapi.dll", PreserveSig:=True)>

Public Shared Function DwmSetWindowAttribute(hwnd As IntPtr, attr As Integer, ByRef attrValue As Integer, attrSize As Integer) As Integer

End Function


And now, we can define the handler for the ToolTip.Opened event:

C#:

// Check that the user is on Windows 11 (which is technically Windows 10 build 22000 or higher) and that high contrast mode is not on as this method does not work well with the WPF high contrast theme.

if (Environment.OSVersion.Version.Major >= 10 && Environment.OSVersion.Version.Build >= 22000 && SystemParameters.HighContrast == false)

{

// Gets the window handle of the ToolTip. This is used to tell Windows what window we want to apply the shadow and rounded corners to.

HwndSource SenderHwnd = (HwndSource)HwndSource.FromVisual((System.Windows.Media.Visual)sender);

// 3 indicates to apply a shadow and round the corners with a small radius.

int DWMWCP_ROUNDSMALL = 3;

// Call the DWMSetWindowAttribute function, setting attribute 33 which is DWMWA_WINDOW_CORNER_PREFERENCE.

DwmSetWindowAttribute(SenderHwnd.Handle, 33, ref DWMWCP_ROUNDSMALL, Marshal.SizeOf(3));

}

}


VB:

 Sub ToolTip_Opened(sender As Object, e As RoutedEventArgs)

   ' Check that the user Is on Windows 11 (which Is technically Windows 10 build 22000 Or higher) And that high contrast mode Is Not on as this method does Not work well with the WPF high contrast theme.

   If Environment.OSVersion.Version.Major >= 10 And Environment.OSVersion.Version.Build >= 22000 And SystemParameters.HighContrast = False Then

   ' Gets the window handle of the ToolTip. This Is used to tell Windows what window we want to apply the shadow And rounded corners to.

   Dim SenderHwnd As HwndSource = HwndSource.FromVisual(sender)

   ' Call the DWMSetWindowAttribute function, setting attribute 33 which Is DWMWA_WINDOW_CORNER_PREFERENCE. 3 indicates to apply a shadow and round the corners with a small radius.

Application.DwmSetWindowAttribute(SenderHwnd.Handle, 33, 3, Marshal.SizeOf(3))

   End If

End Sub


Now, your ToolTips should look like this:

If it does not work, make sure you followed the instructions correctly and check below for some troubleshooting information.

Troubleshooting

If Environment.OSVersion.Version.Major is returning 6 on Windows 11, it may be because Windows thinks you app was designed for older versions of Windows and so applies compatibility settings to it. This can be fixed by specifying that your app supports Windows 10 in the manifest. To add a manifest to your app if you don't have one already, first right click on your Project and select Properties to open yur project's properties. Depending on your project settings and your Visual Studio version, you may see different options in this next step. The option you're looking for is something to do with creating/opening/viewing the app manifest. It will likely be called 'Create or open app manifest for Windows settings.' or 'View Windows Settings' or something similar. If you do not see this option, you can add one manually by right clicking on your project and selecting Add -> New Item.... From there, choose Application Manifest File, leave the default name and choose Add. Now if you view your project's properties, the manifest you created should show there as the app's manifest. If it does not and you see an option to select a manifest, select the file you just created.

Within the default manifest template, you should see a section under Assembly -> Compatibility -> Application that looks like this:

XML:

<!-- Windows 10 -->

<!--<supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />-->


Simply remove the comment (by removing "<!--" and "-->" from the line that starts with supportedOS (second line in the above example) and now it should look like this:

XML:

<!-- Windows 10 -->

<supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />


Now Environment.OSVersion.Version.Major should return 10. If you still have issues or have any other issues, let us know in the comments!

This snippet is available for Codly. Click the download link below to download the snippet. If you don't have Codly, it is available here in the Microsoft Store.

Did this guide help you? Do you have anything to add? Do you know or do you work on/have created any libraries that bring more modern visual styles to WPF? Let us know in the comments! Also, if this guide did help you and you use an AdBlocker and you want to support us, consider disabling it for this site - if you do, it will be greatly appreciated!

Follow us to be notified when we release new guides:
Facebook
Twitter
Tags:

Comments

  1. Jack AllieJune 14, 2023 at 4:53 PM

    This is very cool! And it works for context menus (so long as you remove the drop shadow on the context menu)

    ReplyDelete

Post a Comment

Popular posts from this blog

How to show placeholder text in a WPF TextBox in C# and VB

Originally published:
Image
Sometimes, when you have a text box in a user interface, you may want to add placeholder text to that text box to give users a prompt as to what to enter into the text box. If you've ever used UWP or WinUI, you'll probably have noticed that the default text box elements provide a PlaceholderText property that provides this functionality. However, WPF and Windows Forms don't provide this functionality by default. Luckily, thanks to WPF's rendering capabilities, it is quite easy to set up placeholder text manually. If you're using Windows Forms, you can make use of the ElementHost to use a WPF TextBox. Typically, placeholder text is a slightly faded colour compared to user-entered text to help distinguish it and only shows when no text is entered into the text box. An example is below: How to show placeholder text in a WPF TextBox To show placeholder text in a WPF textbox, all we need to do is show a partially transparent, intangible Label above the TextBox like so (Y...
Read more

How to enable dark title bar in WPF and Windows Forms/WinForms apps in C# and VB

Originally published:
Image
Windows has had a dark mode feature for a long time now, however, as a Windows Forms and/or WPF (Windows Presentation Foundation) developer, you may have noticed that the Windows dark mode does not affect your app at all automatically - in fact the Windows dark mode only automatically affects UWP, WinUI and Chromium based user interfaces - there's no support for Windows dark mode in Windows Forms and WPF. Tip: If you want to set the title bar's colours to any colours you want instead of just light or dark, follow this guide here . Luckily, it is very easy to determine if dark mode is currently enabled and be notified any time dark mode is switched on or off - from there it's just a matter of updating your UI to match which mode Windows is in. While this may work fine for the client area of your app (i.e. the area of your app that does not include the title bar and border), you don't have a lot of control over the non-client area of your app and you'll notice that by...
Read more

How to use modern icons in XAML in WPF on Windows 10 and 11

Originally published:
Image
Icons and symbols are a common part of modern user interfaces. Depending on your skills, creating your own icons may not be easy. Luckily, Windows 10 and 11 come preinstalled with plenty of icons that can be used in applications. If you've developed for UWP or WinUI and have used the SymbolIcon , you may have seen these icons before. By using these modern icons, you can create user interfaces that look consistent with the operating system. And the great part is that it's easy to use these icons with WPF (Windows Presentation Foundation) while supporting both Windows 10 and 11. 6 WPF buttons with modern icons in Windows 11 The same 6 WPF buttons with modern icons in Windows 10 Where the icons are stored These modern icons that Windows 10 and 11 include come in the form of fonts - specifically Segoe MDL2 Assets and Segoe Fluent Icons . Segoe MDL2 Assets is included in Windows 10 and 11 and Segoe Fluent Icons is included in Windows 11. Segoe Fluent Icons includes newer version...
Read more

How to change the colour of a WPF or Windows Forms/WinForms title bar in Windows 11 in C# and VB

Originally published:
Image
The windows title bar has gone through various changes throughout the years - from the old title bars with user customisable colours to the newer title bars with visual styling support introduced in Windows XP to the DWM (Desktop Window Manager) rendered title bars introduced in Windows Vista. One thing about these changes is that they often explored the concepts the relationship of the title bar to the client area of Windows and who is in control of what the title bar looks like. For example, in Windows XP, the user could only choose between specific title bar styles unless you used the Windows classic theme, in which case you could choose your own title bar colours or even use gradients if you wanted. With the addition of the DWM in Windows Vista, Microsoft explored the idea of extending the title bar into the non client area of Windows - think File Explorer and Microsoft Word for example. Where we are now In modern versions of Windows, the title bar only uses the DWM version and all...
Read more

Microsoft WebView2: How to check if the WebView2 runtime is installed in C# and VB

Originally published:
With the initial release of Windows 10, Microsoft released a completely new web browser - Microsoft Edge - that used its own rendering engine - EdgeHTML. In recent years, Microsoft deprecated the original version of Microsoft Edge and replaced it with a Chromium based version. The original version of Microsoft Edge came with a control called WebView which could be used by apps to display content. Now that Microsoft has released the new Chromium based Edge, a new control has been released called WebView2. The existing WebView control still uses the original Microsoft Edge whereas the new WebView2  uses the Chromium based Microsoft Edge. The new control however, is not reliant on the same version of Microsoft Edge that is used as the main browser - instead it is reliant on a separate component known as the WebView2 Runtime (except in the case of non-stable channels, which come with the WebView2 runtime). This component is preinstalled in Windows 11 and is currently being rolled out ...
Read more