zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-04-12 12:16:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #499 from irihitech/contrastdoc

Browse Source 
Add high-contrast theme demo.
This commit is contained in:
Dong Bin
2024-12-24 18:40:55 +08:00
committed by GitHub
parent 5222e64197 77cd48ecfe
commit 7ba3fbcb7a
10 changed files with 563 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.axaml
View File

@@ -1,12 +1,9 @@
<ResourceDictionary <ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls" xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls">
xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
x:CompileBindings="True"
x:DataType="viewModels:ColorItemViewModel">
<ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl"> <ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl">
<Setter Property="controls:ColorDetailControl.Template"> <Setter Property="Template">
<ControlTemplate TargetType="controls:ColorDetailControl"> <ControlTemplate TargetType="controls:ColorDetailControl">
<StackPanel> <StackPanel>
<TextBlock <TextBlock

54
demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs
View File

@@ -2,29 +2,28 @@ using System.Globalization;
using Avalonia; using Avalonia;
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Controls.Primitives; using Avalonia.Controls.Primitives;
using Avalonia.Input.Platform;
using Avalonia.Media; using Avalonia.Media;
using Avalonia.Media.Immutable;
namespace Semi.Avalonia.Demo.Controls; namespace Semi.Avalonia.Demo.Controls;
public class ColorDetailControl: TemplatedControl public class ColorDetailControl : TemplatedControl
{ {
public const string KEY_ResourceKey = "ResourceKey"; public const string KEY_ResourceKey = "ResourceKey";
public const string KEY_Hex = "Hex"; public const string KEY_Hex = "Hex";
public const string KEY_Opacity = "Opacity"; public const string KEY_Opacity = "Opacity";
public const string KEY_ColorResourceKey = "ColorResourceKey"; public const string KEY_ColorResourceKey = "ColorResourceKey";
public static readonly StyledProperty<string?> ResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>( public static readonly StyledProperty<string?> ResourceKeyProperty =
nameof(ResourceKey)); AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ResourceKey));
public string? ResourceKey public string? ResourceKey
{ {
get => GetValue(ResourceKeyProperty); get => GetValue(ResourceKeyProperty);
set => SetValue(ResourceKeyProperty, value); set => SetValue(ResourceKeyProperty, value);
} }
public static readonly StyledProperty<string?> ResourceNameProperty = AvaloniaProperty.Register<ColorDetailControl, string?>( public static readonly StyledProperty<string?> ResourceNameProperty =
nameof(ResourceName)); AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ResourceName));
public string? ResourceName public string? ResourceName
{ {
@@ -32,8 +31,8 @@ public class ColorDetailControl: TemplatedControl
set => SetValue(ResourceNameProperty, value); set => SetValue(ResourceNameProperty, value);
} }
public static readonly StyledProperty<string?> ColorResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>( public static readonly StyledProperty<string?> ColorResourceKeyProperty =
nameof(ColorResourceKey)); AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ColorResourceKey));
public string? ColorResourceKey public string? ColorResourceKey
{ {
@@ -41,27 +40,28 @@ public class ColorDetailControl: TemplatedControl
set => SetValue(ColorResourceKeyProperty, value); set => SetValue(ColorResourceKeyProperty, value);
} }
public static readonly DirectProperty<ColorDetailControl, string?> HexProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>( public static readonly DirectProperty<ColorDetailControl, string?> HexProperty =
nameof(Hex), o => o.Hex); AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(Hex), o => o.Hex);
private string? _hex; private string? _hex;
public string? Hex public string? Hex
{ {
get => _hex; get => _hex;
private set => SetAndRaise(HexProperty, ref _hex, value); private set => SetAndRaise(HexProperty, ref _hex, value);
} }
public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>( public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty =
nameof(OpacityNumber), o => o.OpacityNumber); AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(OpacityNumber), o => o.OpacityNumber);
private string? _opacityNumber; private string? _opacityNumber;
public string? OpacityNumber public string? OpacityNumber
{ {
get => _opacityNumber; get => _opacityNumber;
private set => SetAndRaise(OpacityNumberProperty, ref _opacityNumber, value); private set => SetAndRaise(OpacityNumberProperty, ref _opacityNumber, value);
} }
static ColorDetailControl() static ColorDetailControl()
{ {
BackgroundProperty.Changed.AddClassHandler<ColorDetailControl>((o, e) => o.OnBackgroundChanged(e)); BackgroundProperty.Changed.AddClassHandler<ColorDetailControl>((o, e) => o.OnBackgroundChanged(e));
@@ -84,13 +84,17 @@ public class ColorDetailControl: TemplatedControl
{ {
switch (s) switch (s)
{ {
case KEY_ResourceKey: text = ResourceKey; case KEY_ResourceKey:
text = ResourceKey;
break; break;
case KEY_Hex: text = Hex; case KEY_Hex:
text = Hex;
break; break;
case KEY_Opacity: text = OpacityNumber; case KEY_Opacity:
text = OpacityNumber;
break; break;
case KEY_ColorResourceKey: text = ColorResourceKey; case KEY_ColorResourceKey:
text = ColorResourceKey;
break; break;
default: text = string.Empty; break; default: text = string.Empty; break;
} }
@@ -99,9 +103,7 @@ public class ColorDetailControl: TemplatedControl
var toplevel = TopLevel.GetTopLevel(this); var toplevel = TopLevel.GetTopLevel(this);
if (toplevel?.Clipboard is { } c) if (toplevel?.Clipboard is { } c)
{ {
await c.SetTextAsync(text??string.Empty); await c.SetTextAsync(text ?? string.Empty);
} }
} }
} }

