Day 4 - 资源与样式

建议用时：210-240 分钟

你将学会什么

知道资源 Resources 是“可复用的值”。
知道样式 Styles 是“可复用的外观规则”。
会用 {StaticResource ...} 引用颜色资源。
会用 Style Selector="Button.primary" 定义只命中某一类按钮的样式。
会用 Classes="primary" 给控件套用样式类。
会分清局部资源、局部样式和全局资源的使用场景。

本页只在 MainWindow.axaml 里练局部资源和局部样式，不改 App.axaml。先学会作用范围，再决定以后哪些样式要放全局。

本页固定顺序

先学第一部分：弄懂今天最小、最重要的知识，并运行短例子。
再学第二部分：把刚学的知识组合成一个完整例子。
然后做第三部分：自己跟着敲，再完成重复训练和每日小测。
最后做第四部分：先独立完成作业，再用完整答案检查。

学习衔接

上一页学习的是“常用控件”，今天继续学习“资源与样式”。先使用上一页已经会的写法，再只增加今天这个新知识点；如果前置内容还不能独立敲出，先回上一页复习，不要硬跳。

今天的最低通过线

第一次学习不要求背完整页。完成下面 3 项，就可以继续：

能用自己的话说明“资源与样式”解决什么问题。
把第一部分的短例子亲手敲完，并确认每个例子都能运行。
不看完整答案完成第三部分至少前 3 个例子，再主动改一个值观察结果。

第一部分：先学原理和最小知识

这一部分从最小知识开始。先读解释，再把紧跟着的短例子敲一遍。资源与样式不是为了“好看”才存在，而是为了让界面更容易维护。

1. 为什么需要资源和样式

先看一种不推荐长期使用的写法：


<Button Background="#2563EB" Foreground="White" Content="保存" />
<Button Background="#2563EB" Foreground="White" Content="提交" />
<Button Background="#2563EB" Foreground="White" Content="确认" />

它能运行，但问题明显：

同一个颜色写了三次。
以后要换颜色，要改很多地方。
复制时容易有一个按钮漏改。
代码里混着结构和外观，越写越乱。

资源和样式就是为了解决这种重复。

2. Resource 是什么

Resource 是可以反复使用的值。常见资源有：

资源类型	例子	用途
颜色画刷	`PrimaryBrush`	按钮背景、标题颜色
边框画刷	`CardBorderBrush`	区域边框颜色
数字	`DefaultSpacing`	间距、字号
字符串	`AppTitle`	统一标题文字

本页先只使用颜色资源，因为它最容易理解，也最常用。

3. `Window.Resources` 的作用范围

写在 Window.Resources 里的资源，只在当前窗口里使用。


<Window.Resources>
  <SolidColorBrush x:Key="PrimaryBrush" Color="#2563EB" />
</Window.Resources>

这表示：当前窗口里有一个名字叫 PrimaryBrush 的蓝色画刷。

在当前窗口里可以这样用：


<TextBlock Foreground="{StaticResource PrimaryBrush}"
           Text="商品编辑" />

如果别的窗口也要用同一个资源，才考虑放到 App.axaml 的 Application.Resources。刚开始练习时，先放在当前窗口，范围小，出错也容易定位。

4. `{StaticResource ...}` 是什么


Foreground="{StaticResource PrimaryBrush}"

它的意思是：从资源里找一个名字叫 PrimaryBrush 的值，拿来设置 Foreground。

常见错误是名字不一致：


<SolidColorBrush x:Key="PrimaryBrush" Color="#2563EB" />
<TextBlock Foreground="{StaticResource PrimaryColor}" />

上面会出问题，因为资源名字叫 PrimaryBrush，使用时却写成了 PrimaryColor。

5. Style 是什么

Style 是一组外观规则。比如：


<Style Selector="Button.primary">
  <Setter Property="Background" Value="{StaticResource PrimaryBrush}" />
  <Setter Property="Foreground" Value="White" />
</Style>

这段样式的意思是：

目标控件是 Button。
但不是所有按钮，只命中带 primary 类的按钮。
命中的按钮会设置背景色和文字颜色。

