UserControl
.UserControl
from a template. Follow the instructions below:Views
folder in Solution ExplorerAdd -> New Item
menu itemTodoListView
as the "Name"Views
directory, alongside MainWindow.axaml
TodoListView.axaml.cs
file 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):\TodoListView
and it's located in the Todo.Views
namespace.Views/TodoListView.axaml
to contain the following:UserControl
as could be expected. This is followed by a bunch of xmlns
declarations. 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:DesignWidth="200"
and 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:x
entry we saw earlier.DockPanel
as the child of the UserControl
. A UserControl
can only contain a single child so often the child is one of Avalonia's panel controls. Panel
controls are special in that they can have multiple children.DockPanel
is 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.Button
that appears at the bottom of the view. The DockPanel.Dock
attribute tells the containing DockPanel
that we want the button to appear at the bottom. As the element content we set the button text: "Add an item"
.StackPanel
. StackPanel
lays 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 Orientation
property, e.g. <StackPanel Orientation="Horizontal">
.DockPanel
it will fill the remaining space in the center of the control.CheckBox
controls to represent the TODO items. We're also giving the controls a margin to separate them a little bit visually.Views/MainWindow.axaml
file and edit it to have the following content:TodoListView
control we just created, which is in the Todo.Views
C# namespace. Here we're mapping the Todo.Views
namespace to the views
XML 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.TodoListView
control as the content of our Window
.F5
in Visual Studio or executing dotnet run
in .NET Core) you should see the application running in all its glory: