feat: add ColorDetail panel.

This commit is contained in:
Zhang Dian
2024-12-24 16:39:57 +08:00
parent 25aa8fa3f2
commit 329e041ced
6 changed files with 366 additions and 282 deletions

View File

@@ -1,13 +1,10 @@
<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">
<StreamGeometry x:Key="CopyIcon">M5 7C3.89543 7 3 7.89543 3 9V19C3 20.1046 3.89543 21 5 21H15C16.1046 21 17 20.1046 17 19V9C17 7.89543 16.1046 7 15 7H5Z,M7 4C7 2.89543 7.89543 2 9 2H20C21.1046 2 22 2.89543 22 4V15C22 16.1046 21.1046 17 20 17H19V8C19 6 18 5 16 5H7V4Z</StreamGeometry> <StreamGeometry x:Key="CopyIcon">M5 7C3.89543 7 3 7.89543 3 9V19C3 20.1046 3.89543 21 5 21H15C16.1046 21 17 20.1046 17 19V9C17 7.89543 16.1046 7 15 7H5Z,M7 4C7 2.89543 7.89543 2 9 2H20C21.1046 2 22 2.89543 22 4V15C22 16.1046 21.1046 17 20 17H19V8C19 6 18 5 16 5H7V4Z</StreamGeometry>
<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

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);
} }
} }
} }

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>

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
{ {
@@ -30,10 +29,14 @@ public class ColorItemControl : TemplatedControl
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;
} }
} }
} }

View File