6. Selector 是什么

Selector 用来说明“这条样式要应用到谁身上”。

Selector	含义
`Button`	当前作用范围内所有按钮
`Button.primary`	带 `primary` 类的按钮
`TextBlock.title`	带 `title` 类的文字
`Border.card`	带 `card` 类的边框区域

本页推荐多用 Button.primary 这种写法，少用直接选中所有 Button 的写法。因为直接写 Button 会影响范围内所有按钮，有时会把“取消按钮”也改掉。

7. Classes 是什么

Classes 就是给控件贴一个样式标签。


<Button Classes="primary" Content="保存" />

如果有样式：


<Style Selector="Button.primary">

那么这个按钮就会套用这条样式。

可以理解成：


Selector 找带标签的控件
Classes 给控件贴标签
Setter 设置命中的控件属性

8. Setter 是什么

Setter 表示样式里要设置的属性。


<Setter Property="Foreground" Value="White" />

这句话的意思是：把命中控件的 Foreground 设置成 White。

多个 Setter 放在同一个 Style 里，就形成一套外观规则。

9. 局部样式和全局样式怎么选

放在哪里	作用范围	适合场景
`Window.Styles`	当前窗口	当前页面专用外观
`App.axaml` 的 `Application.Styles`	整个应用	所有页面统一按钮、文字、输入框
某个容器的 `.Styles`	这个容器内部	某一块区域特殊处理

刚开始写项目时建议先放 Window.Styles。等多个页面确实重复，再提到全局。不要一开始就把所有东西放全局，否则以后很难判断某个样式从哪里来的。

10. 什么时候不要写样式

不是所有属性都要提成样式。

适合提成样式：

多个按钮都有同样背景色、文字颜色、内边距。
多个标题都有同样字号和粗体。
多个卡片区域都有同样边框和内边距。

不适合提成样式：

某个控件只用一次。
某个控件的文字内容。
某个按钮的点击事件。
页面结构本身，比如 Grid.Row、Grid.Column。

样式解决“重复外观”，不要拿它解决业务逻辑。

资源与样式常用写法速查

本页讲资源和样式，但实际项目里不要为了好看而乱加样式。先掌握资源放哪里、怎么引用、怎么避免重复。

需求	写法	说明
定义资源	`<SolidColorBrush x:Key="PrimaryBrush" ... />`	给值起名字
引用资源	`{StaticResource PrimaryBrush}`	使用已定义资源
定义样式	`<Style Selector="Button.primary">`	命中指定控件
套用 class	`Classes="primary"`	让控件使用样式
全局资源	`App.axaml`	全应用共用
局部资源	当前窗口 `Resources`	只在本页使用

判断是否需要样式：


只是做功能练习 -> 用默认样式
多个地方重复同一个值 -> 提取资源
多个按钮需要同一外观 -> 再考虑样式类

第二部分：把知识组合成完整例子

今天要做的是一个带局部资源和局部样式的商品编辑窗口。它没有复杂视觉设计，只解决一个问题：不要把同一套颜色、字号、按钮外观复制到很多控件上。

MainWindow.axaml

把下面内容放到 Views/MainWindow.axaml。


