Quinn's Coding Guides

Years ago, Microsoft introduced this bug in WinUI 2, which can cause WinUI 2 apps to crash then you scroll to the bottom of a scrollable area in a ScrollViewer. You may have noticed this bug in built-in Microsoft apps such as the Microsoft Store, as they use WinUI. This bug was partially addressed in Windows 11, but can still occur.  Luckily, the bug only occurs with WinUI 2 and not plain UWP, so, to fix it, we can just use the UWP ScrollViewer style instead. To do this, just apply a blank style to all or just the offending ScrollViewers like so: <Style TargetType="ScrollViewer"/>  When you create your own style, it inherits from the UWP styles instead of the WinUI 2 styles, as explained here . You could apply it to an individual ScrollViewer like this: <ScrollViewer.Style> <Style TargetType="ScrollViewer"/> </ScrollViewer.Style> Or all of them in App.xaml like so: <Application.Resources> <controls:XamlControlsResources> ...

So you've applied your own style to a Button , TextBox , ContentDialog or any other UWP control only to find that the control has reverted to the in-built UWP styles - no longer are WinUI styles being used for the control. Gone are the rounded corners and back are various fluent design lighting effects and 3D button effects common in older versions of Windows 10. You check your custom styles and can't find any reason why the control(s) look like this and you followed the instructions on how to apply the WinUI styles to your app. Well, that's because it's not your fault - this is actually normal behaviour. Read on to see why and the quick and easy fix for it. Why this happens This actually happens due to the default behaviour of UWP. In fact, if you've used WPF (Windows Presentation Foundation), it had the same behaviour. What happens is that whenever you apply your own styles to controls, any properties not defined by the style are inherited by the built-in styles,...

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

The XAML Host is a powerful control that allows you to easily use UWP and WinUI 2 controls in a non-UWP application using the XAML Islands feature introduced in Windows 10 1903. Many Microsoft applications use XAML Islands, such as Notepad , Paint , Windows Terminal , the Windows Taskbar, Magnifier, File Explorer and more. Many of our applications using XAML Islands as well such as Codly , LaserCursor , KeepOn , QPad and more . The advantage of XAML Islands, is that you can use modern controls in a non-UWP application, allowing for various things such as better touch support and dark mode support. The XAML Host control makes using XAML Islands in .Net Core and .Net Framework applications easy. Unfortunately, there's an issue with newer versions of Visual Studio 2019 and all versions of Visual Studio 2022 that can prevent packaged applications that use the XAML Host not to build. About the issue If you follow Microsoft's documentation for a packaged app in ' Use XAML Island...

The ComboBox is a commonly used control that can be used for selecting items from a drop down list. Unfortunately, there is a bug in UWP that causes UWP and WinUI 2 ComboBoxes not to display correctly when opened if the ComboBox is inside a ViewBox. The ComboBox's drop down  menu might appear too large or too small and it might appear blurry and/or cut off as well. Here is an example of what it might look like: As you can see in the above screenshot, the ComboBox's drop down menu appears too large, blurred and cut off. What causes this? This issue is caused by a new feature introduced in Windows 10 1903 called ShouldConstrainToRootBounds. ShouldConstrainToRootBounds is a property that determines if a popup should show within its XAML root, or in a separate top level window. By showing the popup in a top level window, rather than in its XAML root, the popup is able to go beyond the bounds of its XAML root. Practically, for a standard UWP app, this means that a popup can display ...

The Flyout is a useful class in UWP/WinUI 2 that allows you to display content in a popup. The Flyout class contains various useful built in behaviour such as showing and hiding animations and functionality to for dismissing the popup when it looses focus. One of the built in behaviours of the Flyout, is that it contains a ScrollViewer and a maximum size. This means that, if the content inside the Flyout becomes too large for the Flyout, the content will become scrollable. In some situations, this behaviour can be helpful, however, in other situations, you may want the flyout to simply size itself to fit its content rather than cutting content off and forcing the user to scroll to see the cut off content. Luckily, there's an easy way to do this by modifying a Flyout's FlyoutPresenterStyle. How to change the maximum size of a Flyout To change the maximum size of a Flyout, simply modify its FlyoutPresenterStyle like so (You can of course replace MaxHeight and/or MaxWidth with a d...

When navigating a UWP WebView to a new URI, you may want to specify a referrer URI . When using the UWP WebView, we can do this using the NavigateWithHttpRequestMessage function. To use this function, we need to create a HttpRequestMessage. From an HttpRequestMessage, we can specify a URI to navigate to and referrer URI, amongst many things. C#: Windows.Web.Http.HttpRequestMessage Request = new Windows.Web.Http.HttpRequestMessage(); Request.Headers.Referer = new Uri( "https://www.quinnscomputing.com" ); Request.RequestUri = new Uri( "https://codingguides.quinnscomputing.com" ); webViewMain.NavigateWithHttpRequestMessage(Request); VB: Dim Request = New Windows.Web.Http.HttpRequestMessage() Request.Headers.Referer = New Uri( "https://www.quinnscomputing.com" ) Request.RequestUri = New Uri( "https://codingguides.quinnscomputing.com" ) webViewMain.NavigateWithHttpRequestMessage(Request) This will navigate the WebView to the specified URI with t...

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