<!-- View：纯粹的 UI 声明 -->
<Page x:Class="MyApp.Views.ProfilePage">
    <StackPanel>
        <TextBlock Text="{x:Bind ViewModel.UserName}" />
        <TextBox Text="{x:Bind ViewModel.UserEmail, Mode=TwoWay}" />
        <Button Command="{x:Bind ViewModel.SaveCommand}" Content="保存" />
    </StackPanel>
</Page>

// ViewModel：View 的抽象，Model 的消费者
public class ProfileViewModel : ObservableObject
{
    private readonly UserService _userService;
    private User _currentUser;

    public string UserName => _currentUser?.Name;
    public string UserEmail
    {
        get => _currentUser?.Email;
        set => SetProperty(_currentUser.Email, value, _currentUser, (u, v) => u.Email = v);
    }

    public ICommand SaveCommand { get; }

    public ProfileViewModel(UserService userService)
    {
        _userService = userService;
        SaveCommand = new AsyncRelayCommand(SaveUserAsync);
    }
}

🔄 5.2.2 数据流动的完整图景

让我们追踪一个完整的数据流动过程，从用户操作到界面更新。

用户在 TextBox 中输入新的邮箱地址。由于绑定模式是 TwoWay，输入立即传播到 ViewModel 的 UserEmail 属性。ViewModel 的 setter 被调用，它更新内部的 _currentUser.Email 字段。

如果 ViewModel 需要通知界面其他部分（比如邮箱旁边的验证状态），它会触发 INotifyPropertyChanged 事件。绑定系统捕获这个事件，更新所有绑定了相关属性的 UI 元素。

当用户点击"保存"按钮时，绑定的 SaveCommand 被执行。ViewModel 调用 _userService.UpdateUserAsync(_currentUser)，Model 层处理实际的数据持久化。保存完成后，ViewModel 可能更新一个 IsSaved 属性，触发 UI 显示成功提示。

整个过程形成了一个清晰的数据流：用户操作 → ViewModel 更新 → Model 持久化 → ViewModel 通知 → View 更新。每一步都是单向的、可预测的。

📢 5.3 属性变更通知：INotifyPropertyChanged

🔔 5.3.1 手动实现 INotifyPropertyChanged

INotifyPropertyChanged 是一个只有一个事件的接口：

public interface INotifyPropertyChanged
{
    event PropertyChangedEventHandler PropertyChanged;
}

一个典型的实现如下：

public class ObservableObject : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    protected bool SetProperty<T>(ref T field, T value, [CallerMemberName] string propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value))
            return false;

        field = value;
        OnPropertyChanged(propertyName);
        return true;
    }
}

然后在 ViewModel 中使用：

public class ProfileViewModel : ObservableObject
{
    private string _userName;

    public string UserName
    {
        get => _userName;
        set => SetProperty(ref _userName, value);
    }
}

🛠️ 5.3.2 使用 CommunityToolkit.Mvvm 简化代码

手动实现 INotifyPropertyChanged 会产生大量样板代码。幸运的是，CommunityToolkit.Mvvm（原名 Microsoft.Toolkit.Mvvm）库通过源代码生成器极大地简化了这项工作。

安装 NuGet 包后，ViewModel 可以变得极其简洁：

[ObservableObject]
public partial class ProfileViewModel
{
    [ObservableProperty]
    private string _userName;

    [ObservableProperty]
    private string _userEmail;

    [ObservableProperty]
    private bool _isLoading;
}

编译器会自动生成 UserName、UserEmail、IsLoading 公共属性以及必要的变更通知代码。_userName 字段变成了 UserName 属性，命名约定是去掉下划线前缀并将首字母大写。

这种声明式的写法让代码意图一目了然，同时保持了完全的运行时性能——源代码生成发生在编译时，没有反射开销。

🎮 5.4 命令绑定：ICommand

⚡ 5.4.1 ICommand 接口

ICommand 接口定义了三个成员：

