Inspect the XAML
This is a good time for you to take a look at the code generated by the view template.
Start with the root element, its declarations of namespaces and settings:
<UserControl
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="250" d:DesignHeight="450"
x:Class="ToDoList.Views.ToDoListView">
The root element in the XAML file starts <UserControl and this is followed by a number of XML xmlns namespace declarations common to Avalonia UI controls. The most important declaration to note is the first one:
<UserControl xmlns="https://github.com/avaloniaui" ... >
This declares that the XAML in the file contains Avalonia UI XAML.
Without this entry nothing will work in your Avalonia UI project!
The next namespace is xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" and this is used to import Microsoft XAML language features that are used by Avalonia UI.
For more information see the Microsoft documentation here.
The remaining two namespaces are used to communicate information to the Avalonia UI designer (code and preview panes).
<UserControl ...
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" ... >
For example, as you have already done, you can specify the width and height of the control as it is displayed in the designer preview pane:
<UserControl ...
mc:Ignorable="d" d:DesignWidth="250" d:DesignHeight="450" ... >The entry mc:Ignorable="d" tells the Avalonia UI XAML engine that entries beginning with d: can be ignored at runtime.
The last line links the XAML file with its code-behind class. Note that the fully-qualified class name has to be used here.
<UserControl ...
x:Class="ToDoList.Views.ToDoListView">
Control Content
The content zone of the user control is occupied by a dock panel:
<DockPanel>
To review the concept of layout zones, see here.
A user control can only contain a single child control in its content zone; so you will often need to start a layout with one of the Avalonia UI panel controls, as these allow you to contain multiple child controls in the space instead.
You can browse the full range of Avalonia UI panel controls in the reference section here.
In this example, you are using the dock panel <DockPanel> control. This is a type of panel which lays out its child controls along the edges of its content zone. Each child control can specify which edge: top, bottom, left or right. This is done using the DockPanel.Dock attribute. For example, this XAML aligns a button at the bottom of the view; and it is stretched to fit the width, with its text centered.
<Button DockPanel.Dock="Bottom"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center">Add Item</Button>
In a dock panel there must be a single control filling the remaining space in its content zone (wherever that is located); or it will not display correctly. This filling control must have no DockPanel.Dock attribute. The tutorial uses a stack panel to fill the remainng space:
<StackPanel>
The stack panel lays out its child controls in a stack, which is vertical by default. (You can make the stack horizontal by setting the Orientation attribute.) You will often use the stack panel in your Avalonia UI layouts.
To more detail about the stack panel, see the reference here.
The remaining XAML adds the hard-coded to do list items as check boxes:
<CheckBox Margin="4">Walk the dog</CheckBox>
<CheckBox Margin="4">Buy some milk</CheckBox>
Notice that these controls have the margin attribute set. This will separate them a little visually.
The margin is one of the Avalonia UI control layout zones. To review the concept of layout zones, see here.
On the next page, you will learn how to display the view created here in the main window of the app.