zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-03-14 05:26:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #516 from irihitech/detail

Browse Source 
fix Hex Color code in demo
This commit is contained in:
Dong Bin
2024-12-31 14:09:16 +08:00
committed by GitHub
parent 5715bba345 e4adde26d2
commit ab824fbcd2
14 changed files with 113 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
demo/Semi.Avalonia.Demo/App.axaml
View File

@@ -7,8 +7,15 @@
<!-- You can still reference in old way. -->
<!-- <StyleInclude Source="avares://Semi.Avalonia/Index.axaml" /> -->
<semi:SemiTheme Locale="zh-CN" />
<semi:SemiPopupAnimations/>
<semi:SemiPopupAnimations />
<StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
<StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
</Application.Styles>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Themes/_index.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

48
demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs
View File

@@ -1,8 +1,10 @@
using System.Globalization;
using System.Threading.Tasks;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Media;
using Semi.Avalonia.Demo.Converters;
namespace Semi.Avalonia.Demo.Controls;
@@ -10,6 +12,7 @@ public class ColorDetailControl : TemplatedControl
{
public const string KEY_ResourceKey = "ResourceKey";
public const string KEY_Hex = "Hex";
public const string KEY_Hex2 = "Hex2";
public const string KEY_Opacity = "Opacity";
public const string KEY_ColorResourceKey = "ColorResourceKey";
@@ -51,6 +54,17 @@ public class ColorDetailControl : TemplatedControl
private set => SetAndRaise(HexProperty, ref _hex, value);
}
private string? _hex2;
public static readonly DirectProperty<ColorDetailControl, string?> Hex2Property =
AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(Hex2), o => o.Hex2);
public string? Hex2
{
get => _hex2;
set => SetAndRaise(Hex2Property, ref _hex2, value);
}
public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty =
AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(OpacityNumber), o => o.OpacityNumber);
@@ -70,34 +84,30 @@ public class ColorDetailControl : TemplatedControl
private void OnBackgroundChanged(AvaloniaPropertyChangedEventArgs args)
{
var color = args.GetNewValue<IBrush>();
if (color is ISolidColorBrush b)
if (color is ISolidColorBrush brush)
{
Hex = b.Color.ToString().ToUpperInvariant();
OpacityNumber = b.Opacity.ToString(CultureInfo.InvariantCulture);
var hex1 = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
var hex2 = ColorConverter.ToHex.Convert(brush.Color, typeof(string), true, CultureInfo.InvariantCulture);
Hex = hex1 as string;
Hex2 = hex2 as string;
OpacityNumber = brush.Opacity.ToString(CultureInfo.InvariantCulture);
}
}
public async void Copy(object o)
public async Task Copy(object o)
{
string? text = null;
if (o is string s)
{
switch (s)
text = s switch
{
case KEY_ResourceKey:
text = ResourceKey;
break;
case KEY_Hex:
text = Hex;
break;
case KEY_Opacity:
text = OpacityNumber;
break;
case KEY_ColorResourceKey:
text = ColorResourceKey;
break;
default: text = string.Empty; break;
}
KEY_ResourceKey => ResourceKey,
KEY_Hex => Hex,
KEY_Hex2 => Hex2,
KEY_Opacity => OpacityNumber,
KEY_ColorResourceKey => ColorResourceKey,
_ => string.Empty
};
}
var toplevel = TopLevel.GetTopLevel(this);

22
demo/Semi.Avalonia.Demo/Converters/ColorConverter.cs Normal file
View File

@@ -0,0 +1,22 @@
using Avalonia.Data.Converters;
using Avalonia.Media;
namespace Semi.Avalonia.Demo.Converters;
public static class ColorConverter
{
public static readonly IValueConverter ToHex =
new FuncValueConverter<object, bool, string>(
(obj, withAlpha) =>
obj switch
{
Color color => withAlpha
? $"#{color.A:X2}{color.R:X2}{color.G:X2}{color.B:X2}"
: $"#{color.R:X2}{color.G:X2}{color.B:X2}",
ISolidColorBrush brush => withAlpha
? $"#{brush.Color.A:X2}{brush.Color.R:X2}{brush.Color.G:X2}{brush.Color.B:X2}"
: $"#{brush.Color.R:X2}{brush.Color.G:X2}{brush.Color.B:X2}",
_ => string.Empty
}
);
}

13
demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml
View File