20
demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml
View File

@@ -1,25 +1,23 @@
<ResourceDictionary <ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Semi.Avalonia.Demo.Controls" xmlns:controls="using:Semi.Avalonia.Demo.Controls">
xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
x:CompileBindings="True"
x:DataType="viewModels:ColorItemViewModel">
<Design.PreviewWith> <Design.PreviewWith>
<controls:ColorItemControl /> <controls:ColorItemControl />
</Design.PreviewWith> </Design.PreviewWith>
<ControlTheme x:Key="{x:Type controls:ColorItemControl}" TargetType="controls:ColorItemControl"> <ControlTheme x:Key="{x:Type controls:ColorItemControl}" TargetType="controls:ColorItemControl">
<Setter Property="controls:ColorItemControl.Width" Value="120" /> <Setter Property="Width" Value="120" />
<Setter Property="controls:ColorItemControl.Height" Value="60" /> <Setter Property="Height" Value="60" />
<Setter Property="controls:ColorItemControl.Cursor" Value="Hand" /> <Setter Property="Cursor" Value="Hand" />
<Setter Property="controls:ColorItemControl.Template"> <Setter Property="Template">
<ControlTemplate TargetType="controls:ColorItemControl"> <ControlTemplate TargetType="controls:ColorItemControl">
<!-- -->
<Border <Border
Width="{TemplateBinding Width}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"> CornerRadius="{TemplateBinding CornerRadius}">
<Panel> <Panel>
<TextBlock <TextBlock
@@ -42,7 +40,7 @@
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^:pointerover /template/ TextBlock#PART_HexTextBlock"> <Style Selector="^:pointerover /template/ TextBlock#PART_HexTextBlock">
<Setter Property="TextBlock.IsVisible" Value="True" /> <Setter Property="IsVisible" Value="True" />
</Style> </Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

17
demo/Semi.Avalonia.Demo/Controls/ColorItemControl.cs
View File

@@ -1,5 +1,4 @@
using Avalonia; using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Primitives; using Avalonia.Controls.Primitives;
using Avalonia.Input; using Avalonia.Input;
using CommunityToolkit.Mvvm.Messaging; using CommunityToolkit.Mvvm.Messaging;
@@ -9,8 +8,8 @@ namespace Semi.Avalonia.Demo.Controls;
public class ColorItemControl : TemplatedControl public class ColorItemControl : TemplatedControl
{ {
public static readonly StyledProperty<string?> ColorNameProperty = AvaloniaProperty.Register<ColorItemControl, string?>( public static readonly StyledProperty<string?> ColorNameProperty =
nameof(ColorName)); AvaloniaProperty.Register<ColorItemControl, string?>(nameof(ColorName));
public string? ColorName public string? ColorName
{ {
@@ -26,14 +25,18 @@ public class ColorItemControl : TemplatedControl
get => GetValue(HexProperty); get => GetValue(HexProperty);
set => SetValue(HexProperty, value); set => SetValue(HexProperty, value);
} }
protected override void OnPointerPressed(PointerPressedEventArgs e) protected override void OnPointerPressed(PointerPressedEventArgs e)
{ {
base.OnPointerPressed(e); base.OnPointerPressed(e);
if (this.DataContext is ColorItemViewModel v) switch (this.DataContext)
{ {
WeakReferenceMessenger.Default.Send(v); case ColorItemViewModel colorItemViewModel:
WeakReferenceMessenger.Default.Send(colorItemViewModel);
break;
case ColorResource colorResource:
WeakReferenceMessenger.Default.Send(colorResource);
break;
} }
} }
} }