public interface ICommand
{
    bool CanExecute(object parameter);      // 命令是否可执行
    void Execute(object parameter);          // 执行命令
    event EventHandler CanExecuteChanged;    // 可执行状态变化通知
}

当按钮绑定到一个命令时，它会自动调用 CanExecute 来决定是否启用（按钮变灰或可用）。当用户点击按钮时，Execute 被调用。如果命令的可执行状态可能变化，它会触发 CanExecuteChanged 事件，按钮随之更新。

📦 5.4.2 使用 CommunityToolkit.Mvvm 的命令

手动实现 ICommand 同样繁琐。CommunityToolkit.Mvvm 提供了 RelayCommand 和 AsyncRelayCommand，以及方便的特性标注：

[ObservableObject]
public partial class ProfileViewModel
{
    [ObservableProperty]
    private string _userName;

    // 同步命令
    [RelayCommand]
    private void Reset()
    {
        UserName = "";
    }

    // 异步命令
    [RelayCommand]
    private async Task SaveAsync()
    {
        await _userService.SaveUserAsync(new User { Name = UserName });
    }

    // 带条件的命令
    [RelayCommand(CanExecute = nameof(CanSave))]
    private async Task SaveWithValidationAsync()
    {
        await _userService.SaveUserAsync(new User { Name = UserName });
    }

    private bool CanSave()
    {
        return !string.IsNullOrWhiteSpace(UserName);
    }
}

在 XAML 中绑定：

<StackPanel>
    <TextBox Text="{x:Bind ViewModel.UserName, Mode=TwoWay}" />
    
    <!-- 简单命令 -->
    <Button Content="重置" Command="{x:Bind ViewModel.ResetCommand}" />
    
    <!-- 异步命令 -->
    <Button Content="保存" Command="{x:Bind ViewModel.SaveCommand}" />
    
    <!-- 带条件的命令：当 UserName 为空时按钮禁用 -->
    <Button Content="保存（带验证）" Command="{x:Bind ViewModel.SaveWithValidationCommand}" />
</StackPanel>

🔮 5.5 MVUX：Uno 的响应式进化

🌊 5.5.1 从命令式到响应式

传统 MVVM 是命令式的：你告诉系统"把这个值设为 X"，然后手动触发通知。MVUX 是响应式的：你声明数据流之间的关系，系统自动传播变化。

// 传统 MVVM：命令式
[ObservableProperty]
private string _searchText;

[RelayCommand]
private async Task SearchAsync()
{
    var results = await _searchService.SearchAsync(SearchText);
    SearchResults = results;
    OnPropertyChanged(nameof(SearchResults));
}

// MVUX：响应式
public partial record SearchModel
{
    public IState<string> SearchText => State.Value(this, () => "");

    public IFeed<IImmutableList<SearchResult>> SearchResults =>
        SearchText.SelectAsync(async text =>
            await _searchService.SearchAsync(text));
}

在响应式模型中，SearchResults 是从 SearchText 派生出来的——每当搜索文本变化，结果自动更新。你不需要手动触发任何操作，一切都是自动的。

📦 5.5.2 MVUX 的核心概念

public partial record CounterModel
{
    public int Count { get; init; }
}

public IFeed<int> Count => State.Value(this, () => 0);

public async ValueTask Increment()
{
    await Count.UpdateAsync(current => current + 1);
}

🔗 5.5.3 MVUX 绑定

MVUX 在 XAML 绑定中提供了额外的能力。通过 mvux 命名空间，你可以直接绑定到 Feed 和 State：

<Page xmlns:mvux="using:Uno.Extensions.Reactive.UI">
    <StackPanel>
        <TextBlock Text="{x:Bind BindableModel.Count}" />
        <Button Content="增加" Command="{x:Bind BindableModel.Increment}" />
    </StackPanel>
</Page>

Uno 会自动为你的 Model 生成一个 BindableModel，它实现了 INotifyPropertyChanged，可以与传统绑定无缝集成。

