# 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</api/user_interface/desktop/desktopxamlcontainer>` is very similar to the way you used an `DesktopOLEContainer</api/user_interface/desktop/desktopolecontainer>` previously.

Adding a WinUI control to a window is done via the `DesktopXAMLContainer</api/user_interface/desktop/desktopxamlcontainer>` control. To add one via from a list of available controls:

1.  In the Layout Editor, drag a `DesktopXAMLContainer</api/user_interface/desktop/desktopxamlcontainer>` from the Library to your window.

2.  On the `DesktopXAMLContainer</api/user_interface/desktop/desktopxamlcontainer>` you just dragged to the layout, click on the Pencil icon. The Choose a XAML Control dialog box appears.

    <img src="images/choose_xaml_control_dialog_new.png" class="align-center" alt="image" />

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</api/user_interface/desktop/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</api/user_interface/desktop/desktopxamlcontainer>` control. XAML code is very similar to XML.

### A button

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

### A text field

``` XML
<RichEditBox Header="RichEditBox"/>
```

<div class="note">

<div class="title">

Note

</div>

When setting XAML properties within the `DesktopXAMLContainer.Content</api/user_interface/desktop/desktopxamlcontainer>`, you can use single or double quotes for string values.

</div>

## Setting and getting XAML control properties

XAML control properties can be get and set via the `Value<desktopxamlcontainer.value>` method. The property name is passed as a string and the value is received or set as a `Variant</api/data_types/variant>`.

For example, this code sets the XAML IsReadOnly property of a XAMLRichTextBox whose control name in Xojo is ContractInfo to `True</api/language/true>`:

``` Xojo
ContractInfo.Value("IsReadOnly") = True
```

## Handing events

The `DesktopXAMLContainer</api/user_interface/desktop/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</api/language/dictionary>`.

For example, when a `DesktopXAMLContainer</api/user_interface/desktop/desktopxamlcontainer>` is configured as a XAMLRichTextBox and the text changes in that control, the `EventTriggered<desktopxamlcontainer.eventtriggered>` event will execute because the TextChanged XAML event occurred. This code shows an example of responding to that event:

``` Xojo
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</api/language/dictionary>`. The parameters passed can be found in the Choose XAML Control dialog box.

In this example, a `DesktopButton</api/user_interface/desktop/desktopbutton>` is enabled/disabled based upon XAML ToggleSwitch control's isON property:

``` Xojo
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<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</api/user_interface/desktop/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](https://learn.microsoft.com/en-us/windows/uwp/xaml-platform/xaml-overview)
- Microsoft provides information on XAML controls [here](https://learn.microsoft.com/en-us/uwp/api/microsoft.ui.xaml.controls) and [here](https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls)

<div class="seealso">

`Active X, COM and OLE topic</topics/windows/activex-_com_and_ole>`

</div>