320
demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml Normal file
View File

@@ -0,0 +1,320 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
x:DataType="vm:HighContrastDemoViewModel"
x:Class="Semi.Avalonia.Demo.Pages.HighContrastDemo">
<Design.DataContext>
<vm:HighContrastDemoViewModel />
</Design.DataContext>
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="../Themes/ToggleSwitch.axaml" />
<ResourceInclude Source="../Controls/ColorItemControl.axaml" />
<ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<SplitView
Name="splitView"
CompactPaneLength="50"
DisplayMode="CompactInline"
IsPaneOpen="{Binding #toggle.IsChecked, Mode=TwoWay}"
OpenPaneLength="300"
PanePlacement="Right">
<SplitView.Pane>
<StackPanel>
<ToggleSwitch
Name="toggle"
HorizontalAlignment="Right"
IsChecked="True"
Theme="{DynamicResource SplitViewToggleSwitch}" />
<Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
<Panel>
<TextBlock
IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNull}}"
Text="Click on Color to Check Details"
TextWrapping="Wrap" />
<controls:ColorDetailControl
Background="{Binding SelectedColorResource.Brush}"
IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNotNull}}"
ResourceKey="{Binding SelectedColorResource.ResourceKey}"
ResourceName="{Binding SelectedColorResource.ResourceKey}" />
</Panel>
</Border>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<ScrollViewer>
<StackPanel Spacing="10">
<TextBlock Text="Theme Preview" FontWeight="SemiBold" />
<ListBox
Theme="{StaticResource PureCardRadioGroupListBox}"
ItemsSource="{Binding ThemeVariants}"
SelectedItem="{Binding SelectedThemeVariant}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Left" Spacing="5" MinWidth="200">
<ThemeVariantScope RequestedThemeVariant="{Binding}">
<Border
Padding="5 25 5 5"
HorizontalAlignment="Left"
Background="{DynamicResource WindowColor}"
BorderBrush="{DynamicResource WindowTextColor}"
BorderThickness="1"
CornerRadius="3">
<StackPanel Spacing="10">
<StackPanel Orientation="Horizontal" Spacing="50">
<StackPanel Spacing="5">
<TextBlock
FontSize="50"
Text="Aa" />
<StackPanel Orientation="Horizontal" Spacing="3">
<StackPanel.Styles>
<Style Selector="Border">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="Width" Value="10" />
<Setter Property="Height" Value="{Binding $self.Width}" />
</Style>
</StackPanel.Styles>
<Border Background="{DynamicResource WindowColor}" />
<Border Background="{DynamicResource HotlightColor}" />
<Border Background="{DynamicResource GrayTextColor}" />
<Border Background="{DynamicResource HighlightTextColor}" />
<Border Background="{DynamicResource HighlightColor}" />
</StackPanel>
</StackPanel>
<Border
BorderThickness="1"
BorderBrush="{DynamicResource WindowTextColor}"
CornerRadius="3"
Padding="8">
<Panel>
<StackPanel Spacing="5">
<Border
Width="50"
Height="1"
Background="{DynamicResource WindowTextColor}" />
<Border
Height="1"
Background="{DynamicResource WindowTextColor}" />
<Border
Height="1"
Background="{DynamicResource WindowTextColor}" />
</StackPanel>
<StackPanel
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Orientation="Horizontal"
Spacing="2">
<Border
Width="20"
Height="5"
Background="{DynamicResource HighlightColor}"
CornerRadius="1" />
<Border
Width="20"
Height="5"
BorderThickness="1"
BorderBrush="{DynamicResource ButtonTextColor}"
CornerRadius="1" />
</StackPanel>
</Panel>
</Border>
</StackPanel>
<Border
Height="1"
Background="{DynamicResource WindowTextColor}" />
</StackPanel>
</Border>
</ThemeVariantScope>
<TextBlock Text="{Binding}" FontWeight="SemiBold" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ThemeVariantScope
MinWidth="400"
RequestedThemeVariant="{Binding SelectedThemeVariant}">
<Border Padding="10" Background="{DynamicResource WindowColor}">
<StackPanel Spacing="16">
<StackPanel.Styles>
<Style Selector="TextBlock">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontWeight" Value="SemiBold" />
</Style>
<Style Selector="controls|ColorItemControl.ColorBlock">
<Setter Property="Width" Value="44" />
<Setter Property="Height" Value="{Binding $self.Width}" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" />
<Setter Property="CornerRadius" Value="3" />
</Style>
</StackPanel.Styles>
<Panel>
<TextBlock
Foreground="{DynamicResource WindowTextColor}"
Text="Background" />
<controls:ColorItemControl
Classes="ColorBlock"
DataContext="{Binding ColorResources[0]}"
Background="{DynamicResource WindowColor}" />
</Panel>
<Panel>
<TextBlock
Foreground="{DynamicResource WindowTextColor}"
Text="Text" />
<controls:ColorItemControl
Classes="ColorBlock"
DataContext="{Binding ColorResources[1]}"
Background="{DynamicResource WindowTextColor}" />
</Panel>
<Panel>
<TextBlock
Foreground="{DynamicResource HotlightColor}"
TextDecorations="Underline"
Text="Hyperlink" />
<controls:ColorItemControl
Classes="ColorBlock"
DataContext="{Binding ColorResources[2]}"
Background="{DynamicResource HotlightColor}" />
</Panel>
<Panel>
<TextBlock
Foreground="{DynamicResource GrayTextColor}"
Text="Inactive Text" />
<controls:ColorItemControl
Classes="ColorBlock"
DataContext="{Binding ColorResources[3]}"
Background="{DynamicResource GrayTextColor}" />
</Panel>
<Panel>
<TextBlock
Foreground="{DynamicResource HighlightTextColor}"
Background="{DynamicResource HighlightColor}"
Text="Selected text" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
<controls:ColorItemControl
Classes="ColorBlock"
DataContext="{Binding ColorResources[4]}"
Background="{DynamicResource HighlightTextColor}" />
<controls:ColorItemControl
Classes="ColorBlock"
DataContext="{Binding ColorResources[5]}"
Background="{DynamicResource HighlightColor}" />
</StackPanel>
</Panel>
<Panel>
<Border
HorizontalAlignment="Left"
VerticalAlignment="Center"
BorderBrush="{DynamicResource ButtonTextColor}"
Background="{DynamicResource ButtonFaceColor}"
BorderThickness="2"
CornerRadius="3">
<TextBlock
Foreground="{DynamicResource ButtonTextColor}"
Padding="16 6"
Text="Button text" />
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
<controls:ColorItemControl
Classes="ColorBlock"
DataContext="{Binding ColorResources[6]}"
Background="{DynamicResource ButtonTextColor}" />
<controls:ColorItemControl
Classes="ColorBlock"
DataContext="{Binding ColorResources[7]}"
Background="{DynamicResource ButtonFaceColor}" />
</StackPanel>
</Panel>
</StackPanel>
</Border>
</ThemeVariantScope>
<DataGrid
HorizontalAlignment="Left"
CanUserSortColumns="False"
AutoGenerateColumns="False"
ItemsSource="{Binding ColorResources}"
GridLinesVisibility="All"
BorderBrush="{DynamicResource SemiColorBorder}"
BorderThickness="1"
Padding="5">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Color">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<controls:ColorItemControl
Width="40"
Height="20"
CornerRadius="3"
Background="{Binding Brush}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="ResourceKey">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<SelectableTextBlock
Margin="12 0"
VerticalAlignment="Center"
Text="{Binding ResourceKey}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Hex">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<SelectableTextBlock
Margin="12 0"
VerticalAlignment="Center"
Text="{Binding Hex}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Description">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<SelectableTextBlock
Margin="12 0"
VerticalAlignment="Center"
Text="{Binding Description}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Pair With">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<SelectableTextBlock
Margin="12 0"
VerticalAlignment="Center"
Text="{Binding PairWith}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</ScrollViewer>
</SplitView.Content>
</SplitView>
</UserControl>

