feat: Add ColorItemControl and color detail preview.
This commit is contained in:
parent
7fd45c7342
commit
888d115ca8
43
demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml
Normal file
43
demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml
Normal file
@ -0,0 +1,43 @@
|
||||
<ResourceDictionary
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
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.Template">
|
||||
<ControlTemplate TargetType="controls:ColorItemControl">
|
||||
<!-- -->
|
||||
<Border
|
||||
Width="{TemplateBinding Width}"
|
||||
Height="{TemplateBinding Height}"
|
||||
Background="{TemplateBinding Background}">
|
||||
<Panel>
|
||||
<TextBlock
|
||||
Padding="8"
|
||||
FontSize="12"
|
||||
FontWeight="600"
|
||||
Foreground="{TemplateBinding Foreground}"
|
||||
Text="{TemplateBinding ColorName}" />
|
||||
<TextBlock
|
||||
Name="PART_HexTextBlock"
|
||||
Padding="8"
|
||||
VerticalAlignment="Bottom"
|
||||
FontSize="8"
|
||||
Foreground="{TemplateBinding Foreground}"
|
||||
IsVisible="False"
|
||||
Opacity="0.8"
|
||||
Text="{TemplateBinding Hex}" />
|
||||
</Panel>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
<Style Selector="^:pointerover /template/ TextBlock#PART_HexTextBlock">
|
||||
<Setter Property="TextBlock.IsVisible" Value="True" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
39
demo/Semi.Avalonia.Demo/Controls/ColorItemControl.cs
Normal file
39
demo/Semi.Avalonia.Demo/Controls/ColorItemControl.cs
Normal file
@ -0,0 +1,39 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Controls.Primitives;
|
||||
using Avalonia.Input;
|
||||
using CommunityToolkit.Mvvm.Messaging;
|
||||
using Semi.Avalonia.Demo.ViewModels;
|
||||
|
||||
namespace Semi.Avalonia.Demo.Controls;
|
||||
|
||||
public class ColorItemControl : TemplatedControl
|
||||
{
|
||||
public static readonly StyledProperty<string?> ColorNameProperty = AvaloniaProperty.Register<ColorItemControl, string?>(
|
||||
nameof(ColorName));
|
||||
|
||||
public string? ColorName
|
||||
{
|
||||
get => GetValue(ColorNameProperty);
|
||||
set => SetValue(ColorNameProperty, value);
|
||||
}
|
||||
|
||||
public static readonly StyledProperty<string?> HexProperty = AvaloniaProperty.Register<ColorItemControl, string?>(
|
||||
nameof(Hex));
|
||||
|
||||
public string? Hex
|
||||
{
|
||||
get => GetValue(HexProperty);
|
||||
set => SetValue(HexProperty, value);
|
||||
}
|
||||
|
||||
protected override void OnPointerPressed(PointerPressedEventArgs e)
|
||||
{
|
||||
base.OnPointerPressed(e);
|
||||
if (this.DataContext is ColorItemViewModel v)
|
||||
{
|
||||
WeakReferenceMessenger.Default.Send(v);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
@ -2,6 +2,7 @@
|
||||
x:Class="Semi.Avalonia.Demo.Pages.PaletteDemo"
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
|
||||
@ -11,6 +12,13 @@
|
||||
<Design.DataContext>
|
||||
<viewModels:PaletteDemoViewModel />
|
||||
</Design.DataContext>
|
||||
<UserControl.Resources>
|
||||
<ResourceDictionary>
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<ResourceInclude Source="../Controls/ColorItemControl.axaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</ResourceDictionary>
|
||||
</UserControl.Resources>
|
||||
<SplitView
|
||||
Name="splitView"
|
||||
CompactPaneLength="50"
|
||||
@ -30,9 +38,14 @@
|
||||
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>
|
||||
|
||||
<TextBlock Text="Hello" />
|
||||
<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>
|
||||
</Border>
|
||||
</StackPanel>
|
||||
@ -41,29 +54,56 @@
|
||||
<SplitView.Content>
|
||||
<ScrollViewer>
|
||||
<StackPanel>
|
||||
<ItemsControl Items="{Binding Series}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate x:DataType="viewModels:ColorSeries">
|
||||
<DockPanel>
|
||||
<TextBlock DockPanel.Dock="Top" Text=" " />
|
||||
<ItemsControl Items="{Binding Color}">
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<UniformGrid Columns="10" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate x:DataType="viewModels:ColorItemViewModel">
|
||||
<Border Height="60" Background="{Binding Color}">
|
||||
<TextBlock VerticalAlignment="Center" Text="{Binding Name}" />
|
||||
</Border>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</DockPanel>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
<TabControl>
|
||||
<TabItem Header="Light">
|
||||
<ItemsControl Margin="16" Items="{Binding LightSeries}">
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<WrapPanel Orientation="Horizontal" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate x:DataType="viewModels:ColorSeries">
|
||||
<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}"
|
||||
Hex="{Binding Hex}" />
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</TabItem>
|
||||
<TabItem Header="Dark">
|
||||
<ItemsControl Margin="16" Items="{Binding DarkSeries}">
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<WrapPanel Orientation="Horizontal" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate x:DataType="viewModels:ColorSeries">
|
||||
<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}"
|
||||
Hex="{Binding Hex}" />
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</TabItem>
|
||||
</TabControl>
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
</SplitView.Content>
|
||||
|
@ -47,8 +47,4 @@
|
||||
<ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj" />
|
||||
<ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Folder Include="Controls" />
|
||||
</ItemGroup>
|
||||
</Project>
|
||||
|
@ -4,30 +4,61 @@ using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using Avalonia.Media;
|
||||
using CommunityToolkit.Mvvm.ComponentModel;
|
||||
using CommunityToolkit.Mvvm.Messaging;
|
||||
|
||||
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> _series;
|
||||
private ObservableCollection<ColorSeries> _lightSeries;
|
||||
|
||||
public ObservableCollection<ColorSeries> Series
|
||||
private ColorItemViewModel _selectedColor;
|
||||
|
||||
public ColorItemViewModel SelectedColor
|
||||
{
|
||||
get => _series;
|
||||
set => SetProperty(ref _series, value);
|
||||
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
|
||||
{
|
||||
get => _darkSeries;
|
||||
set => SetProperty(ref _darkSeries, value);
|
||||
}
|
||||
|
||||
public PaletteDemoViewModel()
|
||||
{
|
||||
Series = new ObservableCollection<ColorSeries>();
|
||||
var resouceDictionary = (ResourceDictionary)(AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml")));
|
||||
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(resouceDictionary, color);
|
||||
Series.Add(s);
|
||||
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);
|
||||
}
|
||||
WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
|
||||
}
|
||||
|
||||
private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
|
||||
{
|
||||
SelectedColor = item;
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,7 +80,7 @@ public class ColorSeries: ObservableObject
|
||||
set => SetProperty(ref _seriesName, value);
|
||||
}
|
||||
|
||||
internal void Initialize(IResourceDictionary resourceDictionary, string color)
|
||||
internal void Initialize(IResourceDictionary resourceDictionary, string color, bool light)
|
||||
{
|
||||
SeriesName = color;
|
||||
Color = new ObservableCollection<ColorItemViewModel>();
|
||||
@ -62,7 +93,7 @@ public class ColorSeries: ObservableObject
|
||||
if (value is SolidColorBrush brush)
|
||||
{
|
||||
string name = color + " " + i;
|
||||
var item = new ColorItemViewModel(name, brush, key);
|
||||
var item = new ColorItemViewModel(name, brush, key, light, i);
|
||||
Color.Add(item);
|
||||
}
|
||||
}
|
||||
@ -79,6 +110,13 @@ public class ColorItemViewModel : ObservableObject
|
||||
get => _color;
|
||||
set => SetProperty(ref _color, value);
|
||||
}
|
||||
|
||||
private IBrush _textColor;
|
||||
public IBrush TextColor
|
||||
{
|
||||
get => _textColor;
|
||||
set => SetProperty(ref _textColor, value);
|
||||
}
|
||||
|
||||
private string _name;
|
||||
public string Name
|
||||
@ -94,11 +132,28 @@ public class ColorItemViewModel : ObservableObject
|
||||
get => _resourceKey;
|
||||
set => SetProperty(ref _resourceKey, value);
|
||||
}
|
||||
|
||||
private string _hex;
|
||||
|
||||
public string Hex
|
||||
{
|
||||
get => _hex;
|
||||
set => SetProperty(ref _hex, value);
|
||||
}
|
||||
|
||||
public ColorItemViewModel(string name, IBrush color, string resourceKey)
|
||||
public ColorItemViewModel(string name, IBrush color, string resourceKey, bool light, int index)
|
||||
{
|
||||
Name = name;
|
||||
Color = color;
|
||||
ResourceKey = resourceKey;
|
||||
Hex = color.ToString().ToUpperInvariant();
|
||||
if ((light && index < 5) || (!light && index > 5))
|
||||
{
|
||||
TextColor = Brushes.Black;
|
||||
}
|
||||
else
|
||||
{
|
||||
TextColor = Brushes.White;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user