Using XAML in Xojo

XAML is Microsoft's Extensible Application Markup Language. In Xojo it's used to access the controls that have the most modern look and feel on Windows 10/11. Microsoft collectively refers to these as WinUI.

The way in which you use a DesktopXAMLContainer is very similar to the way you used an DesktopOLEContainer previously.

Adding a WinUI control to a window is done via the DesktopXAMLContainer control. To add one via from a list of available controls:

  1. In the Layout Editor, drag a DesktopXAMLContainer from the Library to your window.

  2. On the DesktopXAMLContainer you just dragged to the layout, click on the Pencil icon. The Choose a XAML Control dialog box appears.

    ../../_images/choose_xaml_control_dialog_new.png

  3. Click on the XAML control you want from the list and then click the OK button.

  4. A preview of the control appears in the Layout Editor.

To add one by via XAML code:

  1. In the Layout Editor, drag a DesktopXAMLContainer from the Library to your window.

  2. In the Inspector, click on the Pencil icon next to the Content property.

  3. Enter the XAML code that defines the XAML control or controls you wish displayed.

  4. Click the OK button.

  5. A preview of the control appears in the Layout Editor.

Example XAML code

A XAML control is defined by the XAML code you include in the Content property of a DesktopXAMLContainer control. XAML code is very similar to XML.

A button

<Button Name="Button" Content="Button" />

A text field

<RichEditBox Header="RichEditBox"/>

Note

When setting XAML properties within the DesktopXAMLContainer.Content, you can use single or double quotes for string values.

Setting and getting XAML control properties

XAML control properties can be get and set via the Value method. The property name is passed as a string and the value is received or set as a Variant.

For example, this code sets the XAML IsReadOnly property of a XAMLRichTextBox whose control name in Xojo is ContractInfo to True:

ContractInfo.Value("IsReadOnly") = True

Handing events

The DesktopXAMLContainer has an EventTriggered event that receives any XAML-specific events that occur to the control. This event is passed the name of the event that occurred and the parameters (if there are any) in the form of a Dictionary.

For example, when a DesktopXAMLContainer is configured as a XAMLRichTextBox and the text changes in that control, the EventTriggered event will execute because the TextChanged XAML event occurred. This code shows an example of responding to that event:

If eventName = "TextChanged" Then
  me.Value("IsReadOnly") = False
  me.Value("Text") = Me.Value("RTF")
  me.Value("IsReadOnly") = True
End If

Parameters are passed as a Dictionary. The parameters passed can be found in the Choose XAML Control dialog box.

In this example, a DesktopButton is enabled/disabled based upon XAML ToggleSwitch control's isON property:

If eventName = "TextChanged" Then
 If parameters.Value("isOn") Then
   MyButton.Enabled = True
 Else
   MyButton.Enabled = False
End If

Calling XAML methods

XAML controls often have their own methods. To call one, use the DesktopXAMLContainer.Invoke method. This method can be used to call XAML control methods, pass parameters and return values for methods that do so.

More Information about XAML

To learn more about XAML:

  • Review the DesktopXAMLContainer page

  • Check out the various XAML example projects provided with Xojo that demonstrate the most commonly used XAML controls

  • Read Microsoft's XAML overview

  • Microsoft provides information on XAML controls here and here