mirror of
https://gitcode.com/gh_mirrors/se/Semi.Avalonia
synced 2026-03-03 00:00:55 +08:00
feat: add ColorDetail panel.
This commit is contained in:
Zhang Dian
@@ -1,13 +1,10 @@
|
||||
<ResourceDictionary
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
|
||||
xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
|
||||
x:CompileBindings="True"
|
||||
x:DataType="viewModels:ColorItemViewModel">
|
||||
xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls">
|
||||
<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">
|
||||
<Setter Property="controls:ColorDetailControl.Template">
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="controls:ColorDetailControl">
|
||||
<StackPanel>
|
||||
<TextBlock
|
||||
|
||||
@@ -2,29 +2,28 @@ using System.Globalization;
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Controls.Primitives;
|
||||
using Avalonia.Input.Platform;
|
||||
using Avalonia.Media;
|
||||
using Avalonia.Media.Immutable;
|
||||
|
||||
namespace Semi.Avalonia.Demo.Controls;
|
||||
|
||||
public class ColorDetailControl: TemplatedControl
|
||||
public class ColorDetailControl : TemplatedControl
|
||||
{
|
||||
public const string KEY_ResourceKey = "ResourceKey";
|
||||
public const string KEY_Hex = "Hex";
|
||||
public const string KEY_Opacity = "Opacity";
|
||||
public const string KEY_ColorResourceKey = "ColorResourceKey";
|
||||
|
||||
public static readonly StyledProperty<string?> ResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
|
||||
nameof(ResourceKey));
|
||||
|
||||
public static readonly StyledProperty<string?> ResourceKeyProperty =
|
||||
AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ResourceKey));
|
||||
|
||||
public string? ResourceKey
|
||||
{
|
||||
get => GetValue(ResourceKeyProperty);
|
||||
set => SetValue(ResourceKeyProperty, value);
|
||||
}
|
||||
|
||||
public static readonly StyledProperty<string?> ResourceNameProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
|
||||
nameof(ResourceName));
|
||||
public static readonly StyledProperty<string?> ResourceNameProperty =
|
||||
AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ResourceName));
|
||||
|
||||
public string? ResourceName
|
||||
{
|
||||
@@ -32,8 +31,8 @@ public class ColorDetailControl: TemplatedControl
|
||||
set => SetValue(ResourceNameProperty, value);
|
||||
}
|
||||
|
||||
public static readonly StyledProperty<string?> ColorResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
|
||||
nameof(ColorResourceKey));
|
||||
public static readonly StyledProperty<string?> ColorResourceKeyProperty =
|
||||
AvaloniaProperty.Register<ColorDetailControl, string?>(nameof(ColorResourceKey));
|
||||
|
||||
public string? ColorResourceKey
|
||||
{
|
||||
@@ -41,27 +40,28 @@ public class ColorDetailControl: TemplatedControl
|
||||
set => SetValue(ColorResourceKeyProperty, value);
|
||||
}
|
||||
|
||||
public static readonly DirectProperty<ColorDetailControl, string?> HexProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
|
||||
nameof(Hex), o => o.Hex);
|
||||
public static readonly DirectProperty<ColorDetailControl, string?> HexProperty =
|
||||
AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(Hex), o => o.Hex);
|
||||
|
||||
private string? _hex;
|
||||
|
||||
public string? Hex
|
||||
{
|
||||
get => _hex;
|
||||
private set => SetAndRaise(HexProperty, ref _hex, value);
|
||||
}
|
||||
|
||||
public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
|
||||
nameof(OpacityNumber), o => o.OpacityNumber);
|
||||
|
||||
public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty =
|
||||
AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(OpacityNumber), o => o.OpacityNumber);
|
||||
|
||||
private string? _opacityNumber;
|
||||
|
||||
public string? OpacityNumber
|
||||
{
|
||||
get => _opacityNumber;
|
||||
private set => SetAndRaise(OpacityNumberProperty, ref _opacityNumber, value);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
static ColorDetailControl()
|
||||
{
|
||||
BackgroundProperty.Changed.AddClassHandler<ColorDetailControl>((o, e) => o.OnBackgroundChanged(e));
|
||||
@@ -84,13 +84,17 @@ public class ColorDetailControl: TemplatedControl
|
||||
{
|
||||
switch (s)
|
||||
{
|
||||
case KEY_ResourceKey: text = ResourceKey;
|
||||
case KEY_ResourceKey:
|
||||
text = ResourceKey;
|
||||
break;
|
||||
case KEY_Hex: text = Hex;
|
||||
case KEY_Hex:
|
||||
text = Hex;
|
||||
break;
|
||||
case KEY_Opacity: text = OpacityNumber;
|
||||
case KEY_Opacity:
|
||||
text = OpacityNumber;
|
||||
break;
|
||||
case KEY_ColorResourceKey: text = ColorResourceKey;
|
||||
case KEY_ColorResourceKey:
|
||||
text = ColorResourceKey;
|
||||
break;
|
||||
default: text = string.Empty; break;
|
||||
}
|
||||
@@ -99,9 +103,7 @@ public class ColorDetailControl: TemplatedControl
|
||||
var toplevel = TopLevel.GetTopLevel(this);
|
||||
if (toplevel?.Clipboard is { } c)
|
||||
{
|
||||
await c.SetTextAsync(text??string.Empty);
|
||||
await c.SetTextAsync(text ?? string.Empty);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,25 +1,23 @@
|
||||
<ResourceDictionary
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:controls="using:Semi.Avalonia.Demo.Controls"
|
||||
xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
|
||||
x:CompileBindings="True"
|
||||
x:DataType="viewModels:ColorItemViewModel">
|
||||
xmlns:controls="using:Semi.Avalonia.Demo.Controls">
|
||||
<Design.PreviewWith>
|
||||
<controls:ColorItemControl />
|
||||
</Design.PreviewWith>
|
||||
|
||||
<ControlTheme x:Key="{x:Type controls:ColorItemControl}" TargetType="controls:ColorItemControl">
|
||||
<Setter Property="controls:ColorItemControl.Width" Value="120" />
|
||||
<Setter Property="controls:ColorItemControl.Height" Value="60" />
|
||||
<Setter Property="controls:ColorItemControl.Cursor" Value="Hand" />
|
||||
<Setter Property="controls:ColorItemControl.Template">
|
||||
<Setter Property="Width" Value="120" />
|
||||
<Setter Property="Height" Value="60" />
|
||||
<Setter Property="Cursor" Value="Hand" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="controls:ColorItemControl">
|
||||
<!-- -->
|
||||
<Border
|
||||
Width="{TemplateBinding Width}"
|
||||
Height="{TemplateBinding Height}"
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<Panel>
|
||||
<TextBlock
|
||||
@@ -42,7 +40,7 @@
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
<Style Selector="^:pointerover /template/ TextBlock#PART_HexTextBlock">
|
||||
<Setter Property="TextBlock.IsVisible" Value="True" />
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
</ResourceDictionary>
|
||||
@@ -1,5 +1,4 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Controls.Primitives;
|
||||
using Avalonia.Input;
|
||||
using CommunityToolkit.Mvvm.Messaging;
|
||||
@@ -9,8 +8,8 @@ namespace Semi.Avalonia.Demo.Controls;
|
||||
|
||||
public class ColorItemControl : TemplatedControl
|
||||
{
|
||||
public static readonly StyledProperty<string?> ColorNameProperty = AvaloniaProperty.Register<ColorItemControl, string?>(
|
||||
nameof(ColorName));
|
||||
public static readonly StyledProperty<string?> ColorNameProperty =
|
||||
AvaloniaProperty.Register<ColorItemControl, string?>(nameof(ColorName));
|
||||
|
||||
public string? ColorName
|
||||
{
|
||||
@@ -26,14 +25,18 @@ public class ColorItemControl : TemplatedControl
|
||||
get => GetValue(HexProperty);
|
||||
set => SetValue(HexProperty, value);
|
||||
}
|
||||
|
||||
|
||||
protected override void OnPointerPressed(PointerPressedEventArgs 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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -3,249 +3,318 @@
|
||||
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>
|
||||
<ScrollViewer>
|
||||
<StackPanel Spacing="10">
|
||||
<TextBlock Text="Theme Preview" FontWeight="SemiBold" />
|
||||
<ListBox
|
||||
Theme="{StaticResource PureCardRadioGroupListBox}"
|
||||
ItemsSource="{Binding ThemeVariants}"
|
||||
SelectedItem="{Binding SelectedThemeVariant}">
|
||||
<ListBox.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<StackPanel Orientation="Horizontal" />
|
||||
</ItemsPanelTemplate>
|
||||
</ListBox.ItemsPanel>
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<StackPanel Spacing="5">
|
||||
<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="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>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
</DataGridTemplateColumn.CellTemplate>
|
||||
</DataGridTemplateColumn>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
|
||||
<DataGridTemplateColumn Header="ResourceKey">
|
||||
<DataGridTemplateColumn.CellTemplate>
|
||||
<DataTemplate>
|
||||
<SelectableTextBlock
|
||||
Margin="12 0"
|
||||
VerticalAlignment="Center"
|
||||
Text="{Binding ResourceKey}" />
|
||||
</DataTemplate>
|
||||
</DataGridTemplateColumn.CellTemplate>
|
||||
</DataGridTemplateColumn>
|
||||
<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>
|
||||
|
||||
<DataGridTemplateColumn Header="Description">
|
||||
<DataGridTemplateColumn.CellTemplate>
|
||||
<DataTemplate>
|
||||
<SelectableTextBlock
|
||||
Margin="12 0"
|
||||
VerticalAlignment="Center"
|
||||
Text="{Binding Description}" />
|
||||
</DataTemplate>
|
||||
</DataGridTemplateColumn.CellTemplate>
|
||||
</DataGridTemplateColumn>
|
||||
<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="Pair With">
|
||||
<DataGridTemplateColumn.CellTemplate>
|
||||
<DataTemplate>
|
||||
<SelectableTextBlock
|
||||
Margin="12 0"
|
||||
VerticalAlignment="Center"
|
||||
Text="{Binding PairWith}" />
|
||||
</DataTemplate>
|
||||
</DataGridTemplateColumn.CellTemplate>
|
||||
</DataGridTemplateColumn>
|
||||
</DataGrid.Columns>
|
||||
</DataGrid>
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
<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>
|
||||
@@ -6,12 +6,15 @@ 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; }
|
||||
|
||||
@@ -30,6 +33,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
|
||||
{
|
||||
ResourceKey = "WindowColor",
|
||||
Brush = new SolidColorBrush(Color.Parse("#202020")),
|
||||
Hex = "#FF202020",
|
||||
Description = "Background of pages, panes, popups, and windows.",
|
||||
PairWith = "WindowTextColor"
|
||||
},
|
||||
@@ -37,6 +41,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
|
||||
{
|
||||
ResourceKey = "WindowTextColor",
|
||||
Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
|
||||
Hex = "WHITE",
|
||||
Description = "Headings, body copy, lists, placeholder text, app and window borders.",
|
||||
PairWith = "WindowColor"
|
||||
},
|
||||
@@ -44,6 +49,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
|
||||
{
|
||||
ResourceKey = "HotlightColor",
|
||||
Brush = new SolidColorBrush(Color.Parse("#75E9FC")),
|
||||
Hex = "#FF75E9FC",
|
||||
Description = "Hyperlinks.",
|
||||
PairWith = "WindowColor"
|
||||
},
|
||||
@@ -51,6 +57,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
|
||||
{
|
||||
ResourceKey = "GrayTextColor",
|
||||
Brush = new SolidColorBrush(Color.Parse("#A6A6A6")),
|
||||
Hex = "#FFA6A6A6",
|
||||
Description = "Inactive (disabled) UI.",
|
||||
PairWith = "WindowColor"
|
||||
},
|
||||
@@ -58,6 +65,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
|
||||
{
|
||||
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"
|
||||
@@ -66,6 +74,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
|
||||
{
|
||||
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"
|
||||
@@ -74,6 +83,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
|
||||
{
|
||||
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"
|
||||
},
|
||||
@@ -81,10 +91,13 @@ public partial class HighContrastDemoViewModel : ObservableObject
|
||||
{
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -98,6 +111,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
|
||||
if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true && o is Color 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 SolidColorBrush? _brush;
|
||||
[ObservableProperty] private string? _hex;
|
||||
[ObservableProperty] private string? _description;
|
||||
[ObservableProperty] private string? _pairWith;
|
||||
}
|
||||
Reference in New Issue
Block a user
