Avalonia Web 导出

009 Avalonia Web 导出以及 MVVM 的 ToDoList 实现

1. 前言

因为 Avalonia 支持 Web 导出，所以本文想要试试，接入 MVVM 和 NuGet 生态的 Avaloina Web 导出的可行性。

我们简单的做一个 ToDoList。

2. 创建项目

虽然是 Web 导出，但是为了保险起见我们还是先建一个桌面版本。

3. ToDoList 的 MVVM 编写

这个简单，根据我多年的 WPF 经验，这个东西大概是这个样子，具体的项目结构如下：

3.1 TodoItemViewModel 的编写

我们先来编写 TodoItemViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Collections.ObjectModel;
using System.Windows.Input;

namespace WebTest.ViewModels
{
    public partial class TodoItemViewModel : ViewModelBase
    {
        #region fields

        private ObservableCollection<TodoItemViewModel> _coll;

        #endregion

        #region props

        [ObservableProperty]
        private string _content;

        #endregion

        #region commands

        public ICommand DeleteCommand { get; private set; }

        #endregion

        #region ctors

        public TodoItemViewModel()
        {
            DeleteCommand = new RelayCommand(Delete);
        }

        public TodoItemViewModel(ObservableCollection<TodoItemViewModel> coll) : this()
        {
            _coll = coll;
        }

        #endregion

        #region methods

        public void Delete()
        {
            _coll?.Remove(this);
        }

        #endregion
    }
}

3.2 MainViewModel 的编写

我们要在 MainViewModel.cs 的地方编写下面的内容

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Collections.ObjectModel;
using System.Windows.Input;

namespace WebTest.ViewModels;

public partial class MainViewModel : ViewModelBase
{
    #region props

    [ObservableProperty]
    private ObservableCollection<TodoItemViewModel> _items = new ObservableCollection<TodoItemViewModel>();

    [ObservableProperty]
    private TodoItemViewModel _selectedItem;

    [ObservableProperty]
    private string _text = "new item";

    #endregion

    #region commands

    public ICommand AddCommand { get; set; }

    #endregion

    #region ctors
    public MainViewModel()
    {
        AddCommand = new RelayCommand(Add);
    }
    #endregion

    #region methods

    public void Add()
    {
        var todoItemViewModel = new TodoItemViewModel(Items) { Content = Text };
        Items.Add(todoItemViewModel);
        SelectedItem = todoItemViewModel;
    }

    #endregion

}

3.3 MainView.xaml

将 MainView.xaml 改为下面的内容。

<UserControl x:Class="WebTest.Views.MainView"
             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"
             xmlns:vm="clr-namespace:WebTest.ViewModels"
             d:DesignHeight="450"
             d:DesignWidth="800"
             x:DataType="vm:MainViewModel"
             mc:Ignorable="d">
    <Design.DataContext>
        <!--
            This only sets the DataContext for the previewer in an IDE,
            to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs)
        -->
        <vm:MainViewModel />
    </Design.DataContext>

    <StackPanel>
        <ItemsControl ItemsSource="{Binding Items}">
            <ItemsControl.ItemTemplate>
                <DataTemplate x:DataType="vm:TodoItemViewModel">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Width="100"
                                   Text="{Binding Content}"
                                   TextTrimming="CharacterEllipsis"
                                   TextWrapping="NoWrap" />
                        <Button Width="30"
                                Height="30"
                                Margin="10,0,0,0"
                                VerticalAlignment="Center"
                                Command="{Binding DeleteCommand}"
                                Content="X" />
                    </StackPanel>


                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

        <StackPanel Orientation="Horizontal">
            <TextBox Width="100" Text="{Binding Text}" />
            <Button Command="{Binding AddCommand}" Content="Add Content" />
        </StackPanel>

    </StackPanel>

</UserControl>

4. Web 运行

加载中是这个样子的：

加载完是这个样子：