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

feat: Add ColorItemControl and color detail preview.

Browse Source
This commit is contained in:
rabbitism 2023-02-12 00:56:45 +08:00
parent 7fd45c7342
commit 888d115ca8
5 changed files with 214 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml Normal file
View 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
View 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);
}
}
}

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

@ -2,6 +2,7 @@
x:Class="Semi.Avalonia.Demo.Pages.PaletteDemo" x:Class="Semi.Avalonia.Demo.Pages.PaletteDemo"
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: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:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels" xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
@ -11,6 +12,13 @@
<Design.DataContext> <Design.DataContext>
<viewModels:PaletteDemoViewModel /> <viewModels:PaletteDemoViewModel />
</Design.DataContext> </Design.DataContext>
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="../Controls/ColorItemControl.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<SplitView <SplitView
Name="splitView" Name="splitView"
CompactPaneLength="50" 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" /> 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> </ToggleButton>
<Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}"> <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
<StackPanel> <StackPanel DataContext="{Binding SelectedColor}" Spacing="8">
<Border
<TextBlock Text="Hello" /> Height="30"
HorizontalAlignment="Stretch"
Background="{Binding Color}"
CornerRadius="3" />
<Label Classes="Code" Content="{Binding ResourceKey}" />
<TextBlock Text="{Binding Color}" />
</StackPanel> </StackPanel>
</Border> </Border>
</StackPanel> </StackPanel>
@ -41,29 +54,56 @@
<SplitView.Content> <SplitView.Content>
<ScrollViewer> <ScrollViewer>
<StackPanel> <StackPanel>
<ItemsControl Items="{Binding Series}"> <TabControl>
<ItemsControl.ItemTemplate> <TabItem Header="Light">
<DataTemplate x:DataType="viewModels:ColorSeries"> <ItemsControl Margin="16" Items="{Binding LightSeries}">
<DockPanel> <ItemsControl.ItemsPanel>
<TextBlock DockPanel.Dock="Top" Text=" " /> <ItemsPanelTemplate>
<ItemsControl Items="{Binding Color}"> <WrapPanel Orientation="Horizontal" />
<ItemsControl.ItemsPanel> </ItemsPanelTemplate>
<ItemsPanelTemplate> </ItemsControl.ItemsPanel>
<UniformGrid Columns="10" /> <ItemsControl.ItemTemplate>
</ItemsPanelTemplate> <DataTemplate x:DataType="viewModels:ColorSeries">
</ItemsControl.ItemsPanel> <ItemsControl Margin="4,0" Items="{Binding Color}">
<ItemsControl.ItemTemplate> <ItemsControl.ItemTemplate>
<DataTemplate x:DataType="viewModels:ColorItemViewModel"> <DataTemplate x:DataType="viewModels:ColorItemViewModel">
<Border Height="60" Background="{Binding Color}"> <controls:ColorItemControl
<TextBlock VerticalAlignment="Center" Text="{Binding Name}" /> Background="{Binding Color}"
</Border> ColorName="{Binding Name}"
</DataTemplate> Foreground="{Binding TextColor}"
</ItemsControl.ItemTemplate> Hex="{Binding Hex}" />
</ItemsControl> </DataTemplate>
</DockPanel> </ItemsControl.ItemTemplate>
</DataTemplate> </ItemsControl>
</ItemsControl.ItemTemplate> </DataTemplate>
</ItemsControl> </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> </StackPanel>
</ScrollViewer> </ScrollViewer>
</SplitView.Content> </SplitView.Content>

4
demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
View File

@ -47,8 +47,4 @@
<ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj" /> <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj" />
<ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" /> <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<Folder Include="Controls" />
</ItemGroup>
</Project> </Project>

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

@ -4,30 +4,61 @@ using Avalonia.Controls;
using Avalonia.Markup.Xaml; using Avalonia.Markup.Xaml;
using Avalonia.Media; using Avalonia.Media;
using CommunityToolkit.Mvvm.ComponentModel; using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Messaging;
namespace Semi.Avalonia.Demo.ViewModels; namespace Semi.Avalonia.Demo.ViewModels;
public class PaletteDemoViewModel: ObservableObject public class PaletteDemoViewModel: ObservableObject
{ {
private string[] _colors = { "Amber","Blue","Cyan","Green","Grey","Indigo","LightBlue","LightGreen","Lime","Orange","Pink","Purple","Red","Teal","Violet","Yellow" }; 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; get => _selectedColor;
set => SetProperty(ref _series, value); 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() public PaletteDemoViewModel()
{ {
Series = new ObservableCollection<ColorSeries>(); LightSeries = new ObservableCollection<ColorSeries>();
var resouceDictionary = (ResourceDictionary)(AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml"))); var lightResourceDictionary = (ResourceDictionary)(AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml")));
foreach (var color in _colors) foreach (var color in _colors)
{ {
ColorSeries s = new ColorSeries(); ColorSeries s = new ColorSeries();
s.Initialize(resouceDictionary, color); s.Initialize(lightResourceDictionary, color, true);
Series.Add(s); 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); set => SetProperty(ref _seriesName, value);
} }
internal void Initialize(IResourceDictionary resourceDictionary, string color) internal void Initialize(IResourceDictionary resourceDictionary, string color, bool light)
{ {
SeriesName = color; SeriesName = color;
Color = new ObservableCollection<ColorItemViewModel>(); Color = new ObservableCollection<ColorItemViewModel>();
@ -62,7 +93,7 @@ public class ColorSeries: ObservableObject
if (value is SolidColorBrush brush) if (value is SolidColorBrush brush)
{ {
string name = color + " " + i; string name = color + " " + i;
var item = new ColorItemViewModel(name, brush, key); var item = new ColorItemViewModel(name, brush, key, light, i);
Color.Add(item); Color.Add(item);
} }
} }
@ -79,6 +110,13 @@ public class ColorItemViewModel : ObservableObject
get => _color; get => _color;
set => SetProperty(ref _color, value); set => SetProperty(ref _color, value);
} }
private IBrush _textColor;
public IBrush TextColor
{
get => _textColor;
set => SetProperty(ref _textColor, value);
}
private string _name; private string _name;
public string Name public string Name
@ -94,11 +132,28 @@ public class ColorItemViewModel : ObservableObject
get => _resourceKey; get => _resourceKey;
set => SetProperty(ref _resourceKey, value); 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; Name = name;
Color = color; Color = color;
ResourceKey = resourceKey; ResourceKey = resourceKey;
Hex = color.ToString().ToUpperInvariant();
if ((light && index < 5) || (!light && index > 5))
{
TextColor = Brushes.Black;
}
else
{
TextColor = Brushes.White;
}
} }
} }