First, what is XAML?

XAML is a markup language based on an extension of XML which you can use to define your layouts that work with the DesktopXAMLContainer.

Can you show me an example of XAML?

Here is a simple example that creates a WinUI Button using XAML:

<Button Content="Hello World" />

Note: XAML is case sensitive so <button Content="Hello World" /> would be an error because “button” needs to be capitalized to “Button”

Great but where do I put this XAML code?

The XAML code can be added to the DesktopXAMLContainer’s Content property. First, find and add the DesktopXAMLContainer control to your layout.

Next, add the XAML code to the Content property, the Layout Editor should now update with a visual of a WinUI Button.

Are there other XAML controls I can add?

Yes, we provide a convenient list of XAML controls that can be added to your layout if you open up the XAML Control Chooser dialog, by bringing up the contextual menu for that control.

This list includes 30+ controls that are ready to be added to your layout with helpful documentation on the side.

Neat, so how do you handle events?

All XAML related events are filtered to the DesktopXAMLContainer.EventTriggered event. In this event you have the opportunity to check the name of the event that triggered it. For our Button example, we note that it fires a “Click” event.

To see more of you can do with XAML, make sure to check out Xojo’s Example Projects included in the Examples folder of the Xojo Download, the Xojo Documentation and Doing More With DesktopXAMLContainer.

William Yu grew up in Canada learning to program BASIC on a Vic-20. He is Xojo’s resident Windows and Linux engineer, among his many other skills. Some may say he has joined the dark side here in the USA, but he will always be a Canadian at heart.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

While not perfect, Microsoft has always provided enough capabilities (for the most part) to get Win32 controls themed for dark mode. Some Win32 controls they even themed correctly from the beginning when Microsoft first introduced dark mode on Windows. However, there are a few controls that are not supported in dark mode, such as TabPanels, autocompleting ComboBoxes, and DateTimePicker.

To opt into dark mode, just enable it in the shared build settings (by default this is enabled).

Not ready for dark mode? Simply disable that option and your app will continue to operate in light mode as before. When you are ready for dark mode, make any necessary image adjustments and make sure to use the appropriately themed colors (for example Color.TextColor) in places that need it. For dark mode customization use the Color.IsDarkMode to check if the OS is in dark mode. To theme colors differently between light and dark mode, add a ColorGroup and assign them to the controls that need them. Once you’re done with your tweaks, enjoy the dark side of Windows!

For additional capabilities, you can disable dark mode theming (even when you have the dark mode support enabled) in your app by setting up the XOJO_WIN32_DARKMODE_DISABLED environment variable (either set to “true” or “1”) in your App.Opening event.

Learn more in the Xojo Documentation.