13
demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml.cs Normal file
View File

@@ -0,0 +1,13 @@
using Avalonia.Controls;
using Semi.Avalonia.Demo.ViewModels;
namespace Semi.Avalonia.Demo.Pages;
public partial class HighContrastDemo : UserControl
{
public HighContrastDemo()
{
InitializeComponent();
this.DataContext = new HighContrastDemoViewModel();
}
}

28
demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml
View File

@@ -4,18 +4,36 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:Semi.Avalonia.Demo.Pages"
x:DataType="vm:ThemeVariantDemoViewModel"
d:DesignHeight="450" d:DesignHeight="450"
d:DesignWidth="800" d:DesignWidth="800"
mc:Ignorable="d"> mc:Ignorable="d">
<Grid> <Design.DataContext>
<ThemeVariantScope Name="scope"> <vm:ThemeVariantDemoViewModel />
</Design.DataContext>
<StackPanel>
<Border Theme="{StaticResource CardBorder}">
<StackPanel>
<ListBox
Theme="{StaticResource CardRadioGroupListBox}"
ItemsSource="{Binding ThemeVariants}"
SelectedItem="{Binding SelectedThemeVariant}" />
<DatePicker />
<CalendarDatePicker />
</StackPanel>
</Border>
<ThemeVariantScope RequestedThemeVariant="{Binding SelectedThemeVariant}">
<Border Theme="{StaticResource CardBorder}"> <Border Theme="{StaticResource CardBorder}">
<StackPanel> <StackPanel>
<ListBox
Theme="{StaticResource CardRadioGroupListBox}"
ItemsSource="{Binding ThemeVariants}"
SelectedItem="{Binding SelectedThemeVariant}" />
<DatePicker /> <DatePicker />
<CalendarDatePicker /> <CalendarDatePicker />
<ToggleSwitch Content="Switch Theme" IsCheckedChanged="Switch_OnIsCheckedChanged" />
</StackPanel> </StackPanel>
</Border> </Border>
</ThemeVariantScope> </ThemeVariantScope>
</Grid> </StackPanel>
</UserControl> </UserControl>

