UserControlfrom a template. Follow the instructions below:
Viewsfolder in Solution Explorer
Add -> New Itemmenu item
TodoListViewas the "Name"
TodoListView.axaml.csfile containing the code-behind for the view (in Visual Studio this is nested under the XAML file so click the expander next to the XAML file in Solution Explorer to see it):\
TodoListViewand it's located in the
Views/TodoListView.axamlto contain the following:
UserControlas could be expected. This is followed by a bunch of
xmlnsdeclarations. Each of these declares an XML namespace but the most important one is the first one:
xmlns="https://github.com/avaloniaui"- this declares that the XAML in the file contains Avalonia XAML; without this entry nothing will work.
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml". This is used to import XAML features that aren't specific to Avalonia. We'll be seeing this in use later.
mc:Ignorable="d"tells the XAML engine that entries beginning with
d:can be ignored and you can pretty much ignore it too!
d:DesignHeight="400"attributes tell the XAML designer to display the content with a size of 200x400 pixels. They're ignored at runtime.
x:- this relates to the
xmlns:xentry we saw earlier.
DockPanelas the child of the
UserControlcan only contain a single child so often the child is one of Avalonia's panel controls.
Panelcontrols are special in that they can have multiple children.
DockPanelis a type of panel which lays out its controls at the top, bottom, left and right sides, with a single control filling the remaining space in the middle.
Buttonthat appears at the bottom of the view. The
DockPanel.Dockattribute tells the containing
DockPanelthat we want the button to appear at the bottom.
HorizontalAlignmentcenters button in the middle of the parent. As the element content we set the button text:
"Add an item".
StackPanellays out its child controls - surprise - in a stack. By default it lays out the controls vertically, but you can also make it lay out controls horizontally by setting the
DockPanelit will fill the remaining space in the center of the control.
CheckBoxcontrols to represent the TODO items. We're also giving the controls a margin to separate them a little bit visually.
Views/MainWindow.axamlfile and edit it to have the following content:
TodoListViewcontrol we just created, which is in the
Todo.ViewsC# namespace. Here we're mapping the
Todo.Viewsnamespace to the
viewsXML namespace. Any control that is not a core Avalonia control will generally need this type of mapping in order for the XAML engine to find the control.
TodoListViewcontrol as the content of our
F5in Visual Studio or executing
dotnet runin .NET Core) you should see the application running in all its glory: