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

feat: add Shadow part to PaletteDemo.

Browse Source 
(cherry picked from commit 8484d6ad868fd3a23cb695675e1c1da890a9d44f)
This commit is contained in:
Zhang Dian 2024-11-15 02:20:32 +08:00
parent ebdb0b1b93
commit d039440008
5 changed files with 234 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml
View File

@ -5,18 +5,16 @@
xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
x:CompileBindings="True"
x:DataType="viewModels:FunctionalColorGroupViewModel">
<!-- 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">
<Setter Property="Template">
<ControlTemplate TargetType="controls:FunctionalColorGroupControl">
<Grid RowDefinitions="Auto, *">
<TextBlock
<SelectableTextBlock
Grid.Row="0"
Margin="0,16,0,0"
Classes="H3"
Text="{TemplateBinding Title}"
Theme="{DynamicResource TitleTextBlock}" />
Theme="{DynamicResource TitleSelectableTextBlock}" />
<TabControl Grid.Row="1">
<TabItem Header="Light">
<DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightColors}">

88
demo/Semi.Avalonia.Demo/Controls/ShadowGroupControl.axaml Normal file
View File

@ -0,0 +1,88 @@
<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:ShadowGroupViewModel">
<ControlTheme x:Key="{x:Type controls:ShadowGroupControl}" TargetType="controls:ShadowGroupControl">
<Setter Property="Template">
<ControlTemplate TargetType="controls:ShadowGroupControl">
<Grid RowDefinitions="Auto, *">
<SelectableTextBlock
Grid.Row="0"
Margin="0,16,0,0"
Classes="H3"
Text="{TemplateBinding Title}"
Theme="{DynamicResource TitleSelectableTextBlock}" />
<TabControl Grid.Row="1">
<TabItem Header="Light">
<DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightShadows}">
<DataGrid.Columns>
<DataGridTemplateColumn Width="*" Header="ResourceKey">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="viewModels:ShadowItemViewModel">
<SelectableTextBlock
Margin="12,0,12,0"
VerticalAlignment="Center"
Text="{Binding ResourceKey}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn
Width="*"
x:DataType="viewModels:ShadowItemViewModel"
Binding="{Binding ShadowDisplayName}"
CanUserSort="False"
Header="Name" />
<DataGridTemplateColumn Width="300" Header="BoxShadows">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="viewModels:ShadowItemViewModel">
<SelectableTextBlock
Margin="12,0,12,0"
VerticalAlignment="Center"
Text="{Binding BoxShadowValue}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</TabItem>
<TabItem Header="Dark">
<DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkShadows}">
<DataGrid.Columns>
<DataGridTemplateColumn Width="*" Header="ResourceKey">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="viewModels:ShadowItemViewModel">
<SelectableTextBlock
Margin="12,0,12,0"
VerticalAlignment="Center"
Text="{Binding ResourceKey}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn
Width="*"
x:DataType="viewModels:ShadowItemViewModel"
Binding="{Binding ShadowDisplayName}"
CanUserSort="False"
Header="Name" />
<DataGridTemplateColumn Width="300" Header="BoxShadows">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="viewModels:ShadowItemViewModel">
<SelectableTextBlock
Margin="12,0,12,0"
VerticalAlignment="Center"
Text="{Binding BoxShadowValue}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</TabItem>
</TabControl>
</Grid>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

41
demo/Semi.Avalonia.Demo/Controls/ShadowGroupControl.cs Normal file
View File

@ -0,0 +1,41 @@
using System.Collections;
using Avalonia;
using Avalonia.Controls.Primitives;
namespace Semi.Avalonia.Demo.Controls;
public class ShadowGroupControl : TemplatedControl
{
public static readonly StyledProperty<string?> TitleProperty =
AvaloniaProperty.Register<ShadowGroupControl, string?>(nameof(Title));
public string? Title
{
get => GetValue(TitleProperty);
set => SetValue(TitleProperty, value);
}
private IEnumerable? _lightShadows;
public static readonly DirectProperty<ShadowGroupControl, IEnumerable?> LightShadowsProperty =
AvaloniaProperty.RegisterDirect<ShadowGroupControl, IEnumerable?>(nameof(LightShadows),
o => o.LightShadows, (o, v) => o.LightShadows = v);
public IEnumerable? LightShadows
{
get => _lightShadows;
set => SetAndRaise(LightShadowsProperty, ref _lightShadows, value);
}
private IEnumerable? _darkShadows;
public static readonly DirectProperty<ShadowGroupControl, IEnumerable?> DarkShadowsProperty =
AvaloniaProperty.RegisterDirect<ShadowGroupControl, IEnumerable?>(nameof(DarkShadows),
o => o.DarkShadows, (o, v) => o.DarkShadows = v);
public IEnumerable? DarkShadows
{
get => _darkShadows;
set => SetAndRaise(DarkShadowsProperty, ref _darkShadows, value);
}
}

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

