Week 07 - 阶段检查

TextBox 输入
-> TwoWay Binding 写入 ViewModel 属性
-> SaveCommand 执行 ViewModel 方法
-> Service 校验业务规则
-> ObservableCollection 更新列表
-> ListBox 自动刷新
-> ErrorMessage / Message 显示状态

ViewModel 暴露属性和命令
-> View 用 Binding 读取或修改属性
-> Button 用 Command 调用 ViewModel 方法
-> ViewModel 做验证、更新集合、更新消息
-> View 自动显示新状态

using CommunityToolkit.Mvvm.ComponentModel;
 
namespace ProductApp.ViewModels;
 
public partial class MainWindowViewModel : ViewModelBase
{
    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(DisplayName))]
    private string productName = "Keyboard";
 
    public string DisplayName =>
        string.IsNullOrWhiteSpace(ProductName) ? "未填写商品名称" : ProductName.Trim();
}

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:ProductApp.ViewModels"
        x:Class="ProductApp.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Width="520"
        Height="280"
        Title="属性绑定检查">
  <StackPanel Margin="20"
              Spacing="10">
    <TextBlock Text="商品名称" />
    <TextBox Text="{Binding ProductName, Mode=TwoWay}" />
    <TextBlock Text="{Binding DisplayName}" />
  </StackPanel>
</Window>

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
 
namespace ProductApp.ViewModels;
 
public partial class MainWindowViewModel : ViewModelBase
{
    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(SaveCommand))]
    private string productName = "";
 
    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(SaveCommand))]
    private string priceText = "199";
 
    [ObservableProperty]
    private string message = "请输入商品信息。";
 
    private bool CanSave()
    {
        return !string.IsNullOrWhiteSpace(ProductName) &&
               decimal.TryParse(PriceText, out decimal price) &&
               price > 0;
    }
 
    [RelayCommand(CanExecute = nameof(CanSave))]
    private void Save()
    {
        decimal price = decimal.Parse(PriceText.Trim());
        Message = $"保存成功：{ProductName.Trim()}，价格 {price}";
    }
}

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:ProductApp.ViewModels"
        x:Class="ProductApp.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Width="540"
        Height="340"
        Title="命令验证检查">
  <StackPanel Margin="20"
              Spacing="10">
    <TextBlock Text="商品名称" />
    <TextBox Text="{Binding ProductName, Mode=TwoWay}" />
 
    <TextBlock Text="商品价格" />
    <TextBox Text="{Binding PriceText, Mode=TwoWay}" />
 
    <Button Content="保存"
            Command="{Binding SaveCommand}" />
 
    <TextBlock Text="{Binding Message}"
               TextWrapping="Wrap" />
  </StackPanel>
</Window>

using System.Collections.ObjectModel;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
 
namespace ProductApp.ViewModels;
 
public partial class MainWindowViewModel : ViewModelBase
{
    private int nextNumber = 4;
 
    public ObservableCollection<ProductItem> Products { get; } = new()
    {
        new ProductItem { Name = "Keyboard", Price = 199 },
        new ProductItem { Name = "Mouse", Price = 99 },
        new ProductItem { Name = "Monitor", Price = 899 }
    };
 
    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(SelectedName))]
    private ProductItem? selectedProduct;
 
    public string SelectedName => SelectedProduct?.Name ?? "未选择商品";
 
    public MainWindowViewModel()
    {
        SelectedProduct = Products[0];
    }
 
    [RelayCommand]
    private void AddProduct()
    {
        var product = new ProductItem
        {
            Name = $"Product {nextNumber}",
            Price = nextNumber * 100
        };
 
        nextNumber++;
        Products.Add(product);
        SelectedProduct = product;
    }
}
 
public sealed class ProductItem
{
    public string Name { get; set; } = "";
    public decimal Price { get; set; }
}

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:ProductApp.ViewModels"
        x:Class="ProductApp.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Width="700"
        Height="400"
        Title="集合绑定检查">
  <Grid ColumnDefinitions="260,*"
        ColumnSpacing="16"
        Margin="20">
    <ListBox Grid.Column="0"
             ItemsSource="{Binding Products}"
             SelectedItem="{Binding SelectedProduct, Mode=TwoWay}">
      <ListBox.ItemTemplate>
        <DataTemplate x:DataType="vm:ProductItem">
          <StackPanel>
            <TextBlock Text="{Binding Name}"
                       FontWeight="Bold" />
            <TextBlock Text="{Binding Price}" />
          </StackPanel>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>
 
    <StackPanel Grid.Column="1"
                Spacing="10">
      <TextBlock Text="当前商品"
                 FontSize="20"
                 FontWeight="Bold" />
      <TextBlock Text="{Binding SelectedName}" />
      <Button Content="新增商品"
              Command="{Binding AddProductCommand}" />
    </StackPanel>
  </Grid>
</Window>