<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ProductApp.Views.MainWindow"
        Width="640"
        Height="420"
        Title="资源与样式练习">
  <Window.Resources>
    <SolidColorBrush x:Key="PrimaryBrush" Color="#2563EB" />
    <SolidColorBrush x:Key="DangerBrush" Color="#DC2626" />
    <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="16" />
    </Style>
 
    <Style Selector="Button.primary">
      <Setter Property="Background" Value="{StaticResource PrimaryBrush}" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="Padding" Value="12,6" />
    </Style>
 
    <Style Selector="Button.danger">
      <Setter Property="Background" Value="{StaticResource DangerBrush}" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="Padding" Value="12,6" />
    </Style>
  </Window.Styles>
 
  <Grid RowDefinitions="Auto,*"
        RowSpacing="12"
        Margin="20">
    <TextBlock Grid.Row="0"
               Classes="title"
               Text="商品编辑" />
 
    <Border Grid.Row="1"
            Classes="card">
      <Grid RowDefinitions="Auto,Auto,Auto"
            ColumnDefinitions="Auto,*"
            RowSpacing="10"
            ColumnSpacing="12">
        <TextBlock Grid.Row="0"
                   Grid.Column="0"
                   Text="名称"
                   VerticalAlignment="Center" />
        <TextBox Grid.Row="0"
                 Grid.Column="1"
                 Text="Keyboard" />
 
        <TextBlock Grid.Row="1"
                   Grid.Column="0"
                   Text="价格"
                   VerticalAlignment="Center" />
        <TextBox Grid.Row="1"
                 Grid.Column="1"
                 Text="199" />
 
        <StackPanel Grid.Row="2"
                    Grid.Column="1"
                    Orientation="Horizontal"
                    Spacing="8">
          <Button Classes="primary"
                  Content="保存" />
          <Button Content="取消" />
          <Button Classes="danger"
                  Content="删除" />
        </StackPanel>
      </Grid>
    </Border>
  </Grid>
</Window>

先用一句话理解

Window.Resources 保存可复用的颜色，Window.Styles 保存可复用的外观规则，控件通过 Classes 选择要套用哪条规则。

第三部分：跟着敲代码

从这里开始动手。每个例子都可以完整替换 Views/MainWindow.axaml。每敲完一个例子就运行一次：


dotnet run

例子 1：先看没有样式时的问题

这个例子能运行，但它把相同颜色写了好几遍。先感受重复是什么样子。


<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ProductApp.Views.MainWindow"
        Width="460"
        Height="260"
        Title="没有样式的按钮">
  <StackPanel Margin="20"
              Spacing="10">
    <Button Background="#2563EB"
            Foreground="White"
            Padding="12,6"
            Content="保存" />
    <Button Background="#2563EB"
            Foreground="White"
            Padding="12,6"
            Content="提交" />
    <Button Background="#2563EB"
            Foreground="White"
            Padding="12,6"
            Content="确认" />
  </StackPanel>
</Window>

这个页面的问题不是不能运行，而是同样的外观写了三遍。

例子 2：把颜色提成资源

这一步只提取颜色，还不写样式。


<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ProductApp.Views.MainWindow"
        Width="460"
        Height="260"
        Title="颜色资源">
  <Window.Resources>
    <SolidColorBrush x:Key="PrimaryBrush" Color="#2563EB" />
  </Window.Resources>
 
  <StackPanel Margin="20"
              Spacing="10">
    <TextBlock Foreground="{StaticResource PrimaryBrush}"
               Text="商品操作"
               FontSize="22"
               FontWeight="Bold" />
    <Button Background="{StaticResource PrimaryBrush}"
            Foreground="White"
            Content="保存" />
  </StackPanel>
</Window>

重点看两处：

x:Key="PrimaryBrush" 是资源名字。
{StaticResource PrimaryBrush} 是使用这个资源。

例子 3：用 Style 管理 primary 按钮

这一步把按钮外观集中到 Window.Styles。


<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ProductApp.Views.MainWindow"
        Width="460"
        Height="260"
        Title="按钮样式">
  <Window.Resources>
    <SolidColorBrush x:Key="PrimaryBrush" Color="#2563EB" />
  </Window.Resources>
 
  <Window.Styles>
    <Style Selector="Button.primary">
      <Setter Property="Background" Value="{StaticResource PrimaryBrush}" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="Padding" Value="12,6" />
    </Style>
  </Window.Styles>
 
  <StackPanel Margin="20"
              Spacing="10">
    <Button Classes="primary"
            Content="保存" />
    <Button Classes="primary"
            Content="提交" />
    <Button Content="取消" />
  </StackPanel>
</Window>

运行后观察：

保存 和 提交 使用 primary 样式。
取消 没有写 Classes="primary"，所以保持默认外观。

例子 4：给不同按钮不同样式类

这个例子同时定义 primary 和 danger。