@ -21,6 +21,7 @@
<ResourceInclude Source="../Controls/ColorItemControl.axaml" />
<ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
<ResourceInclude Source="../Controls/FunctionalColorGroupControl.axaml" />
<ResourceInclude Source="../Controls/ShadowGroupControl.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
@ -115,7 +116,6 @@
<ItemsControl ItemsSource="{Binding FunctionalColors}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- -->
<controls:FunctionalColorGroupControl
Title="{Binding Title}"
DarkColors="{Binding DarkColors}"
@ -123,6 +123,18 @@
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Shadows}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:ShadowGroupControl
Title="{Binding Title}"
DarkShadows="{Binding DarkShadows}"
LightShadows="{Binding LightShadows}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
</SplitView.Content>

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

@ -47,6 +47,7 @@ public class PaletteDemoViewModel : ObservableObject
}
public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = [];
public ObservableCollection<ShadowGroupViewModel> Shadows { get; set; } = [];
public PaletteDemoViewModel()
{
@ -59,6 +60,7 @@ public class PaletteDemoViewModel : ObservableObject
{
InitializePalette();
InitializeFunctionalColors();
InitializeShadows();
}
private void InitializePalette()
@ -97,6 +99,11 @@ public class PaletteDemoViewModel : ObservableObject
FunctionalColors.Add(new FunctionalColorGroupViewModel("Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
}
private void InitializeShadows()
{
Shadows.Add(new ShadowGroupViewModel("Shadow", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.ShadowTokens));
}
private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
{
SelectedColor = item;
@ -254,6 +261,79 @@ public class FunctionalColorGroupViewModel : ObservableObject
}
}
public class ShadowItemViewModel : ObservableObject
{
private string _shadowDisplayName = null!;
public string ShadowDisplayName
{
get => _shadowDisplayName;
set => SetProperty(ref _shadowDisplayName, value);
}
private string _resourceKey = null!;
public string ResourceKey
{
get => _resourceKey;
set => SetProperty(ref _resourceKey, value);
}
private string _boxShadowValue = null!;
public string BoxShadowValue
{
get => _boxShadowValue;
set => SetProperty(ref _boxShadowValue, value);
}
public ShadowItemViewModel(string shadowDisplayName, BoxShadows boxShadows, string resourceKey)
{
ShadowDisplayName = shadowDisplayName;
ResourceKey = resourceKey;
BoxShadowValue = boxShadows.ToString();
}
}
public class ShadowGroupViewModel : ObservableObject
{
private string _title = null!;
public string Title
{
get => _title;
set => SetProperty(ref _title, value);
}
public ObservableCollection<ShadowItemViewModel> LightShadows { get; set; } = [];
public ObservableCollection<ShadowItemViewModel> DarkShadows { get; set; } = [];
public ShadowGroupViewModel(string title, IResourceDictionary? lightDictionary,
IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
{
Title = title;
foreach (var (key, name) in tokens)
{
if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
{
if (lightValue is BoxShadows lightShadow)
{
LightShadows.Add(new ShadowItemViewModel(name, lightShadow, key));
}
}
if (darkDictionary?.TryGetValue(key, out var darkValue) ?? false)
{
if (darkValue is BoxShadows darkShadow)
{
DarkShadows.Add(new ShadowItemViewModel(name, darkShadow, key));
}
}
}
}
}
public static class ColorTokens
{
public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
@ -374,4 +454,10 @@ public static class ColorTokens
new("SemiColorDisabledBackground", "Disabled Background"),
new("SemiColorDisabledFill", "Disabled Fill"),
};
public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } = new List<Tuple<string, string>>
{
new("SemiColorShadow", "Shadow"),
new("SemiShadowElevated", "Shadow Elevated"),
};
}