Подключение представлений

Теперь, когда мы настроили модели представлений, нам нужно заставить наши представления использовать эти модели представлений. Мы делаем это, используя функцию привязки данных Avalonia.

Обновите главное окно

Мы предоставляем список в MainWindowViewModel.List, поэтому давайте воспользуемся этим свойством для отображения списка в MainWindow.axaml.
Views/MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="Todo.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Width="200" Height="300"
        Title="Avalonia Todo"
        Content="{Binding List}">
</Window>

Основное изменение заключается в том, что вместо использования элемента управления <views:TodoListView/> в качестве содержимого окна мы теперь привязываем содержимое окна к свойству MainWindowViewModel.List, которое содержит наш список:

Content="{Binding List}"

{Binding} — это расширение разметки, которое создает экземпляр привязки к свойству в DataContext элемента управления. Вы помните, что в App.axaml.cs мы присвоили экземпляр MainWindowViewModel свойству DataContext окна.

Свойство Window.Content можно установить, поместив элемент управления в качестве дочернего элемента Window (как мы делали ранее), или присвоив значение свойству Content. Оба этих синтаксиса эквивалентны, а это означает, что запись:

<Window xmlns="https://github.com/avaloniaui">Hello World!</Window>

равнозначна:

<Window xmlns="https://github.com/avaloniaui" Content="Hello World!"/>

Обновите TodoListView

Теперь нам нужно заставить TodoListView получить список элементов TODO из модели представления:
Views/TodoListView.axaml

<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="200" d:DesignHeight="300"
             x:Class="Todo.Views.TodoListView">
  <DockPanel>
    <Button DockPanel.Dock="Bottom"
            HorizontalAlignment="Center">
      Add an item
    </Button>
    <ItemsControl Items="{Binding Items}">
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <CheckBox Margin="4"
                    IsChecked="{Binding IsChecked}"
                    Content="{Binding Description}"/>
        </DataTemplate>
      </ItemsControl.ItemTemplate>
    </ItemsControl>
  </DockPanel>
</UserControl>

Первое, на что следует обратить внимание, это то, что мы изменили элемент управления <StackPanel> на ItemsControl:

<ItemsControl Items="{Binding Items}">

ItemsControl — это очень простой элемент управления, который отображает каждый элемент коллекции, назначенный его свойству Items. Здесь каждый элемент будет экземпляром нашей модели TodoItem, поскольку это то, что предоставляет TodoListViewModel.Items.

Способ отображения каждого элемента управляется ItemTemplate. ItemTemplate принимает DataTemplate, содержимое которого повторяется для каждого элемента. В этом случае мы отображаем каждый элемент как CheckBox, при этом состояние проверки привязано к свойству IsChecked модели TodoItemViewModel, а содержимое привязано к описанию. Мы также устанавливаем Margin, как и раньше, чтобы немного разнести элементы:

<ItemsControl.ItemTemplate>
  <DataTemplate>
    <CheckBox Margin="4"
              IsChecked="{Binding IsChecked}"
              Content="{Binding Description}"/>
  </DataTemplate>
</ItemsControl.ItemTemplate>

Запустите приложение

Если вы сейчас запустите приложение, вы увидите отображаемые элементы в (поддельной) базе данных: