zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add color preview control.

Browse Source
This commit is contained in:
rabbitism 2023-02-13 00:14:56 +08:00
parent 888d115ca8
commit bf87bfeb90
6 changed files with 274 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.axaml Normal file
View File

@ -0,0 +1,109 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls">
<PathGeometry 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</PathGeometry>
<ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl">
<!-- Add Resources Here -->
<Setter Property="controls:ColorDetailControl.Template">
<ControlTemplate TargetType="controls:ColorDetailControl">
<StackPanel>
<TextBlock
Margin="0,0,0,8"
Classes="H5"
Text="{TemplateBinding ResourceName}"
Theme="{DynamicResource TitleTextBlock}" />
<Border
Height="100"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}"
CornerRadius="6" />
<Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *">
<!-- Row 0-1 ResourceKey -->
<TextBlock
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="4,8,0,0"
VerticalAlignment="Center"
Classes="Tertiary"
Text="ResourceKey" />
<SelectableTextBlock
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Center"
Text="{TemplateBinding ResourceKey}" />
<Button
Grid.Row="1"
Grid.Column="1"
Classes="Tertiary"
Command="{Binding $parent[controls:ColorDetailControl].Copy}"
CommandParameter="{x:Static controls:ColorDetailControl.KEY_ResourceKey}"
Theme="{DynamicResource BorderlessButton}">
<PathIcon
Width="12"
Height="12"
Data="{StaticResource CopyIcon}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
<!-- Row 2-3 HEX -->
<TextBlock
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="4,8,0,0"
VerticalAlignment="Center"
Classes="Tertiary"
Text="ARGB" />
<SelectableTextBlock
Grid.Row="3"
Grid.Column="0"
VerticalAlignment="Center"
Text="{TemplateBinding Hex}" />
<Button
Grid.Row="3"
Grid.Column="1"
Classes="Tertiary"
Command="{Binding $parent[controls:ColorDetailControl].Copy}"
CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex}"
Theme="{DynamicResource BorderlessButton}">
<PathIcon
Width="12"
Height="12"
Data="{StaticResource CopyIcon}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
<!-- Row 4-5 Opacity -->
<TextBlock
Grid.Row="4"
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="4,8,0,0"
VerticalAlignment="Center"
Classes="Tertiary"
Text="Opacity" />
<SelectableTextBlock
Grid.Row="5"
Grid.Column="0"
VerticalAlignment="Center"
Text="{TemplateBinding OpacityNumber}" />
<Button
Grid.Row="5"
Grid.Column="1"
Classes="Tertiary"
Command="{Binding $parent[controls:ColorDetailControl].Copy}"
CommandParameter="{x:Static controls:ColorDetailControl.KEY_Opacity}"
Theme="{DynamicResource BorderlessButton}">
<PathIcon
Width="12"
Height="12"
Data="{StaticResource CopyIcon}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

91
demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs Normal file
View File

@ -0,0 +1,91 @@
using System.Globalization;
using Avalonia;
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 const string KEY_ResourceKey = "ResourceKey";
public const string KEY_Hex = "Hex";
public const string KEY_Opacity = "Opacity";
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 string? ResourceName
{
get => GetValue(ResourceNameProperty);
set => SetValue(ResourceNameProperty, value);
}
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);
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));
}
private void OnBackgroundChanged(AvaloniaPropertyChangedEventArgs args)
{
var color = args.GetNewValue<IBrush>();
if (color is ISolidColorBrush b)
{
Hex = b.Color.ToString().ToUpperInvariant();
OpacityNumber = b.Opacity.ToString(CultureInfo.InvariantCulture);
}
}
public async void Copy(object o)
{
string? text = null;
if (o is string s)
{
switch (s)
{
case KEY_ResourceKey: text = ResourceKey;
break;
case KEY_Hex: text = Hex;
break;
case KEY_Opacity: text = OpacityNumber;
break;
default: text = string.Empty; break;
}
}
if (Application.Current is { Clipboard: { } c })
{
await c.SetTextAsync(text??string.Empty);
}
}
}

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

@ -27,7 +27,7 @@
Name="PART_HexTextBlock"
Padding="8"
VerticalAlignment="Bottom"
FontSize="8"
FontSize="10"
Foreground="{TemplateBinding Foreground}"
IsVisible="False"
Opacity="0.8"

37
demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
View File

@ -16,6 +16,7 @@
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="../Controls/ColorItemControl.axaml" />
<ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
@ -31,6 +32,7 @@
<ToggleButton
Name="toggle"
HorizontalAlignment="Right"
IsChecked="True"
Theme="{DynamicResource BorderlessToggleButton}">
<PathIcon
Width="16"
@ -38,39 +40,34 @@
Data="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z" />
</ToggleButton>
<Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
<StackPanel DataContext="{Binding SelectedColor}" Spacing="8">
<Border
Height="30"
HorizontalAlignment="Stretch"
Background="{Binding Color}"
CornerRadius="3" />
<Label Classes="Code" Content="{Binding ResourceKey}" />
<TextBlock Text="{Binding Color}" />
</StackPanel>
<controls:ColorDetailControl
Background="{Binding SelectedColor.Brush}"
IsVisible="{Binding SelectedColor, Converter={x:Static ObjectConverters.IsNotNull}}"
ResourceKey="{Binding SelectedColor.ResourceKey}"
ResourceName="{Binding SelectedColor.ColorDisplayName}" />
</Border>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<ScrollViewer>
<StackPanel>
<TabControl>
<TabItem Header="Light">
<ItemsControl Margin="16" Items="{Binding LightSeries}">
<ItemsControl Margin="16" Items="{Binding LightLists}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorSeries">
<DataTemplate x:DataType="viewModels:ColorListViewModel">
<ItemsControl Margin="4,0" Items="{Binding Color}">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorItemViewModel">
<controls:ColorItemControl
Background="{Binding Color}"
ColorName="{Binding Name}"
Foreground="{Binding TextColor}"
Background="{Binding Brush}"
ColorName="{Binding ColorDisplayName}"
Foreground="{Binding TextBrush}"
Hex="{Binding Hex}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
@ -80,21 +77,21 @@
</ItemsControl>
</TabItem>
<TabItem Header="Dark">
<ItemsControl Margin="16" Items="{Binding DarkSeries}">
<ItemsControl Margin="16" Items="{Binding DarkLists}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorSeries">
<DataTemplate x:DataType="viewModels:ColorListViewModel">
<ItemsControl Margin="4,0" Items="{Binding Color}">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorItemViewModel">
<controls:ColorItemControl
Background="{Binding Color}"
ColorName="{Binding Name}"
Foreground="{Binding TextColor}"
Background="{Binding Brush}"
ColorName="{Binding ColorDisplayName}"
Foreground="{Binding TextBrush}"
Hex="{Binding Hex}" />
</DataTemplate>
</ItemsControl.ItemTemplate>

104
demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
View File

@ -10,9 +10,10 @@ namespace Semi.Avalonia.Demo.ViewModels;
public class PaletteDemoViewModel: ObservableObject
{
private string[] _colors = { "Amber","Blue","Cyan","Green","Grey","Indigo","LightBlue","LightGreen","Lime","Orange","Pink","Purple","Red","Teal","Violet","Yellow" };
private ObservableCollection<ColorSeries> _lightSeries;
private readonly string[] _predefinedColorNames = { "Amber","Blue","Cyan","Green","Grey","Indigo","LightBlue","LightGreen","Lime","Orange","Pink","Purple","Red","Teal","Violet","Yellow" };
private IResourceDictionary _lightResourceDictionary;
private IResourceDictionary _darkResourceDictionary;
private ColorItemViewModel _selectedColor;
public ColorItemViewModel SelectedColor
@ -20,49 +21,54 @@ public class PaletteDemoViewModel: ObservableObject
get => _selectedColor;
set => SetProperty(ref _selectedColor, value);
}
public ObservableCollection<ColorSeries> LightSeries
{
get => _lightSeries;
set => SetProperty(ref _lightSeries, value);
}
private ObservableCollection<ColorSeries> _darkSeries;
public ObservableCollection<ColorSeries> DarkSeries
private ObservableCollection<ColorListViewModel> _lightLists;
public ObservableCollection<ColorListViewModel> LightLists
{
get => _darkSeries;
set => SetProperty(ref _darkSeries, value);
get => _lightLists;
set => SetProperty(ref _lightLists, value);
}
private ObservableCollection<ColorListViewModel> _darkLists;
public ObservableCollection<ColorListViewModel> DarkLists
{
get => _darkLists;
set => SetProperty(ref _darkLists, value);
}
public PaletteDemoViewModel()
{
LightSeries = new ObservableCollection<ColorSeries>();
var lightResourceDictionary = (ResourceDictionary)(AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml")));
foreach (var color in _colors)
{
ColorSeries s = new ColorSeries();
s.Initialize(lightResourceDictionary, color, true);
LightSeries.Add(s);
}
DarkSeries = new ObservableCollection<ColorSeries>();
var darkResouceDictionary = (ResourceDictionary)(AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Dark/Palette.axaml")));
foreach (var color in _colors)
{
ColorSeries s = new ColorSeries();
s.Initialize(darkResouceDictionary, color, false);
DarkSeries.Add(s);
}
_lightResourceDictionary = (ResourceDictionary)AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml"));
_darkResourceDictionary = (ResourceDictionary)AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Dark/Palette.axaml"));
InitializePalette();
WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
}
private void InitializePalette()
{
LightLists = new ObservableCollection<ColorListViewModel>();
foreach (var color in _predefinedColorNames)
{
ColorListViewModel s = new ColorListViewModel();
s.Initialize(_lightResourceDictionary, color, true);
LightLists.Add(s);
}
DarkLists = new ObservableCollection<ColorListViewModel>();
foreach (var color in _predefinedColorNames)
{
ColorListViewModel s = new ColorListViewModel();
s.Initialize(_darkResourceDictionary, color, false);
DarkLists.Add(s);
}
}
private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
{
SelectedColor = item;
}
}
public class ColorSeries: ObservableObject
public class ColorListViewModel: ObservableObject
{
private ObservableCollection<ColorItemViewModel>? _colors;
@ -104,25 +110,25 @@ public class ColorSeries: ObservableObject
public class ColorItemViewModel : ObservableObject
{
private IBrush _color;
public IBrush Color
private IBrush _brush;
public IBrush Brush
{
get => _color;
set => SetProperty(ref _color, value);
get => _brush;
set => SetProperty(ref _brush, value);
}
private IBrush _textColor;
public IBrush TextColor
private IBrush _textBrush;
public IBrush TextBrush
{
get => _textColor;
set => SetProperty(ref _textColor, value);
get => _textBrush;
set => SetProperty(ref _textBrush, value);
}
private string _name;
public string Name
private string _colorDisplayName;
public string ColorDisplayName
{
get => _name;
set => SetProperty(ref _name, value);
get => _colorDisplayName;
set => SetProperty(ref _colorDisplayName, value);
}
private string _resourceKey;
@ -141,19 +147,19 @@ public class ColorItemViewModel : ObservableObject
set => SetProperty(ref _hex, value);
}
public ColorItemViewModel(string name, IBrush color, string resourceKey, bool light, int index)
public ColorItemViewModel(string colorDisplayName, IBrush brush, string resourceKey, bool light, int index)
{
Name = name;
Color = color;
ColorDisplayName = colorDisplayName;
Brush = brush;
ResourceKey = resourceKey;
Hex = color.ToString().ToUpperInvariant();
Hex = brush.ToString().ToUpperInvariant();
if ((light && index < 5) || (!light && index > 5))
{
TextColor = Brushes.Black;
TextBrush = Brushes.Black;
}
else
{
TextColor = Brushes.White;
TextBrush = Brushes.White;
}
}
}

2
src/Semi.Avalonia/Themes/Dark/SplitView.axaml
View File

@ -9,5 +9,5 @@
<sys:TimeSpan x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</sys:TimeSpan>
<Easing x:Key="SplitViewPaneAnimationEasing">0.1,0.9,0.2,1.0</Easing>
<SolidColorBrush x:Key="SplitViewSeparatorBackground" Opacity="0.08" Color="#F9F9F9" />
<SolidColorBrush x:Key="SplitViewPaneBackground" Color="Black" />
<SolidColorBrush x:Key="SplitViewPaneBackground" Color="#16161A" />
</ResourceDictionary>