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

feat: add color group control.

Browse Source
This commit is contained in:
rabbitism
2023-02-13 02:17:38 +08:00
parent 235865c925
commit b06e7c6443
7 changed files with 294 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,7 +15,8 @@
<Border
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}">
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}">
<Panel>
<TextBlock
Padding="8"

89
demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml Normal file
View File

@@ -0,0 +1,89 @@
<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">
<!-- Add Resources Here -->
<ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
<!-- Add Resources Here -->
<Setter Property="controls:FunctionalColorGroupControl.Template">
<ControlTemplate x:DataType="viewModels:FunctionalColorGroupViewModel" TargetType="controls:FunctionalColorGroupControl">
<Grid RowDefinitions="Auto, *">
<TextBlock
Grid.Row="0"
Margin="0,16,0,0"
Classes="H3"
Text="{TemplateBinding Title}"
Theme="{DynamicResource TitleTextBlock}" />
<TabControl Grid.Row="1">
<TabItem Header="Light">
<DataGrid IsReadOnly="True" Items="{TemplateBinding LightColors}">
<DataGrid.Columns>
<DataGridTemplateColumn Header="ResourceKey">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<SelectableTextBlock VerticalAlignment="Center" Text="{Binding ResourceKey}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn
Binding="{Binding ColorDisplayName}"
CanUserSort="False"
Header="Name" />
<DataGridTemplateColumn Header="Color">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<controls:ColorItemControl
Width="40"
Height="20"
Background="{Binding Brush}"
CornerRadius="3" />
<SelectableTextBlock
Margin="8,0,0,0"
VerticalAlignment="Center"
Text="{Binding Hex}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</TabItem>
<TabItem Header="Dark">
<DataGrid IsReadOnly="True" Items="{TemplateBinding DarkColors}">
<DataGrid.Columns>
<DataGridTemplateColumn Header="ResourceKey">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<SelectableTextBlock VerticalAlignment="Center" Text="{Binding ResourceKey}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Binding="{Binding ColorDisplayName}" Header="Name" />
<DataGridTemplateColumn Header="Color">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<controls:ColorItemControl
Width="40"
Height="20"
Background="{Binding Brush}"
CornerRadius="3" />
<SelectableTextBlock
Margin="8,0,0,0"
VerticalAlignment="Center"
Text="{Binding Hex}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</TabItem>
</TabControl>
</Grid>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

38
demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.cs Normal file
View File

@@ -0,0 +1,38 @@
using System.Collections;
using Avalonia;
using Avalonia.Controls.Primitives;
namespace Semi.Avalonia.Demo.Controls;
public class FunctionalColorGroupControl: TemplatedControl
{
public static readonly StyledProperty<string?> TitleProperty = AvaloniaProperty.Register<FunctionalColorGroupControl, string?>(
nameof(Title));
public string? Title
{
get => GetValue(TitleProperty);
set => SetValue(TitleProperty, value);
}
public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable> LightColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable>(
nameof(LightColors), o => o.LightColors, (o, v) => o.LightColors = v);
private IEnumerable _lightColors;
public IEnumerable LightColors
{
get => _lightColors;
set => SetAndRaise(LightColorsProperty, ref _lightColors, value);
}
public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable> DarkColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable>(
nameof(DarkColors), o => o.DarkColors, (o, v) => o.DarkColors = v);
private IEnumerable _darkColors;
public IEnumerable DarkColors
{
get => _darkColors;
set => SetAndRaise(DarkColorsProperty, ref _darkColors, value);
}
}

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

@@ -17,6 +17,7 @@
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="../Controls/ColorItemControl.axaml" />
<ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
<ResourceInclude Source="../Controls/FunctionalColorGroupControl.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
@@ -51,6 +52,10 @@
<SplitView.Content>
<ScrollViewer>
<StackPanel>
<TextBlock
Classes="H3"
Text="Basic Colors"
Theme="{DynamicResource TitleTextBlock}" />
<TabControl>
<TabItem Header="Light">
<ItemsControl Margin="16" Items="{Binding LightLists}">
@@ -101,6 +106,18 @@
</ItemsControl>
</TabItem>
</TabControl>
<ItemsControl Items="{Binding FunctionalColors}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- -->
<controls:FunctionalColorGroupControl
Title="{Binding Title}"
DarkColors="{Binding DarkColors}"
LightColors="{Binding LightColors}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
</SplitView.Content>

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

@@ -1,4 +1,5 @@
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
@@ -36,11 +37,14 @@ public class PaletteDemoViewModel: ObservableObject
set => SetProperty(ref _darkLists, value);
}
public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = new();
public PaletteDemoViewModel()
{
_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();
InitializeFunctionalColors();
WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
}
@@ -62,6 +66,10 @@ public class PaletteDemoViewModel: ObservableObject
}
}
private void InitializeFunctionalColors()
{
FunctionalColors.Add(new FunctionalColorGroupViewModel("Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens));
}
private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
{
SelectedColor = item;
@@ -96,7 +104,7 @@ public class ColorListViewModel: ObservableObject
var key = "Semi" + color + i;
if (resourceDictionary.TryGetValue(key, out var value))
{
if (value is SolidColorBrush brush)
if (value is ISolidColorBrush brush)
{
string name = color + " " + i;
var item = new ColorItemViewModel(name, brush, key, light, i);
@@ -147,7 +155,7 @@ public class ColorItemViewModel : ObservableObject
set => SetProperty(ref _hex, value);
}
public ColorItemViewModel(string colorDisplayName, IBrush brush, string resourceKey, bool light, int index)
public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light, int index)
{
ColorDisplayName = colorDisplayName;
Brush = brush;
@@ -162,4 +170,55 @@ public class ColorItemViewModel : ObservableObject
TextBrush = Brushes.White;
}
}
}
public class FunctionalColorGroupViewModel : ObservableObject
{
private string _title;
public string Title
{
get => _title;
set => SetProperty(ref _title, value);
}
public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = new();
public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = new();
public FunctionalColorGroupViewModel(string title, IResourceDictionary lightDictionary, IResourceDictionary darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
{
Title = title;
foreach (var token in tokens)
{
string key = token.Item1;
string name = token.Item2;
if (lightDictionary.TryGetValue(key, out var lightValue))
{
if (lightValue is ISolidColorBrush lightBrush)
{
LightColors.Add(new ColorItemViewModel(name, lightBrush, key, true, 0));
}
}
if (darkDictionary.TryGetValue(key, out var darkValue))
{
if (darkValue is ISolidColorBrush darkBrush)
{
DarkColors.Add(new ColorItemViewModel(name, darkBrush, key, true, 0));
}
}
}
}
}
public static class ColorTokens
{
public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
{
new ("SemiColorPrimary", "Primary"),
new ("SemiColorPrimaryPointerover", "Primary Pointerover"),
new ("SemiColorPrimaryPressed", "Primary Pressed"),
new ("SemiColorPrimaryDisabled", "Primary Disabled"),
new ("SemiColorPrimaryLight", "Primary Light"),
new ("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
new ("SemiColorPrimaryLightActive", "Primary Light Active"),
};
}