@@ -4,6 +4,7 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
xmlns:cvt="clr-namespace:Semi.Avalonia.Demo.Converters"
mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
x:DataType="vm:HighContrastDemoViewModel"
x:CompileBindings="True"
@@ -11,15 +12,6 @@
<Design.DataContext>
<vm:HighContrastDemoViewModel />
</Design.DataContext>
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="../Themes/ToggleSwitch.axaml" />
<ResourceInclude Source="../Controls/ColorItemControl.axaml" />
<ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<SplitView
Name="splitView"
CompactPaneLength="50"
@@ -286,7 +278,8 @@
<SelectableTextBlock
Margin="12 0"
VerticalAlignment="Center"
Text="{Binding Hex}" />
Text="{Binding Brush,
Converter={x:Static cvt:ColorConverter.ToHex},ConverterParameter={x:False}}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

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

@@ -14,17 +14,6 @@
<Design.DataContext>
<viewModels:PaletteDemoViewModel />
</Design.DataContext>
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="../Themes/ToggleSwitch.axaml" />
<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>
<SplitView
Name="splitView"
CompactPaneLength="50"

43
demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.axaml → demo/Semi.Avalonia.Demo/Themes/ColorDetailControl.axaml
View File

@@ -1,7 +1,8 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls">
xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
x:CompileBindings="True">
<ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl">
<Setter Property="Template">
<ControlTemplate TargetType="controls:ColorDetailControl">
@@ -16,7 +17,7 @@
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}"
CornerRadius="6" />
<Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *, *">
<Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *, *, *">
<!-- Row 0-1-2 ResourceKey -->
<TextBlock
Grid.Column="0"
@@ -47,7 +48,7 @@
Grid.Row="2"
Grid.Column="0"
VerticalAlignment="Center"
IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
IsVisible="{TemplateBinding ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
Text="{TemplateBinding ColorResourceKey}" />
<Button
Grid.Row="2"
@@ -56,7 +57,7 @@
Padding="8"
Command="{Binding $parent[controls:ColorDetailControl].Copy}"
CommandParameter="{x:Static controls:ColorDetailControl.KEY_ColorResourceKey}"
IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
IsVisible="{TemplateBinding ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
Theme="{DynamicResource BorderlessButton}">
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
@@ -64,7 +65,7 @@
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
<!-- Row 3-4 HEX -->
<!-- Row 3-4-5 HEX -->
<TextBlock
Grid.Row="3"
Grid.Column="0"
@@ -72,7 +73,7 @@
Margin="4,8,0,0"
VerticalAlignment="Center"
Classes="Tertiary"
Text="ARGB" />
Text="Hex" />
<SelectableTextBlock
Grid.Row="4"
Grid.Column="0"
@@ -91,23 +92,41 @@
Data="{StaticResource SemiIconCopy}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
<!-- Row 5-6 Opacity -->
<TextBlock
<SelectableTextBlock
Grid.Row="5"
Grid.Column="0"
VerticalAlignment="Center"
Text="{TemplateBinding Hex2}" />
<Button
Grid.Row="5"
Grid.Column="1"
Classes="Tertiary"
Padding="8"
Command="{Binding $parent[controls:ColorDetailControl].Copy}"
CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex2}"
Theme="{DynamicResource BorderlessButton}">
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
Data="{StaticResource SemiIconCopy}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
<!-- Row 6-7 Opacity -->
<TextBlock
Grid.Row="6"
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="4,8,0,0"
VerticalAlignment="Center"
Classes="Tertiary"
Text="Opacity" />
<SelectableTextBlock
Grid.Row="6"
Grid.Row="7"
Grid.Column="0"
VerticalAlignment="Center"
Text="{TemplateBinding OpacityNumber}" />
<Button
Grid.Row="6"
Grid.Row="7"
Grid.Column="1"
Classes="Tertiary"
Padding="8"
@@ -124,4 +143,4 @@
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>
</ResourceDictionary>

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

@@ -1,7 +1,8 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Semi.Avalonia.Demo.Controls">
xmlns:controls="using:Semi.Avalonia.Demo.Controls"
x:CompileBindings="True">
<Design.PreviewWith>
<controls:ColorItemControl />
</Design.PreviewWith>

0
demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml → demo/Semi.Avalonia.Demo/Themes/FunctionalColorGroupControl.axaml
View File

0
demo/Semi.Avalonia.Demo/Controls/ShadowGroupControl.axaml → demo/Semi.Avalonia.Demo/Themes/ShadowGroupControl.axaml
View File

4
demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml
View File

@@ -25,7 +25,7 @@
<ControlTheme x:Key="SplitViewToggleSwitch"
BasedOn="{StaticResource ThemeToggleSwitch}"
TargetType="ToggleSwitch">
<Setter Property="Content"
Value="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" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
<Setter Property="Content" Value="{StaticResource SemiIconSidebar}" />
</ControlTheme>
</ResourceDictionary>

10
demo/Semi.Avalonia.Demo/Themes/_index.axaml Normal file
View File

