XamlCSS 使用教程

1. 项目介绍

XamlCSS 是一个开源项目，旨在通过 CSS 样式表来简化 XAML 应用程序的样式设计。它支持 WPF、Xamarin.Forms 和 UWP 平台，允许开发者使用熟悉的 CSS 语法来定义和应用样式。XamlCSS 不仅支持基本的 CSS 选择器，还支持一些 SCSS 特性，如选择器嵌套、CSS 变量和混合器，从而使样式声明更加简洁和灵活。

2. 项目快速启动

2.1 安装 XamlCSS

首先，通过 NuGet 安装 XamlCSS 包：

dotnet add package XamlCSS --version 2.2.0

2.2 初始化 XamlCSS

在你的 XAML 应用程序中初始化 XamlCSS。以下是一个简单的 WPF 示例：

<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:css="clr-namespace:XamlCSS.WPF;assembly=XamlCSS.WPF"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <css:StyleSheet x:Key="styleSheet" Source="/YourNamespace;component/styles.css" />
    </Window.Resources>
    <Grid css:StyleSheet.Style="{StaticResource styleSheet}">
        <Button Content="Click Me" />
    </Grid>
</Window>

2.3 创建 CSS 文件

在项目中创建一个 styles.css 文件，并定义一些样式：

Button {
    Background: #FF5733;
    Foreground: white;
    FontSize: 16px;
}

Button:hover {
    Background: #C70039;
}

2.4 运行应用程序

编译并运行你的应用程序，你应该会看到按钮应用了你在 CSS 文件中定义的样式。

3. 应用案例和最佳实践

3.1 主题切换

XamlCSS 支持通过切换 CSS 类名来实现主题切换。例如，你可以在根元素上切换 dark-theme 和 light-theme 类名，从而应用不同的样式表：

<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:css="clr-namespace:XamlCSS.WPF;assembly=XamlCSS.WPF"
        Title="MainWindow" Height="350" Width="525"
        css:StyleSheet.Style="{StaticResource styleSheet}"
        css:StyleSheet.ClassName="light-theme">
    <Grid>
        <Button Content="Click Me" />
    </Grid>
</Window>

3.2 动态样式更新

XamlCSS 支持动态更新样式，这意味着你可以在运行时更改 CSS 文件的内容，样式会自动更新。这对于实时预览和调试非常有用。

4. 典型生态项目

4.1 LiveXAML

LiveXAML 是一个与 XamlCSS 配合使用的工具，它允许你在 Xamarin.Forms 应用程序中实时更新 XAML 和 CSS 文件，而无需重新编译和部署应用程序。

4.2 AngleSharp

AngleSharp 是一个用于解析和操作 HTML 和 CSS 的库，虽然 XamlCSS 内部已经集成了对 CSS 的支持，但在某些高级场景下，你可能需要使用 AngleSharp 来处理更复杂的 CSS 解析需求。

通过以上步骤，你应该能够快速上手并使用 XamlCSS 来简化你的 XAML 应用程序的样式设计。