@@ -3,12 +3,52 @@
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.ViewModels" 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" mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
x:DataType="vm:HighContrastDemoViewModel" x:DataType="vm:HighContrastDemoViewModel"
x:Class="Semi.Avalonia.Demo.Pages.HighContrastDemo"> x:Class="Semi.Avalonia.Demo.Pages.HighContrastDemo">
<Design.DataContext> <Design.DataContext>
<vm:HighContrastDemoViewModel /> <vm:HighContrastDemoViewModel />
</Design.DataContext> </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> <ScrollViewer>
<StackPanel Spacing="10"> <StackPanel Spacing="10">
<TextBlock Text="Theme Preview" FontWeight="SemiBold" /> <TextBlock Text="Theme Preview" FontWeight="SemiBold" />
@@ -18,12 +58,12 @@
SelectedItem="{Binding SelectedThemeVariant}"> SelectedItem="{Binding SelectedThemeVariant}">
<ListBox.ItemsPanel> <ListBox.ItemsPanel>
<ItemsPanelTemplate> <ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" /> <WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate> </ItemsPanelTemplate>
</ListBox.ItemsPanel> </ListBox.ItemsPanel>
<ListBox.ItemTemplate> <ListBox.ItemTemplate>
<DataTemplate> <DataTemplate>
<StackPanel Spacing="5"> <StackPanel HorizontalAlignment="Left" Spacing="5" MinWidth="200">
<ThemeVariantScope RequestedThemeVariant="{Binding}"> <ThemeVariantScope RequestedThemeVariant="{Binding}">
<Border <Border
Padding="5 25 5 5" Padding="5 25 5 5"
@@ -116,7 +156,7 @@
<Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontWeight" Value="SemiBold" /> <Setter Property="FontWeight" Value="SemiBold" />
</Style> </Style>
<Style Selector="Border.ColorBlock"> <Style Selector="controls|ColorItemControl.ColorBlock">
<Setter Property="Width" Value="44" /> <Setter Property="Width" Value="44" />
<Setter Property="Height" Value="{Binding $self.Width}" /> <Setter Property="Height" Value="{Binding $self.Width}" />
<Setter Property="HorizontalAlignment" Value="Right" /> <Setter Property="HorizontalAlignment" Value="Right" />
@@ -129,16 +169,18 @@
<TextBlock <TextBlock
Foreground="{DynamicResource WindowTextColor}" Foreground="{DynamicResource WindowTextColor}"
Text="Background" /> Text="Background" />
<Border <controls:ColorItemControl
Classes="ColorBlock" Classes="ColorBlock"
DataContext="{Binding ColorResources[0]}"
Background="{DynamicResource WindowColor}" /> Background="{DynamicResource WindowColor}" />
</Panel> </Panel>
<Panel> <Panel>
<TextBlock <TextBlock
Foreground="{DynamicResource WindowTextColor}" Foreground="{DynamicResource WindowTextColor}"
Text="Text" /> Text="Text" />
<Border <controls:ColorItemControl
Classes="ColorBlock" Classes="ColorBlock"
DataContext="{Binding ColorResources[1]}"
Background="{DynamicResource WindowTextColor}" /> Background="{DynamicResource WindowTextColor}" />
</Panel> </Panel>
<Panel> <Panel>
@@ -146,16 +188,18 @@
Foreground="{DynamicResource HotlightColor}" Foreground="{DynamicResource HotlightColor}"
TextDecorations="Underline" TextDecorations="Underline"
Text="Hyperlink" /> Text="Hyperlink" />
<Border <controls:ColorItemControl
Classes="ColorBlock" Classes="ColorBlock"
DataContext="{Binding ColorResources[2]}"
Background="{DynamicResource HotlightColor}" /> Background="{DynamicResource HotlightColor}" />
</Panel> </Panel>
<Panel> <Panel>
<TextBlock <TextBlock
Foreground="{DynamicResource GrayTextColor}" Foreground="{DynamicResource GrayTextColor}"
Text="Inactive Text" /> Text="Inactive Text" />
<Border <controls:ColorItemControl
Classes="ColorBlock" Classes="ColorBlock"
DataContext="{Binding ColorResources[3]}"
Background="{DynamicResource GrayTextColor}" /> Background="{DynamicResource GrayTextColor}" />
</Panel> </Panel>
<Panel> <Panel>
@@ -164,8 +208,14 @@
Background="{DynamicResource HighlightColor}" Background="{DynamicResource HighlightColor}"
Text="Selected text" /> Text="Selected text" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
<Border Classes="ColorBlock" Background="{DynamicResource HighlightTextColor}" /> <controls:ColorItemControl
<Border Classes="ColorBlock" Background="{DynamicResource HighlightColor}" /> Classes="ColorBlock"
DataContext="{Binding ColorResources[4]}"
Background="{DynamicResource HighlightTextColor}" />
<controls:ColorItemControl
Classes="ColorBlock"
DataContext="{Binding ColorResources[5]}"
Background="{DynamicResource HighlightColor}" />
</StackPanel> </StackPanel>
</Panel> </Panel>
<Panel> <Panel>
@@ -182,11 +232,13 @@
Text="Button text" /> Text="Button text" />
</Border> </Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
<Border <controls:ColorItemControl
Classes="ColorBlock" Classes="ColorBlock"
DataContext="{Binding ColorResources[6]}"
Background="{DynamicResource ButtonTextColor}" /> Background="{DynamicResource ButtonTextColor}" />
<Border <controls:ColorItemControl
Classes="ColorBlock" Classes="ColorBlock"
DataContext="{Binding ColorResources[7]}"
Background="{DynamicResource ButtonFaceColor}" /> Background="{DynamicResource ButtonFaceColor}" />
</StackPanel> </StackPanel>
</Panel> </Panel>
@@ -207,7 +259,11 @@
<DataGridTemplateColumn Header="Color"> <DataGridTemplateColumn Header="Color">
<DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellTemplate>
<DataTemplate> <DataTemplate>
<Border Background="{Binding Brush}" /> <controls:ColorItemControl
Width="40"
Height="20"
CornerRadius="3"
Background="{Binding Brush}" />
</DataTemplate> </DataTemplate>
</DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn> </DataGridTemplateColumn>
@@ -223,6 +279,17 @@
</DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn> </DataGridTemplateColumn>
<DataGridTemplateColumn Header="Hex">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<SelectableTextBlock
Margin="12 0"
VerticalAlignment="Center"
Text="{Binding Hex}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Description"> <DataGridTemplateColumn Header="Description">
<DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellTemplate>
<DataTemplate> <DataTemplate>
@@ -248,4 +315,6 @@
</DataGrid> </DataGrid>
</StackPanel> </StackPanel>
</ScrollViewer> </ScrollViewer>
</SplitView.Content>
</SplitView>
</UserControl> </UserControl>

View File