25
demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml.cs
View File

@@ -1,8 +1,7 @@
using Avalonia; using System.Collections.Generic;
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Markup.Xaml;
using Avalonia.Styling; using Avalonia.Styling;
using CommunityToolkit.Mvvm.ComponentModel;
namespace Semi.Avalonia.Demo.Pages; namespace Semi.Avalonia.Demo.Pages;
@@ -11,10 +10,22 @@ public partial class ThemeVariantDemo : UserControl
public ThemeVariantDemo() public ThemeVariantDemo()
{ {
InitializeComponent(); InitializeComponent();
this.DataContext = new ThemeVariantDemoViewModel();
} }
}
private void Switch_OnIsCheckedChanged(object sender, RoutedEventArgs e) public partial class ThemeVariantDemoViewModel : ObservableObject
{ {
scope.RequestedThemeVariant = scope.ActualThemeVariant == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark; [ObservableProperty] private ThemeVariant? _selectedThemeVariant;
}
public IEnumerable<ThemeVariant> ThemeVariants =>
[
ThemeVariant.Default,
ThemeVariant.Light,
ThemeVariant.Dark,
SemiTheme.Aquatic,
SemiTheme.Desert,
SemiTheme.Dust,
SemiTheme.NightSky,
];
} }

137
demo/Semi.Avalonia.Demo/ViewModels/HighContrastDemoViewModel.cs Normal file
View File

