Day 5 - 主题结构

颜色
间距
字号
按钮
输入框
卡片
列表

<ResourceDictionary>
  <SolidColorBrush x:Key="PrimaryBrush" Color="#2563EB" />
</ResourceDictionary>

Foreground="{StaticResource PrimaryBrush}"

<ResourceInclude Source="avares://ProductApp/Themes/Colors.axaml" />

<StyleInclude Source="avares://ProductApp/Themes/Buttons.axaml" />

<Styles>

<ResourceDictionary>

<FluentTheme />

<Application.Styles>
  <FluentTheme />
  <StyleInclude Source="avares://ProductApp/Themes/Buttons.axaml" />
</Application.Styles>

默认样式够用就不改
重复值再提取
全局通用放 App.axaml
页面专用放页面资源

Themes/
  Colors.axaml
  Spacing.axaml
  Buttons.axaml
App.axaml
Views/MainWindow.axaml

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <SolidColorBrush x:Key="PrimaryBrush" Color="#2563EB" />
  <SolidColorBrush x:Key="DangerBrush" Color="#DC2626" />
  <SolidColorBrush x:Key="CardBorderBrush" Color="#DDDDDD" />
</ResourceDictionary>

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Thickness x:Key="PageMargin">20</Thickness>
  <Thickness x:Key="CardPadding">16</Thickness>
</ResourceDictionary>

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <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>
</Styles>

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="ProductApp.App"
             RequestedThemeVariant="Default">
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source="avares://ProductApp/Themes/Colors.axaml" />
        <ResourceInclude Source="avares://ProductApp/Themes/Spacing.axaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
 
  <Application.Styles>
    <FluentTheme />
    <StyleInclude Source="avares://ProductApp/Themes/Buttons.axaml" />
  </Application.Styles>
</Application>

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ProductApp.Views.MainWindow"
        Width="620"
        Height="360"
        Title="主题结构">
  <StackPanel Margin="{StaticResource PageMargin}"
              Spacing="12">
    <TextBlock Text="商品管理"
               FontSize="24"
               FontWeight="Bold"
               Foreground="{StaticResource PrimaryBrush}" />
 
    <Border BorderBrush="{StaticResource CardBorderBrush}"
            BorderThickness="1"
            Padding="{StaticResource CardPadding}">
      <StackPanel Spacing="8">
        <TextBlock Text="名称：Keyboard" />
        <TextBlock Text="价格：199" />
 
        <StackPanel Orientation="Horizontal"
                    Spacing="8">
          <Button Classes="primary"
                  Content="保存" />
          <Button Content="取消" />
          <Button Classes="danger"
                  Content="删除" />
        </StackPanel>
      </StackPanel>
    </Border>
  </StackPanel>
</Window>

Themes/

Themes/Colors.axaml
Themes/Spacing.axaml
Themes/Buttons.axaml

<FluentTheme />

Foreground="{StaticResource PrimaryBrush}"

Classes="primary"

<Application.Resources>
    <SolidColorBrush x:Key="PageBackgroundBrush" Color="#F8FAFC" />
    <SolidColorBrush x:Key="TextBrush" Color="#111827" />
    <SolidColorBrush x:Key="PrimaryBrush" Color="#2563EB" />
</Application.Resources>

<Border Background="{DynamicResource PageBackgroundBrush}">
    <TextBlock Text="商品管理" Foreground="{DynamicResource TextBrush}" />
</Border>

Application.Current!.Resources["PageBackgroundBrush"] =
    new SolidColorBrush(Color.Parse("#111827"));

1. 知道为什么要拆分主题文件。
2. 会创建 `Themes/Colors.axaml` 保存颜色资源。
3. 会创建 `Themes/Spacing.axaml` 保存间距资源。

<Color x:Key="OnlineColor">#2E7D32</Color>
<Color x:Key="AlarmColor">#C62828</Color>
<Color x:Key="SurfaceColor">#F5F7FA</Color>

颜色名称表达用途而不是具体色值

<Border Background="{DynamicResource SurfaceBrush}">
  <TextBlock Foreground="{DynamicResource PrimaryTextBrush}"
             Text="设备监控" />
</Border>

切换主题时资源可以更新

Application.Current!.RequestedThemeVariant = ThemeVariant.Dark;

应用切换为深色主题

ProductApp/
  App.axaml
  Themes/
    Colors.axaml
    Spacing.axaml
    Buttons.axaml
  Views/
    MainWindow.axaml

Themes 文件夹拆分资源和样式
-> ResourceInclude 引入资源字典
-> StyleInclude 引入样式文件
-> 页面通过 StaticResource 和 Classes 使用主题
-> 修改主题文件，全局一起变化