@@ -0,0 +1,10 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="ColorDetailControl.axaml" />
<ResourceInclude Source="ColorItemControl.axaml" />
<ResourceInclude Source="FunctionalColorGroupControl.axaml" />
<ResourceInclude Source="ShadowGroupControl.axaml" />
<ResourceInclude Source="TabMenu.axaml" />
<ResourceInclude Source="ToggleSwitch.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

10
demo/Semi.Avalonia.Demo/ViewModels/HighContrastDemoViewModel.cs
View File

@@ -33,7 +33,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
{
ResourceKey = "WindowColor",
Brush = new SolidColorBrush(Color.Parse("#202020")),
Hex = "#FF202020",
Description = "Background of pages, panes, popups, and windows.",
PairWith = "WindowTextColor"
},
@@ -41,7 +40,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
{
ResourceKey = "WindowTextColor",
Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
Hex = "WHITE",
Description = "Headings, body copy, lists, placeholder text, app and window borders.",
PairWith = "WindowColor"
},
@@ -49,7 +47,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
{
ResourceKey = "HotlightColor",
Brush = new SolidColorBrush(Color.Parse("#75E9FC")),
Hex = "#FF75E9FC",
Description = "Hyperlinks.",
PairWith = "WindowColor"
},
@@ -57,7 +54,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
{
ResourceKey = "GrayTextColor",
Brush = new SolidColorBrush(Color.Parse("#A6A6A6")),
Hex = "#FFA6A6A6",
Description = "Inactive (disabled) UI.",
PairWith = "WindowColor"
},
@@ -65,7 +61,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
{
ResourceKey = "HighlightTextColor",
Brush = new SolidColorBrush(Color.Parse("#263B50")),
Hex = "#FF263B50",
Description =
"Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress.",
PairWith = "HighlightColor"
@@ -74,7 +69,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
{
ResourceKey = "HighlightColor",
Brush = new SolidColorBrush(Color.Parse("#8EE3F0")),
Hex = "#FF8EE3F0",
Description =
"Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress.",
PairWith = "HighlightTextColor"
@@ -83,7 +77,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
{
ResourceKey = "ButtonTextColor",
Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
Hex = "WHITE",
Description = "Foreground color for buttons and any UI that can be interacted with.",
PairWith = "ButtonFaceColor"
},
@@ -91,7 +84,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
{
ResourceKey = "ButtonFaceColor",
Brush = new SolidColorBrush(Color.Parse("#202020")),
Hex = "#FF202020",
Description = "Background color for buttons and any UI that can be interacted with.",
PairWith = "ButtonTextColor"
},
@@ -111,7 +103,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true && o is Color color)
{
colorResource.Brush = new SolidColorBrush(color);
colorResource.Hex = color.ToString().ToUpperInvariant();
}
}
}
@@ -131,7 +122,6 @@ public partial class ColorResource : ObservableObject
{
[ObservableProperty] private string? _resourceKey;
[ObservableProperty] private SolidColorBrush? _brush;
[ObservableProperty] private string? _hex;
[ObservableProperty] private string? _description;
[ObservableProperty] private string? _pairWith;
}

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

@@ -1,11 +1,13 @@
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Globalization;
using Avalonia.Controls;
using Avalonia.Media;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Messaging;
using Semi.Avalonia.Tokens.Palette;
using Semi.Avalonia.Demo.Converters;
namespace Semi.Avalonia.Demo.ViewModels;
@@ -212,7 +214,8 @@ public class ColorItemViewModel : ObservableObject
ColorDisplayName = colorDisplayName;
Brush = brush;
ResourceKey = resourceKey;
Hex = brush.ToString().ToUpperInvariant();
var hex = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
Hex = hex as string ?? string.Empty;
if ((light && index < 5) || (!light && index >= 5))
{
TextBrush = Brushes.Black;

14
demo/Semi.Avalonia.Demo/Views/MainView.axaml
View File

@@ -11,14 +11,6 @@
x:CompileBindings="True"
x:DataType="views:MainViewModel"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="../Themes/TabMenu.axaml" />
<ResourceInclude Source="../Themes/ToggleSwitch.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid RowDefinitions="Auto, *">
<Border
Grid.Row="0"
@@ -50,10 +42,6 @@
<Setter Property="Padding" Value="8" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
</Style>
<Style Selector="ToggleSwitch">
<Setter Property="Theme" Value="{DynamicResource ThemeToggleSwitch}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
</Style>
<Style Selector="PathIcon">
<Setter Property="Theme" Value="{DynamicResource InnerPathIcon}" />
</Style>
@@ -68,6 +56,8 @@
</Button>
<ToggleSwitch
Theme="{DynamicResource ThemeToggleSwitch}"
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}"
Command="{Binding ToggleThemeCommand}"
OnContent="{StaticResource SemiIconMoon}"
OffContent="{StaticResource SemiIconSun}" />