<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="不同按钮样式">
  <Window.Resources>
    <SolidColorBrush x:Key="PrimaryBrush" Color="#2563EB" />
    <SolidColorBrush x:Key="DangerBrush" Color="#DC2626" />
  </Window.Resources>
 
  <Window.Styles>
    <Style Selector="Button.primary">
      <Setter Property="Background" Value="{StaticResource PrimaryBrush}" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="Padding" Value="12,6" />
    </Style>
 
    <Style Selector="Button.danger">
      <Setter Property="Background" Value="{StaticResource DangerBrush}" />
      <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="取消" />
    <Button Classes="danger"
            Content="删除" />
  </StackPanel>
</Window>

这就是样式类的价值：保存按钮和删除按钮都能统一管理，但互不影响。

例子 5：给标题和卡片区域也加样式

样式不只可以用于按钮，也可以用于文字和边框区域。


<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ProductApp.Views.MainWindow"
        Width="560"
        Height="340"
        Title="标题和卡片样式">
  <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="16" />
    </Style>
  </Window.Styles>
 
  <StackPanel Margin="20"
              Spacing="12">
    <TextBlock Classes="title"
               Text="商品详情" />
 
    <Border Classes="card">
      <StackPanel Spacing="8">
        <TextBlock Text="名称：Keyboard" />
        <TextBlock Text="价格：199" />
        <TextBlock Text="状态：启用" />
      </StackPanel>
    </Border>
  </StackPanel>
</Window>

这里有两条样式：

TextBlock.title 命中带 title 类的文字。
Border.card 命中带 card 类的边框区域。

例子 6：完整商品编辑界面

这个例子把资源、样式、布局组合起来。


<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ProductApp.Views.MainWindow"
        Width="640"
        Height="420"
        Title="资源与样式练习">
  <Window.Resources>
    <SolidColorBrush x:Key="PrimaryBrush" Color="#2563EB" />
    <SolidColorBrush x:Key="DangerBrush" Color="#DC2626" />
    <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="16" />
    </Style>
 
    <Style Selector="Button.primary">
      <Setter Property="Background" Value="{StaticResource PrimaryBrush}" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="Padding" Value="12,6" />
    </Style>
 
    <Style Selector="Button.danger">
      <Setter Property="Background" Value="{StaticResource DangerBrush}" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="Padding" Value="12,6" />
    </Style>
  </Window.Styles>
 
  <Grid RowDefinitions="Auto,*"
        RowSpacing="12"
        Margin="20">
    <TextBlock Grid.Row="0"
               Classes="title"
               Text="商品编辑" />
 
    <Border Grid.Row="1"
            Classes="card">
      <Grid RowDefinitions="Auto,Auto,Auto"
            ColumnDefinitions="Auto,*"
            RowSpacing="10"
            ColumnSpacing="12">
        <TextBlock Grid.Row="0"
                   Grid.Column="0"
                   Text="名称"
                   VerticalAlignment="Center" />
        <TextBox Grid.Row="0"
                 Grid.Column="1"
                 Text="Keyboard" />
 
        <TextBlock Grid.Row="1"
                   Grid.Column="0"
                   Text="价格"
                   VerticalAlignment="Center" />
        <TextBox Grid.Row="1"
                 Grid.Column="1"
                 Text="199" />
 
        <StackPanel Grid.Row="2"
                    Grid.Column="1"
                    Orientation="Horizontal"
                    Spacing="8">
          <Button Classes="primary"
                  Content="保存" />
          <Button Content="取消" />
          <Button Classes="danger"
                  Content="删除" />
        </StackPanel>
      </Grid>
    </Border>
  </Grid>
</Window>

小白重复敲写训练

资源和样式要用“改一处、看多处变化”的方式练。

训练 1：窗口资源


<Window.Resources>
    <SolidColorBrush x:Key="PrimaryBrush" Color="#2563EB" />
</Window.Resources>
 
<Button Content="保存" Background="{StaticResource PrimaryBrush}" />

改动任务：只改资源里的颜色，观察按钮跟着变化。

训练 2：统一按钮样式


<Window.Styles>
    <Style Selector="Button.primary">
        <Setter Property="Background" Value="#2563EB" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Padding" Value="16,8" />
    </Style>