🎨 5.6 值转换器：填补类型的鸿沟

🔧 5.6.1 IValueConverter 接口

public interface IValueConverter
{
    object Convert(object value, Type targetType, object parameter, string language);
    object ConvertBack(object value, Type targetType, object parameter, string language);
}

Convert 方法将源值转换为目标类型，ConvertBack 用于双向绑定时将目标值转换回源类型。

📝 5.6.2 常用转换器示例

public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is bool boolValue)
        {
            return boolValue ? Visibility.Visible : Visibility.Collapsed;
        }
        return Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        if (value is Visibility visibility)
        {
            return visibility == Visibility.Visible;
        }
        return false;
    }
}

public class InverseBoolConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return value is bool b && !b;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return value is bool b && !b;
    }
}

📦 5.6.3 注册和使用转换器

首先在资源字典中注册转换器：

<Page.Resources>
    <local:BoolToVisibilityConverter x:Key="BoolToVisibility" />
    <local:InverseBoolConverter x:Key="InverseBool" />
</Page.Resources>

然后在绑定中使用：

<StackPanel>
    <!-- 登录后显示的元素 -->
    <TextBlock 
        Text="欢迎回来！" 
        Visibility="{x:Bind ViewModel.IsLoggedIn, Converter={StaticResource BoolToVisibility}}" />
    
    <!-- 未登录时显示的元素（使用反转） -->
    <Button 
        Content="请登录" 
        Visibility="{x:Bind ViewModel.IsLoggedIn, Converter={StaticResource InverseBool}, Converter={StaticResource BoolToVisibility}}" />
</StackPanel>

📋 5.7 集合绑定：ListBox 与 ListView

实际应用中经常需要显示列表数据。XAML 提供了 ItemsControl 家族来处理这类场景，其中最常用的是 ListView。

🗂️ 5.7.1 基础列表绑定

<ListView ItemsSource="{x:Bind ViewModel.Users}" SelectedItem="{x:Bind ViewModel.SelectedUser, Mode=TwoWay}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="model:User">
            <StackPanel Orientation="Horizontal" Spacing="8">
                <PersonPicture DisplayName="{x:Bind Name}" />
                <StackPanel>
                    <TextBlock Text="{x:Bind Name}" FontWeight="Bold" />
                    <TextBlock Text="{x:Bind Email}" Foreground="Gray" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

ItemsSource 绑定到集合，ItemTemplate 定义每个项的外观。x:DataType 特性告诉编译器数据项的类型，启用编译时绑定。

📊 5.7.2 ObservableCollection 与动态列表

普通 List<T> 或 IEnumerable<T> 的变化不会触发 UI 更新。如果需要动态添加、删除项目，应该使用 ObservableCollection<T>：

public partial class UsersViewModel
{
    public ObservableCollection<User> Users { get; } = new();

    [RelayCommand]
    private void AddUser()
    {
        Users.Add(new User { Name = "新用户", Email = "new@example.com" });
    }

    [RelayCommand]
    private void RemoveUser(User user)
    {
        Users.Remove(user);
    }
}

ObservableCollection 实现了 INotifyCollectionChanged 接口，当集合内容变化时会自动通知绑定系统。

📝 本章小结

数据绑定是 XAML 应用开发的核心技术，它消除了 UI 和数据之间繁琐的手动同步。通过绑定表达式，我们声明性地描述了数据如何流动，系统自动处理了所有的更新工作。

MVVM 架构为 Uno 应用提供了清晰的职责分离。Model 负责数据，View 负责展示，ViewModel 负责协调。这种分离带来了可测试性、可维护性和团队协作的便利。CommunityToolkit.Mvvm 库通过源代码生成器极大地简化了 MVVM 的样板代码，让开发者能专注于业务逻辑。

对于追求更现代开发体验的项目，MVUX 提供了响应式的选择。它用声明式数据流替代命令式更新，特别适合处理异步和实时数据。