@@ -0,0 +1,137 @@
using System.Collections.Generic;
using System.Collections.ObjectModel;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Media;
using Avalonia.Styling;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Messaging;
namespace Semi.Avalonia.Demo.ViewModels;
public partial class HighContrastDemoViewModel : ObservableObject
{
[ObservableProperty] private ThemeVariant? _selectedThemeVariant;
[ObservableProperty] private ColorResource _selectedColorResource = null!;
public IEnumerable<ThemeVariant> ThemeVariants { get; }
public ObservableCollection<ColorResource> ColorResources { get; set; }
public HighContrastDemoViewModel()
{
ThemeVariants =
[
SemiTheme.Aquatic,
SemiTheme.Desert,
SemiTheme.Dust,
SemiTheme.NightSky,
];
ColorResources =
[
new ColorResource
{
ResourceKey = "WindowColor",
Brush = new SolidColorBrush(Color.Parse("#202020")),
Hex = "#FF202020",
Description = "Background of pages, panes, popups, and windows.",
PairWith = "WindowTextColor"
},
new ColorResource
{
ResourceKey = "WindowTextColor",
Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
Hex = "WHITE",
Description = "Headings, body copy, lists, placeholder text, app and window borders.",
PairWith = "WindowColor"
},
new ColorResource
{
ResourceKey = "HotlightColor",
Brush = new SolidColorBrush(Color.Parse("#75E9FC")),
Hex = "#FF75E9FC",
Description = "Hyperlinks.",
PairWith = "WindowColor"
},
new ColorResource
{
ResourceKey = "GrayTextColor",
Brush = new SolidColorBrush(Color.Parse("#A6A6A6")),
Hex = "#FFA6A6A6",
Description = "Inactive (disabled) UI.",
PairWith = "WindowColor"
},
new ColorResource
{
ResourceKey = "HighlightTextColor",
Brush = new SolidColorBrush(Color.Parse("#263B50")),
Hex = "#FF263B50",
Description =
"Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress.",
PairWith = "HighlightColor"
},
new ColorResource
{
ResourceKey = "HighlightColor",
Brush = new SolidColorBrush(Color.Parse("#8EE3F0")),
Hex = "#FF8EE3F0",
Description =
"Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress.",
PairWith = "HighlightTextColor"
},
new ColorResource
{
ResourceKey = "ButtonTextColor",
Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
Hex = "WHITE",
Description = "Foreground color for buttons and any UI that can be interacted with.",
PairWith = "ButtonFaceColor"
},
new ColorResource
{
ResourceKey = "ButtonFaceColor",
Brush = new SolidColorBrush(Color.Parse("#202020")),
Hex = "#FF202020",
Description = "Background color for buttons and any UI that can be interacted with.",
PairWith = "ButtonTextColor"
},
];
WeakReferenceMessenger.Default.Register<HighContrastDemoViewModel, ColorResource>
(this, (_, item) => SelectedColorResource = item);
SelectedThemeVariant = SemiTheme.Aquatic;
}
partial void OnSelectedThemeVariantChanged(ThemeVariant? value)
{
var topLevel = ResolveDefaultTopLevel();
if (value is null) return;
foreach (var colorResource in ColorResources)
{
if (colorResource.ResourceKey is null) continue;
if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true && o is Color color)
{
colorResource.Brush = new SolidColorBrush(color);
colorResource.Hex = color.ToString().ToUpperInvariant();
}
}
}
private static TopLevel? ResolveDefaultTopLevel()
{
return Application.Current?.ApplicationLifetime switch
{
IClassicDesktopStyleApplicationLifetime desktopLifetime => desktopLifetime.MainWindow,
ISingleViewApplicationLifetime singleView => TopLevel.GetTopLevel(singleView.MainView),
_ => null
};
}
}
public partial class ColorResource : ObservableObject
{
[ObservableProperty] private string? _resourceKey;
[ObservableProperty] private SolidColorBrush? _brush;
[ObservableProperty] private string? _hex;
[ObservableProperty] private string? _description;
[ObservableProperty] private string? _pairWith;
}

3
demo/Semi.Avalonia.Demo/Views/MainView.axaml
View File

@@ -104,6 +104,9 @@
<TabItem Header="Palette"> <TabItem Header="Palette">
<pages:PaletteDemo /> <pages:PaletteDemo />
</TabItem> </TabItem>
<TabItem Header="HighContrastTheme">
<pages:HighContrastDemo />
</TabItem>
<TabItem Header="Icon"> <TabItem Header="Icon">
<pages:IconDemo /> <pages:IconDemo />
</TabItem> </TabItem>