</Window.Styles>
 
<Button Classes="primary" Content="保存" />

第二遍放两个 primary 按钮，确认样式复用。

训练 3：悬停样式


<Style Selector="Button.primary:pointerover">
    <Setter Property="Background" Value="#1D4ED8" />
</Style>

第三遍修改悬停颜色并实际移动鼠标测试。

每日小测

做完本页后，用这 5 题检查是否真的掌握。

1. 判断题

本页的目标不是只把代码运行起来，还要能说清楚“为什么这样写”。

答案：对。能运行只是第一步，能解释原理、常用操作和常见错误，才说明本页内容进入了可复用能力。

2. 填空题

本页主题是：资源与样式。今天至少要掌握的 3 个点是：


1. 知道资源 `Resources` 是“可复用的值”。
2. 知道样式 `Styles` 是“可复用的外观规则”。
3. 会用 `{StaticResource ...}` 引用颜色资源。

答案：以上 3 点必须能用自己的代码跑通，不能只停留在阅读。

3. 流程题

遇到本页相关功能时，先按什么顺序处理？

答案：先看完整例子，确认最终效果；再读原理和名词；然后跟着第三部分从空项目敲代码；最后对照作业答案检查。

4. 找错误题

如果本页代码运行失败，第一步应该做什么？

答案：先看终端或 IDE 里的第一条错误，找到文件名和行号；不要同时改很多地方。再回到本页的“常见错误和修法”表格，对照错误类型逐项排查。

5. 改需求题

在本页完整例子跑通后，至少改一个小需求。

可选改法：

改一个字段名称。
多加一个校验条件。
多输出一行结果。
把固定数据改成用户输入。
把一次处理改成多条数据处理。

答案标准：修改后能重新运行，并能说明这次修改影响了哪一段逻辑。重点检查：知道资源 Resources 是“可复用的值”。。

上位机专项练习

资源和样式用于统一按钮、标题和状态颜色，避免每个控件重复写相同属性。

下面 3 个例子都要亲手敲。先运行原代码，再完成每个例子后面的改动任务。

专项例子 1：定义统一按钮样式


<Window.Styles>
  <Style Selector="Button.primary">
    <Setter Property="Background" Value="#1565C0" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Padding" Value="18,10" />
  </Style>
</Window.Styles>
 
<Button Classes="primary" Content="连接设备" />

运行结果或界面效果：


连接按钮使用统一蓝色样式

改动任务： 再放一个开始采集按钮并复用 primary。

专项例子 2：复用标题字号资源


<Window.Resources>
  <x:Double x:Key="SectionTitleSize">24</x:Double>
</Window.Resources>
 
<TextBlock Text="设备状态" FontSize="{StaticResource SectionTitleSize}" />

运行结果或界面效果：


标题字号来自资源

改动任务： 增加 ValueSize=36 并用于实时数值。

专项例子 3：状态使用不同类名


<StackPanel Spacing="8">
  <TextBlock Classes="online" Text="PLC-01 在线" />
  <TextBlock Classes="alarm" Text="PLC-02 高温报警" />
</StackPanel>

运行结果或界面效果：


在线和报警状态可应用不同样式

改动任务： 为 offline 增加灰色样式。

第四部分：作业完整答案

这一部分给出当天作业的完整答案。先照第三部分敲一遍，再用这里检查结果。

作业要求

做一个商品编辑窗口，要求：

使用 Window.Resources 定义至少两个颜色资源。
使用 Window.Styles 定义标题样式、卡片样式、主按钮样式。
保存 按钮使用 primary 样式。
取消 按钮保持默认样式。
页面结构要清楚，不要把所有控件堆在一个没有分区的容器里。

拆解步骤

先写 Window。
在 Window.Resources 里定义颜色资源。
在 Window.Styles 里定义样式。
用 Grid 分成标题和表单区域。
标题 TextBlock 加 Classes="title"。
表单外层 Border 加 Classes="card"。
保存按钮加 Classes="primary"。
运行后改一次 PrimaryBrush 的颜色，确认标题和保存按钮一起变化。

