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

feat: add ColorDetail panel.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

7
demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.axaml
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

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

18
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>

15
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
{ {
@@ -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;
} }
} }
} }

535
demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml
View File

@@ -3,249 +3,318 @@
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>
<ScrollViewer> <UserControl.Resources>
<StackPanel Spacing="10"> <ResourceDictionary>
<TextBlock Text="Theme Preview" FontWeight="SemiBold" /> <ResourceDictionary.MergedDictionaries>
<ListBox <ResourceInclude Source="../Themes/ToggleSwitch.axaml" />
Theme="{StaticResource PureCardRadioGroupListBox}" <ResourceInclude Source="../Controls/ColorItemControl.axaml" />
ItemsSource="{Binding ThemeVariants}" <ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
SelectedItem="{Binding SelectedThemeVariant}"> </ResourceDictionary.MergedDictionaries>
<ListBox.ItemsPanel> </ResourceDictionary>
<ItemsPanelTemplate> </UserControl.Resources>
<StackPanel Orientation="Horizontal" /> <SplitView
</ItemsPanelTemplate> Name="splitView"
</ListBox.ItemsPanel> CompactPaneLength="50"
<ListBox.ItemTemplate> DisplayMode="CompactInline"
<DataTemplate> IsPaneOpen="{Binding #toggle.IsChecked, Mode=TwoWay}"
<StackPanel Spacing="5"> OpenPaneLength="300"
<ThemeVariantScope RequestedThemeVariant="{Binding}"> PanePlacement="Right">
<Border <SplitView.Pane>
Padding="5 25 5 5" <StackPanel>
HorizontalAlignment="Left" <ToggleSwitch
Background="{DynamicResource WindowColor}" Name="toggle"
BorderBrush="{DynamicResource WindowTextColor}" HorizontalAlignment="Right"
BorderThickness="1" IsChecked="True"
CornerRadius="3"> Theme="{DynamicResource SplitViewToggleSwitch}" />
<StackPanel Spacing="10"> <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
<StackPanel Orientation="Horizontal" Spacing="50"> <Panel>
<StackPanel Spacing="5"> <TextBlock
<TextBlock IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNull}}"
FontSize="50" Text="Click on Color to Check Details"
Text="Aa" /> TextWrapping="Wrap" />
<StackPanel Orientation="Horizontal" Spacing="3"> <controls:ColorDetailControl
<StackPanel.Styles> Background="{Binding SelectedColorResource.Brush}"
<Style Selector="Border"> IsVisible="{Binding SelectedColorResource, Converter={x:Static ObjectConverters.IsNotNull}}"
<Setter Property="BorderThickness" Value="1" /> ResourceKey="{Binding SelectedColorResource.ResourceKey}"
<Setter Property="BorderBrush" Value="{DynamicResource WindowTextColor}" /> ResourceName="{Binding SelectedColorResource.ResourceKey}" />
<Setter Property="CornerRadius" Value="5" /> </Panel>
<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="Border.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" />
<Border
Classes="ColorBlock"
Background="{DynamicResource WindowColor}" />
</Panel>
<Panel>
<TextBlock
Foreground="{DynamicResource WindowTextColor}"
Text="Text" />
<Border
Classes="ColorBlock"
Background="{DynamicResource WindowTextColor}" />
</Panel>
<Panel>
<TextBlock
Foreground="{DynamicResource HotlightColor}"
TextDecorations="Underline"
Text="Hyperlink" />
<Border
Classes="ColorBlock"
Background="{DynamicResource HotlightColor}" />
</Panel>
<Panel>
<TextBlock
Foreground="{DynamicResource GrayTextColor}"
Text="Inactive Text" />
<Border
Classes="ColorBlock"
Background="{DynamicResource GrayTextColor}" />
</Panel>
<Panel>
<TextBlock
Foreground="{DynamicResource HighlightTextColor}"
Background="{DynamicResource HighlightColor}"
Text="Selected text" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="4">
<Border Classes="ColorBlock" Background="{DynamicResource HighlightTextColor}" />
<Border Classes="ColorBlock" 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">
<Border
Classes="ColorBlock"
Background="{DynamicResource ButtonTextColor}" />
<Border
Classes="ColorBlock"
Background="{DynamicResource ButtonFaceColor}" />
</StackPanel>
</Panel>
</StackPanel>
</Border> </Border>
</ThemeVariantScope> </StackPanel>
</SplitView.Pane>
<DataGrid <SplitView.Content>
HorizontalAlignment="Left" <ScrollViewer>
CanUserSortColumns="False" <StackPanel Spacing="10">
AutoGenerateColumns="False" <TextBlock Text="Theme Preview" FontWeight="SemiBold" />
ItemsSource="{Binding ColorResources}" <ListBox
GridLinesVisibility="All" Theme="{StaticResource PureCardRadioGroupListBox}"
BorderBrush="{DynamicResource SemiColorBorder}" ItemsSource="{Binding ThemeVariants}"
BorderThickness="1" SelectedItem="{Binding SelectedThemeVariant}">
Padding="5"> <ListBox.ItemsPanel>
<DataGrid.Columns> <ItemsPanelTemplate>
<DataGridTemplateColumn Header="Color"> <WrapPanel Orientation="Horizontal" />
<DataGridTemplateColumn.CellTemplate> </ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate> <DataTemplate>
<Border Background="{Binding Brush}" /> <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> </DataTemplate>
</DataGridTemplateColumn.CellTemplate> </ListBox.ItemTemplate>
</DataGridTemplateColumn> </ListBox>
<DataGridTemplateColumn Header="ResourceKey"> <ThemeVariantScope
<DataGridTemplateColumn.CellTemplate> MinWidth="400"
<DataTemplate> RequestedThemeVariant="{Binding SelectedThemeVariant}">
<SelectableTextBlock <Border Padding="10" Background="{DynamicResource WindowColor}">
Margin="12 0" <StackPanel Spacing="16">
VerticalAlignment="Center" <StackPanel.Styles>
Text="{Binding ResourceKey}" /> <Style Selector="TextBlock">
</DataTemplate> <Setter Property="HorizontalAlignment" Value="Left" />
</DataGridTemplateColumn.CellTemplate> <Setter Property="VerticalAlignment" Value="Center" />
</DataGridTemplateColumn> <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>
<DataGridTemplateColumn Header="Description"> <DataGrid
<DataGridTemplateColumn.CellTemplate> HorizontalAlignment="Left"
<DataTemplate> CanUserSortColumns="False"
<SelectableTextBlock AutoGenerateColumns="False"
Margin="12 0" ItemsSource="{Binding ColorResources}"
VerticalAlignment="Center" GridLinesVisibility="All"
Text="{Binding Description}" /> BorderBrush="{DynamicResource SemiColorBorder}"
</DataTemplate> BorderThickness="1"
</DataGridTemplateColumn.CellTemplate> Padding="5">
</DataGridTemplateColumn> <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="Pair With"> <DataGridTemplateColumn Header="ResourceKey">
<DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellTemplate>
<DataTemplate> <DataTemplate>
<SelectableTextBlock <SelectableTextBlock
Margin="12 0" Margin="12 0"
VerticalAlignment="Center" VerticalAlignment="Center"
Text="{Binding PairWith}" /> Text="{Binding ResourceKey}" />
</DataTemplate> </DataTemplate>
</DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn> </DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid> <DataGridTemplateColumn Header="Hex">
</StackPanel> <DataGridTemplateColumn.CellTemplate>
</ScrollViewer> <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> </UserControl>

15
demo/Semi.Avalonia.Demo/ViewModels/HighContrastDemoViewModel.cs
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;
} }