Day 7 - 复盘与巩固

资源管理重复值
-> Style 管理控件外观
-> DataTemplate 管理数据项显示
-> ControlTemplate 管理控件内部结构
-> UserControl 管理可复用界面块
-> ViewModel 状态控制空、加载、错误、禁用

using System.Collections.ObjectModel;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
 
namespace ProductApp.ViewModels;
 
public partial class MainWindowViewModel : ViewModelBase
{
    public ObservableCollection<ProductItem> Products { get; } = new()
    {
        new ProductItem { Name = "Keyboard", Price = 199, Enabled = true },
        new ProductItem { Name = "Old Monitor", Price = 399, Enabled = false }
    };
 
    [ObservableProperty]
    private string message = "商品列表已加载。";
 
    public bool IsEmpty => Products.Count == 0;
 
    [RelayCommand]
    private void ClearProducts()
    {
        Products.Clear();
        Message = "列表已清空。";
        OnPropertyChanged(nameof(IsEmpty));
    }
}
 
public sealed class ProductItem
{
    public string Name { get; set; } = "";
    public decimal Price { get; set; }
    public bool Enabled { get; set; }
    public string EnabledText => Enabled ? "启用" : "停用";
}

<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="680"
        Height="460"
        Title="Week 8 复盘">
  <Window.Resources>
    <SolidColorBrush x:Key="PrimaryBrush" Color="#2563EB" />
    <SolidColorBrush x:Key="CardBorderBrush" Color="#DDDDDD" />
  </Window.Resources>
 
  <Window.Styles>
    <Style Selector="TextBlock.title">
      <Setter Property="FontSize" Value="24" />
      <Setter Property="FontWeight" Value="Bold" />
      <Setter Property="Foreground" Value="{StaticResource PrimaryBrush}" />
    </Style>
 
    <Style Selector="Border.card">
      <Setter Property="BorderBrush" Value="{StaticResource CardBorderBrush}" />
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="Padding" Value="12" />
    </Style>
  </Window.Styles>
 
  <StackPanel Margin="20"
              Spacing="12">
    <TextBlock Classes="title"
               Text="商品列表复盘" />
 
    <TextBlock Text="暂无商品，请先新增数据。"
               IsVisible="{Binding IsEmpty}" />
 
    <ListBox ItemsSource="{Binding Products}">
      <ListBox.ItemTemplate>
        <DataTemplate x:DataType="vm:ProductItem">
          <Border Classes="card"
                  Margin="0,0,0,8">
            <StackPanel Spacing="4">
              <TextBlock Text="{Binding Name}"
                         FontWeight="Bold" />
              <TextBlock Text="{Binding Price}" />
              <TextBlock Text="{Binding EnabledText}" />
            </StackPanel>
          </Border>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>
 
    <Button Content="清空列表"
            Command="{Binding ClearProductsCommand}" />
 
    <TextBlock Text="{Binding Message}"
               TextWrapping="Wrap" />
  </StackPanel>
</Window>

public bool IsEmpty => Products.Count == 0;

<Style Selector="Border.card">

<DataTemplate x:DataType="vm:ProductItem">

<Style Selector="Button.primary">
    <Setter Property="Background" Value="#2563EB" />
    <Setter Property="Foreground" Value="White" />
</Style>

<DataTemplate>
    <TextBlock Text="{Binding Name}" />
</DataTemplate>

<TextBlock Text="暂无数据"
           IsVisible="{Binding IsEmpty}"
           HorizontalAlignment="Center" />

1. 把 Week 8 的样式、模板、组件、主题和状态打磨串起来。
2. 能分清 `Style`、`DataTemplate`、`ControlTemplate`、`UserControl` 的用途。
3. 能重写一个带样式和数据模板的商品列表。

<Button Classes="primary" Content="保存" />
<Button Classes="primary" Content="连接" />
<Button Classes="danger" Content="停止" />

同类操作统一，危险操作可区分

<ItemsControl ItemsSource="{Binding Devices}">
  <ItemsControl.ItemTemplate>
    <DataTemplate><views:DeviceCard /></DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

设备数量变化时自动生成卡片

<TextBlock Text="离线 | 最后通信 10:32:15 | 点击重连"
           Foreground="{DynamicResource OfflineBrush}" />

状态、时间和下一步同时可见

Week 8 主线：
把界面重复内容整理清楚。
资源负责重复值。
Style 负责控件外观。
DataTemplate 负责数据项显示。
ControlTemplate 负责控件内部结构。
UserControl 负责可复用界面块。
主题文件负责组织全局资源和样式。
ViewModel 状态负责空、加载、错误、禁用这些界面反馈。

重复外观 -> Style
重复值 -> Resource
重复数据项显示 -> DataTemplate
重复控件内部结构 -> ControlTemplate
重复界面块 -> UserControl
重复全局视觉规则 -> Theme files
界面状态不清楚 -> ViewModel 状态属性