@@ -6,12 +6,15 @@ using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Media; using Avalonia.Media;
using Avalonia.Styling; using Avalonia.Styling;
using CommunityToolkit.Mvvm.ComponentModel; using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Messaging;
namespace Semi.Avalonia.Demo.ViewModels; namespace Semi.Avalonia.Demo.ViewModels;
public partial class HighContrastDemoViewModel : ObservableObject public partial class HighContrastDemoViewModel : ObservableObject
{ {
[ObservableProperty] private ThemeVariant? _selectedThemeVariant; [ObservableProperty] private ThemeVariant? _selectedThemeVariant;
[ObservableProperty] private ColorResource _selectedColorResource = null!;
public IEnumerable<ThemeVariant> ThemeVariants { get; } public IEnumerable<ThemeVariant> ThemeVariants { get; }
public ObservableCollection<ColorResource> ColorResources { get; set; } public ObservableCollection<ColorResource> ColorResources { get; set; }
@@ -30,6 +33,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
{ {
ResourceKey = "WindowColor", ResourceKey = "WindowColor",
Brush = new SolidColorBrush(Color.Parse("#202020")), Brush = new SolidColorBrush(Color.Parse("#202020")),
Hex = "#FF202020",
Description = "Background of pages, panes, popups, and windows.", Description = "Background of pages, panes, popups, and windows.",
PairWith = "WindowTextColor" PairWith = "WindowTextColor"
}, },
@@ -37,6 +41,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
{ {
ResourceKey = "WindowTextColor", ResourceKey = "WindowTextColor",
Brush = new SolidColorBrush(Color.Parse("#FFFFFF")), Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
Hex = "WHITE",
Description = "Headings, body copy, lists, placeholder text, app and window borders.", Description = "Headings, body copy, lists, placeholder text, app and window borders.",
PairWith = "WindowColor" PairWith = "WindowColor"
}, },
@@ -44,6 +49,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
{ {
ResourceKey = "HotlightColor", ResourceKey = "HotlightColor",
Brush = new SolidColorBrush(Color.Parse("#75E9FC")), Brush = new SolidColorBrush(Color.Parse("#75E9FC")),
Hex = "#FF75E9FC",
Description = "Hyperlinks.", Description = "Hyperlinks.",
PairWith = "WindowColor" PairWith = "WindowColor"
}, },
@@ -51,6 +57,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
{ {
ResourceKey = "GrayTextColor", ResourceKey = "GrayTextColor",
Brush = new SolidColorBrush(Color.Parse("#A6A6A6")), Brush = new SolidColorBrush(Color.Parse("#A6A6A6")),
Hex = "#FFA6A6A6",
Description = "Inactive (disabled) UI.", Description = "Inactive (disabled) UI.",
PairWith = "WindowColor" PairWith = "WindowColor"
}, },
@@ -58,6 +65,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
{ {
ResourceKey = "HighlightTextColor", ResourceKey = "HighlightTextColor",
Brush = new SolidColorBrush(Color.Parse("#263B50")), Brush = new SolidColorBrush(Color.Parse("#263B50")),
Hex = "#FF263B50",
Description = Description =
"Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress.", "Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress.",
PairWith = "HighlightColor" PairWith = "HighlightColor"
@@ -66,6 +74,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
{ {
ResourceKey = "HighlightColor", ResourceKey = "HighlightColor",
Brush = new SolidColorBrush(Color.Parse("#8EE3F0")), Brush = new SolidColorBrush(Color.Parse("#8EE3F0")),
Hex = "#FF8EE3F0",
Description = Description =
"Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress.", "Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress.",
PairWith = "HighlightTextColor" PairWith = "HighlightTextColor"
@@ -74,6 +83,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
{ {
ResourceKey = "ButtonTextColor", ResourceKey = "ButtonTextColor",
Brush = new SolidColorBrush(Color.Parse("#FFFFFF")), Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
Hex = "WHITE",
Description = "Foreground color for buttons and any UI that can be interacted with.", Description = "Foreground color for buttons and any UI that can be interacted with.",
PairWith = "ButtonFaceColor" PairWith = "ButtonFaceColor"
}, },
@@ -81,10 +91,13 @@ public partial class HighContrastDemoViewModel : ObservableObject
{ {
ResourceKey = "ButtonFaceColor", ResourceKey = "ButtonFaceColor",
Brush = new SolidColorBrush(Color.Parse("#202020")), Brush = new SolidColorBrush(Color.Parse("#202020")),
Hex = "#FF202020",
Description = "Background color for buttons and any UI that can be interacted with.", Description = "Background color for buttons and any UI that can be interacted with.",
PairWith = "ButtonTextColor" PairWith = "ButtonTextColor"
}, },
]; ];
WeakReferenceMessenger.Default.Register<HighContrastDemoViewModel, ColorResource>
(this, (_, item) => SelectedColorResource = item);
SelectedThemeVariant = SemiTheme.Aquatic; SelectedThemeVariant = SemiTheme.Aquatic;
} }
@@ -98,6 +111,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true && o is Color color) if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true && o is Color color)
{ {
colorResource.Brush = new SolidColorBrush(color); colorResource.Brush = new SolidColorBrush(color);
colorResource.Hex = color.ToString().ToUpperInvariant();
} }
} }
} }
@@ -117,6 +131,7 @@ public partial class ColorResource : ObservableObject
{ {
[ObservableProperty] private string? _resourceKey; [ObservableProperty] private string? _resourceKey;
[ObservableProperty] private SolidColorBrush? _brush; [ObservableProperty] private SolidColorBrush? _brush;
[ObservableProperty] private string? _hex;
[ObservableProperty] private string? _description; [ObservableProperty] private string? _description;
[ObservableProperty] private string? _pairWith; [ObservableProperty] private string? _pairWith;
} }