Week 08 - 阶段检查

页面出现重复外观
-> Style 统一控件属性
-> 列表项显示重复
-> DataTemplate 统一数据展示
-> 页面块重复
-> UserControl 封装可复用组件
-> 空、加载、错误、禁用状态由 ViewModel 控制

默认样式能解决 -> 不自定义
数据项重复显示 -> DataTemplate
界面块重复出现 -> UserControl
外观值重复很多 -> Resource 或 Style
控件内部结构必须改变 -> ControlTemplate

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ProductApp.Views.MainWindow"
        Width="480"
        Height="260"
        Title="Style 检查">
  <Window.Styles>
    <Style Selector="Button.primary">
      <Setter Property="Background" Value="#2563EB" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="Padding" Value="12,6" />
    </Style>
  </Window.Styles>
 
  <StackPanel Margin="20"
              Spacing="10">
    <Button Classes="primary"
            Content="保存" />
    <Button Content="取消" />
  </StackPanel>
</Window>

using System.Collections.ObjectModel;
 
namespace ProductApp.ViewModels;
 
public partial class MainWindowViewModel : ViewModelBase
{
    public ObservableCollection<ProductItem> Products { get; } = new()
    {
        new ProductItem { Name = "Keyboard", Price = 199 },
        new ProductItem { Name = "Mouse", Price = 99 }
    };
}
 
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="520"
        Height="320"
        Title="DataTemplate 检查">
  <ListBox Margin="20"
           ItemsSource="{Binding Products}">
    <ListBox.ItemTemplate>
      <DataTemplate x:DataType="vm:ProductItem">
        <StackPanel Spacing="4">
          <TextBlock Text="{Binding Name}"
                     FontWeight="Bold" />
          <TextBlock Text="{Binding Price}" />
        </StackPanel>
      </DataTemplate>
    </ListBox.ItemTemplate>
  </ListBox>
</Window>

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="ProductApp.Views.ProductCard"
             x:Name="Root">
  <Border BorderBrush="#DDDDDD"
          BorderThickness="1"
          Padding="12"
          Margin="0,0,0,8">
    <StackPanel Spacing="4">
      <TextBlock Text="{Binding Title, ElementName=Root}"
                 FontWeight="Bold" />
      <TextBlock Text="{Binding Price, ElementName=Root}" />
    </StackPanel>
  </Border>
</UserControl>

using Avalonia;
using Avalonia.Controls;
 
namespace ProductApp.Views;
 
public partial class ProductCard : UserControl
{
    public static readonly StyledProperty<string> TitleProperty =
        AvaloniaProperty.Register<ProductCard, string>(nameof(Title), "");
 
    public static readonly StyledProperty<decimal> PriceProperty =
        AvaloniaProperty.Register<ProductCard, decimal>(nameof(Price));
 
    public string Title
    {
        get => GetValue(TitleProperty);
        set => SetValue(TitleProperty, value);
    }
 
    public decimal Price
    {
        get => GetValue(PriceProperty);
        set => SetValue(PriceProperty, value);
    }
 
    public ProductCard()
    {
        InitializeComponent();
    }
}

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:views="using:ProductApp.Views"
        x:Class="ProductApp.Views.MainWindow"
        Width="520"
        Height="320"
        Title="UserControl 检查">
  <StackPanel Margin="20"
              Spacing="8">
    <views:ProductCard Title="Keyboard"
                       Price="199" />
    <views:ProductCard Title="Mouse"
                       Price="99" />
  </StackPanel>
</Window>