Files
YMhut-box-C-/参考/wpfui-main/docs/documentation/accent.md
T
2026-07-06 23:05:40 +08:00

212 lines
6.0 KiB
Markdown

# Accent Colors
Accent colors provide visual emphasis and brand identity in WPF UI applications. The library manages accent color resources that automatically adapt to light and dark themes.
> [!TIP]
> Use `SystemThemeWatcher.Watch(this)` in your main window constructor to automatically sync accent colors with Windows personalization settings.
## Apply System Accent
Use the system's personalization accent color:
```csharp
using Wpf.Ui.Appearance;
ApplicationAccentColorManager.ApplySystemAccent();
```
## Apply Theme with Accent
Apply theme and accent together:
```csharp
using Wpf.Ui.Appearance;
using Wpf.Ui.Controls;
ApplicationThemeManager.Apply(
ApplicationTheme.Dark,
WindowBackdropType.Mica,
updateAccent: true // Automatically applies system accent
);
```
Available backdrop types: `None`, `Auto`, `Mica`, `Acrylic`, `Tabbed`.
> [!IMPORTANT]
> Always use `DynamicResource` (not `StaticResource`) for accent color bindings to receive runtime updates when accent changes.
## Apply Custom Accent
Set a custom accent color:
```csharp
ApplicationAccentColorManager.Apply(
Color.FromArgb(0xFF, 0xEE, 0x00, 0xBB),
ApplicationTheme.Dark
);
```
Retrieve the Windows colorization color programmatically:
```csharp
Color colorizationColor = ApplicationAccentColorManager.GetColorizationColor();
ApplicationAccentColorManager.Apply(colorizationColor, ApplicationTheme.Dark);
```
## Accent Color Resources
WPF UI provides these accent color resources:
### System Accent Colors
Base accent colors that update when you call `ApplicationAccentColorManager.Apply()`:
- `SystemAccentColor` - Primary system accent
- `SystemAccentColorPrimary` - Lighter/darker variant for light/dark themes
- `SystemAccentColorSecondary` - More prominent variant (most commonly used)
- `SystemAccentColorTertiary` - Strongest variant
```xml
<Border Background="{DynamicResource SystemAccentColorSecondaryBrush}" />
```
> [!TIP]
> `SystemAccentColorSecondary` is the most commonly used variant for interactive elements and provides optimal contrast in both light and dark themes.
### Accent Text Colors
For text and interactive elements like links:
- `AccentTextFillColorPrimaryBrush` - Primary accent text (rest/hover state)
- `AccentTextFillColorSecondaryBrush` - Secondary accent text
- `AccentTextFillColorTertiaryBrush` - Tertiary accent text (pressed state)
- `AccentTextFillColorDisabledBrush` - Disabled accent text
```xml
<ui:Anchor
Content="WPF UI Documentation"
NavigateUri="https://wpfui.lepo.co/"
Foreground="{DynamicResource AccentTextFillColorPrimaryBrush}" />
```
### Accent Fill Colors
For button backgrounds and filled surfaces:
- `AccentFillColorDefaultBrush` - Default accent fill
- `AccentFillColorSecondaryBrush` - Secondary fill (90% opacity)
- `AccentFillColorTertiaryBrush` - Tertiary fill (80% opacity)
- `AccentFillColorDisabledBrush` - Disabled state fill
```xml
<Button Background="{DynamicResource AccentFillColorDefaultBrush}" />
```
### Text on Accent Colors
For text displayed on accent-colored backgrounds. These resources automatically adjust to black or white based on accent brightness:
- `TextOnAccentFillColorPrimary` - Primary text color on accent backgrounds
- `TextOnAccentFillColorSecondary` - Secondary text on accent backgrounds
- `TextOnAccentFillColorDisabled` - Disabled text on accent backgrounds
> [!NOTE]
> Text colors automatically switch between black and white when accent brightness exceeds 80% HSV to maintain readability.
## Theme-Specific Behavior
Accent variants adjust automatically based on the application theme:
**Dark Theme:**
- Primary: Base color + 17 brightness, -30% saturation
- Secondary: Base color + 17 brightness, -45% saturation
- Tertiary: Base color + 17 brightness, -65% saturation
**Light Theme:**
- Primary: Base color - 10 brightness
- Secondary: Base color - 25 brightness
- Tertiary: Base color - 40 brightness
> [!NOTE]
> Brightness adjustments are calculated in HSV color space. Negative values darken the color, positive values lighten it.
## Advanced: Custom Accent Variants
Specify all accent variants manually:
```csharp
ApplicationAccentColorManager.Apply(
systemAccent: Color.FromArgb(0xFF, 0x00, 0x78, 0xD4),
primaryAccent: Color.FromArgb(0xFF, 0x00, 0x67, 0xC0),
secondaryAccent: Color.FromArgb(0xFF, 0x00, 0x3E, 0x92),
tertiaryAccent: Color.FromArgb(0xFF, 0x00, 0x1A, 0x68)
);
```
> [!CAUTION]
> Manually specified accent variants won't automatically adjust when theme changes. Consider using automatic variant generation unless you need precise color control.
## Accessing Current Accent
Read current accent colors from `ApplicationAccentColorManager`:
```csharp
Color currentSystemAccent = ApplicationAccentColorManager.SystemAccent;
Color currentPrimaryAccent = ApplicationAccentColorManager.PrimaryAccent;
Color currentSecondaryAccent = ApplicationAccentColorManager.SecondaryAccent;
Color currentTertiaryAccent = ApplicationAccentColorManager.TertiaryAccent;
Brush accentBrush = ApplicationAccentColorManager.SystemAccentBrush;
```
## Theme Changed Event
Monitor accent changes when theme is applied:
```csharp
ApplicationThemeManager.Changed += (theme, accent) =>
{
Debug.WriteLine($"Theme changed to {theme}, accent: {accent}");
};
```
## Automatic System Theme Tracking
Use `SystemThemeWatcher` to automatically update theme and accent when Windows settings change:
```csharp
using Wpf.Ui.Appearance;
public partial class MainWindow : Window
{
public MainWindow()
{
// Watch system theme changes with Mica backdrop and accent updates
SystemThemeWatcher.Watch(this);
InitializeComponent();
}
}
```
With custom backdrop and accent settings:
```csharp
SystemThemeWatcher.Watch(
this,
WindowBackdropType.Acrylic,
updateAccents: true
);
```
Stop watching for theme changes:
```csharp
SystemThemeWatcher.UnWatch(this);
```
> [!NOTE]
> `SystemThemeWatcher` monitors `WM_WININICHANGE` messages and automatically applies system theme and accent when Windows personalization settings change.