Skip to main content
Version: 11.0.x

The Design Preview

On this page, you will explore the attributes of the window; and then use some of them to adjust the size of the window when it is shown in the preview pane.

Examine the XAML for the <Window> tag. It will look like this:

<Window xmlns=""
mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="550"

The window tag starts by defining some of the XML namespaces that Avalonia uses. The aliases 'x', 'd' and 'mc' are used.

The design namespace 'd' allows the design-time attributes d:DesignWidth and d:DesignHeightto be set. In the above code sample, these have been set to make the preview look more like a mobile (portrait orientation) display.

With these attributes set, the preview of the window now looks like this:

On the next page, you will see how to add some action to the app by responding to the button click event.