MainWindow.axaml 完整答案


<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ProductApp.Views.MainWindow"
        Width="640"
        Height="420"
        Title="资源与样式练习">
  <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="16" />
    </Style>
 
    <Style Selector="Button.primary">
      <Setter Property="Background" Value="{StaticResource PrimaryBrush}" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="Padding" Value="12,6" />
    </Style>
  </Window.Styles>
 
  <Grid RowDefinitions="Auto,*"
        RowSpacing="12"
        Margin="20">
    <TextBlock Grid.Row="0"
               Classes="title"
               Text="商品编辑" />
 
    <Border Grid.Row="1"
            Classes="card">
      <Grid RowDefinitions="Auto,Auto,Auto"
            ColumnDefinitions="Auto,*"
            RowSpacing="10"
            ColumnSpacing="12">
        <TextBlock Grid.Row="0"
                   Grid.Column="0"
                   Text="名称"
                   VerticalAlignment="Center" />
        <TextBox Grid.Row="0"
                 Grid.Column="1"
                 Text="Keyboard" />
 
        <TextBlock Grid.Row="1"
                   Grid.Column="0"
                   Text="价格"
                   VerticalAlignment="Center" />
        <TextBox Grid.Row="1"
                 Grid.Column="1"
                 Text="199" />
 
        <StackPanel Grid.Row="2"
                    Grid.Column="1"
                    Orientation="Horizontal"
                    Spacing="8">
          <Button Classes="primary"
                  Content="保存" />
          <Button Content="取消" />
        </StackPanel>
      </Grid>
    </Border>
  </Grid>
</Window>

运行后应该看到什么

商品编辑 标题使用资源里的主色。
表单外层有边框和内边距。
保存 按钮使用主按钮样式。
取消 按钮没有套用 primary，保持默认外观。

如果样式不生效，按这个顺序检查

检查样式是否写在 Window.Styles 里。
检查 Selector="Button.primary" 有没有写错控件名或类名。
检查按钮是否写了 Classes="primary"。
检查资源名字是否一致，比如 PrimaryBrush 不能写成 PrimaryColor。
检查 Window.Resources 是否写在 Window 内部，并且位于界面内容之前。

今天真正要掌握的判断方法

遇到重复外观时，先问：

这个值是不是会被多个控件使用？
如果以后要改，是否希望只改一处？
它是一个值，还是一组属性？
如果是一个值，用 Resources。
如果是一组属性，用 Styles。

能分清这五点，资源和样式就不会乱用。

Day 4 - 资源与样式

你将学会什么

本页固定顺序

学习衔接

今天的最低通过线

第一部分：先学原理和最小知识

1. 为什么需要资源和样式

2. Resource 是什么

3. Window.Resources 的作用范围

4. {StaticResource ...} 是什么

5. Style 是什么

6. Selector 是什么

7. Classes 是什么

8. Setter 是什么

9. 局部样式和全局样式怎么选

10. 什么时候不要写样式

资源与样式常用写法速查

第二部分：把知识组合成完整例子

MainWindow.axaml

先用一句话理解

第三部分：跟着敲代码

例子 1：先看没有样式时的问题

例子 2：把颜色提成资源

例子 3：用 Style 管理 primary 按钮

例子 4：给不同按钮不同样式类

例子 5：给标题和卡片区域也加样式

例子 6：完整商品编辑界面

小白重复敲写训练

训练 1：窗口资源

训练 2：统一按钮样式

训练 3：悬停样式

每日小测

1. 判断题

2. 填空题

3. 流程题

4. 找错误题

5. 改需求题

上位机专项练习

专项例子 1：定义统一按钮样式

专项例子 2：复用标题字号资源

专项例子 3：状态使用不同类名

第四部分：作业完整答案

作业要求

拆解步骤

MainWindow.axaml 完整答案

运行后应该看到什么

如果样式不生效，按这个顺序检查

今天真正要掌握的判断方法

3. `Window.Resources` 的作用范围

4. `{StaticResource ...}` 是什么