chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #166 from irihitech/issue/162-theme

Browse Source 
Theme toggler update
This commit is contained in:
Dong Bin
2024-03-22 18:11:50 +08:00
committed by GitHub
parent b767179b4f 59a4b68140
commit fa33477f85
9 changed files with 143 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/Ursa.Demo/Pages/ThemeTogglerDemo.axaml
View File

@@ -10,6 +10,8 @@
<StackPanel Grid.Column="0">
<TextBlock Text="Global"></TextBlock>
<u:ThemeToggleButton/>
<TextBlock Text="Global Indicator"></TextBlock>
<u:ThemeToggleButton Mode="Indicator"/>
<TextBlock Text="Target To Scope"></TextBlock>
<u:ThemeToggleButton TargetScope="{Binding #scope}"></u:ThemeToggleButton>
</StackPanel>

2
demo/Ursa.Demo/Views/MainView.axaml
View File

@@ -92,6 +92,8 @@
<u:ThemeToggleButton
Grid.Row="0"
Grid.Column="1"
IsThreeState="True"
Mode="Controller"
HorizontalAlignment="Right" />
<ContentControl
Grid.Row="1"

43
src/Ursa.Themes.Semi/Controls/ThemeSelector.axaml
View File

@@ -5,26 +5,31 @@
<ControlTheme TargetType="u:ThemeToggleButton" x:Key="{x:Type u:ThemeToggleButton}">
<Setter Property="Template">
<ControlTemplate TargetType="u:ThemeToggleButton">
<ToggleSwitch
Padding="4"
Name="{x:Static u:ThemeToggleButton.PART_ThemeToggleButton}"
Theme="{DynamicResource ButtonToggleSwitch}">
<ToggleSwitch.OnContent>
<PathIcon
Width="16"
Height="16"
Data="{DynamicResource ThemeSelectorButtonLightGlyph}"
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
</ToggleSwitch.OnContent>
<ToggleSwitch.OffContent>
<PathIcon
Width="16"
Height="16"
Data="{DynamicResource ThemeSelectorButtonDarkGlyph}"
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
</ToggleSwitch.OffContent>
</ToggleSwitch>
<Button
Padding="8"
FontWeight="Regular"
Name="{x:Static u:ThemeToggleButton.PART_ThemeButton}"
HorizontalAlignment="Center"
Theme="{DynamicResource BorderlessButton}">
<PathIcon
Name="PART_Icon"
Width="16"
Height="16"
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
</Button>
</ControlTemplate>
</Setter>
<Style Selector="^:dark /template/ PathIcon#PART_Icon">
<Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonDarkGlyph}"></Setter>
<Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_DARK}"></Setter>
</Style>
<Style Selector="^:light /template/ PathIcon#PART_Icon">
<Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonLightGlyph}"></Setter>
<Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_LIGHT}"></Setter>
</Style>
<Style Selector="^ /template/ PathIcon#PART_Icon">
<Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonDefaultGlyph}"></Setter>
<Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_SYSTEM}"></Setter>
</Style>
</ControlTheme>
</ResourceDictionary>

3
src/Ursa.Themes.Semi/Locale/en-us.axaml
View File

@@ -12,4 +12,7 @@
<x:String x:Key="STRING_MENU_DIALOG_CLOSE">Close</x:String>
<x:String x:Key="STRING_PAGINATION_JUMP_TO">Jump to page</x:String>
<x:String x:Key="STRING_PAGINATION_PAGE"> </x:String>
<x:String x:Key="STRING_THEME_TOGGLE_DARK">Dark</x:String>
<x:String x:Key="STRING_THEME_TOGGLE_LIGHT">Light</x:String>
<x:String x:Key="STRING_THEME_TOGGLE_SYSTEM">System</x:String>
</ResourceDictionary>

3
src/Ursa.Themes.Semi/Locale/zh-cn.axaml
View File

@@ -12,4 +12,7 @@
<x:String x:Key="STRING_MENU_DIALOG_CLOSE">关闭</x:String>
<x:String x:Key="STRING_PAGINATION_JUMP_TO">跳至</x:String>
<x:String x:Key="STRING_PAGINATION_PAGE">页</x:String>
<x:String x:Key="STRING_THEME_TOGGLE_DARK">暗色</x:String>
<x:String x:Key="STRING_THEME_TOGGLE_LIGHT">亮色</x:String>
<x:String x:Key="STRING_THEME_TOGGLE_SYSTEM">跟随系统</x:String>
</ResourceDictionary>

5
src/Ursa.Themes.Semi/Themes/Shared/ThemeSelector.axaml
View File

@@ -1,6 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<StreamGeometry x:Key="ThemeSelectorButtonDarkGlyph">M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z</StreamGeometry>
<StreamGeometry x:Key="ThemeSelectorButtonLightGlyph">M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13</StreamGeometry>
<StreamGeometry x:Key="ThemeSelectorButtonDarkGlyph">M9,2C7.95,2 6.95,2.16 6,2.46C10.06,3.73 13,7.5 13,12C13,16.5 10.06,20.27 6,21.54C6.95,21.84 7.95,22 9,22A10,10 0 0,0 19,12A10,10 0 0,0 9,2Z</StreamGeometry>
<StreamGeometry x:Key="ThemeSelectorButtonLightGlyph">M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z</StreamGeometry>
<StreamGeometry x:Key="ThemeSelectorButtonDefaultGlyph">M12,18V6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z</StreamGeometry>
</ResourceDictionary>

36
src/Ursa/Controls/ThemeSelector/ThemeSelectorBase.cs
View File

@@ -23,6 +23,15 @@ public abstract class ThemeSelectorBase: TemplatedControl
set => SetValue(SelectedThemeProperty, value);
}
public static readonly StyledProperty<ThemeSelectorMode> ModeProperty = AvaloniaProperty.Register<ThemeSelectorBase, ThemeSelectorMode>(
nameof(Mode));
public ThemeSelectorMode Mode
{
get => GetValue(ModeProperty);
set => SetValue(ModeProperty, value);
}
public static readonly StyledProperty<ThemeVariantScope?> TargetScopeProperty =
AvaloniaProperty.Register<ThemeSelectorBase, ThemeVariantScope?>(
nameof(TargetScope));
@@ -57,15 +66,21 @@ public abstract class ThemeSelectorBase: TemplatedControl
_syncFromScope = true;
if (this.TargetScope is { } target)
{
SyncThemeFromScope(target.ActualThemeVariant);
SyncThemeFromScope(Mode == ThemeSelectorMode.Controller
? target.RequestedThemeVariant
: target.ActualThemeVariant);
}
else if (this._scope is { } scope)
{
SyncThemeFromScope(scope.ActualThemeVariant);
SyncThemeFromScope(Mode == ThemeSelectorMode.Controller
? scope.RequestedThemeVariant
: scope.ActualThemeVariant);
}
else if (_application is { } app)
{
SyncThemeFromScope(app.ActualThemeVariant);
SyncThemeFromScope(Mode == ThemeSelectorMode.Controller
? app.RequestedThemeVariant
: app.ActualThemeVariant);
}
_syncFromScope = false;
}
@@ -79,21 +94,29 @@ public abstract class ThemeSelectorBase: TemplatedControl
{
base.OnAttachedToVisualTree(e);
_application = Application.Current;
_syncFromScope = true;
if (_application is not null)
{
_application.ActualThemeVariantChanged += OnScopeThemeChanged;
SyncThemeFromScope(_application.ActualThemeVariant);
SyncThemeFromScope(Mode == ThemeSelectorMode.Controller
? _application.RequestedThemeVariant
: _application.ActualThemeVariant);
}
_scope = this.GetLogicalAncestors().FirstOrDefault(a => a is ThemeVariantScope) as ThemeVariantScope;
if (_scope is not null)
{
_scope.ActualThemeVariantChanged += OnScopeThemeChanged;
SyncThemeFromScope(_scope.ActualThemeVariant);
SyncThemeFromScope(Mode == ThemeSelectorMode.Controller
? _scope.RequestedThemeVariant
: _scope.ActualThemeVariant);
}
if (TargetScope is not null)
{
SyncThemeFromScope(TargetScope.ActualThemeVariant);
SyncThemeFromScope(Mode == ThemeSelectorMode.Controller
? TargetScope.RequestedThemeVariant
: TargetScope.ActualThemeVariant);
}
_syncFromScope = false;
}
protected override void OnDetachedFromVisualTree(VisualTreeAttachmentEventArgs e)
@@ -113,7 +136,6 @@ public abstract class ThemeSelectorBase: TemplatedControl
{
if (_syncFromScope) return;
ThemeVariant? newTheme = args.NewValue.Value;
if (newTheme is null) return;
if (TargetScope is not null)
{
TargetScope.RequestedThemeVariant = newTheme;

7
src/Ursa/Controls/ThemeSelector/ThemeSelectorMode.cs Normal file
View File

@@ -0,0 +1,7 @@
namespace Ursa.Controls;
public enum ThemeSelectorMode
{
Controller,
Indicator,
}

92
src/Ursa/Controls/ThemeSelector/ThemeToggleButton.cs
View File

@@ -9,42 +9,90 @@ using Ursa.Common;
namespace Ursa.Controls;
[TemplatePart(PART_ThemeToggleButton, typeof(ToggleButton))]
[TemplatePart(PART_ThemeButton, typeof(Button))]
[PseudoClasses(PC_Dark, PC_Light, PC_Default)]
public class ThemeToggleButton: ThemeSelectorBase
{
public const string PART_ThemeToggleButton = "PART_ThemeToggleButton";
/// <summary>
/// This button IsChecked=true means ThemeVariant.Light, IsChecked=false means ThemeVariant.Dark.
/// </summary>
private ToggleButton? _button;
private ThemeVariant? _currentTheme;
public const string PART_ThemeButton = "PART_ThemeButton";
protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
{
base.OnAttachedToVisualTree(e);
_currentTheme = this.ActualThemeVariant;
}
public const string PC_Light = ":light";
public const string PC_Dark = ":dark";
public const string PC_Default = ":default";
private Button? _button;
private bool? _state;
public static readonly StyledProperty<bool> IsThreeStateProperty = AvaloniaProperty.Register<ThemeToggleButton, bool>(
nameof(IsThreeState));
public bool IsThreeState
{
get => GetValue(IsThreeStateProperty);
set => SetValue(IsThreeStateProperty, value);
}
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
Button.ClickEvent.RemoveHandler(OnButtonClickedChanged, _button);
_button = e.NameScope.Get<ToggleButton>(PART_ThemeToggleButton);
Button.ClickEvent.AddHandler(OnButtonClickedChanged, _button);
ToggleButton.IsCheckedProperty.SetValue(_currentTheme == ThemeVariant.Light, _button);
Button.ClickEvent.RemoveHandler(OnButtonClicked, _button);
_button = e.NameScope.Get<Button>(PART_ThemeButton);
Button.ClickEvent.AddHandler(OnButtonClicked, _button);
// ToggleButton.IsCheckedProperty.SetValue(_currentTheme == ThemeVariant.Light, _button);
}
private void OnButtonClickedChanged(object sender, RoutedEventArgs e)
private void OnButtonClicked(object sender, RoutedEventArgs e)
{
var newTheme = (sender as ToggleButton)!.IsChecked;
if (newTheme is null) return;
SetCurrentValue(SelectedThemeProperty, newTheme.Value ? ThemeVariant.Light : ThemeVariant.Dark);
bool? currentState = _state;
if (IsThreeState)
{
_state = currentState switch
{
true => false,
false => null,
null => true,
};
}
else
{
_state = currentState switch
{
true => false,
false => true,
null => true,
};
}
if (_state == true)
{
SelectedTheme = ThemeVariant.Light;
}
else if (_state == false)
{
SelectedTheme = ThemeVariant.Dark;
}
else
{
SelectedTheme = ThemeVariant.Default;
}
if (Mode == ThemeSelectorMode.Controller)
{
PseudoClasses.Set(PC_Light, SelectedTheme == ThemeVariant.Light);
PseudoClasses.Set(PC_Dark, SelectedTheme == ThemeVariant.Dark);
PseudoClasses.Set(PC_Default, SelectedTheme == null || SelectedTheme == ThemeVariant.Default);
}
}
protected override void SyncThemeFromScope(ThemeVariant? theme)
{
base.SyncThemeFromScope(theme);
ToggleButton.IsCheckedProperty.SetValue(theme == ThemeVariant.Light, _button);
if (Mode == ThemeSelectorMode.Indicator)
{
PseudoClasses.Set(PC_Light, theme == ThemeVariant.Light);
PseudoClasses.Set(PC_Dark, theme == ThemeVariant.Dark);
PseudoClasses.Set(PC_Default, theme == null || SelectedTheme == ThemeVariant.Default);
if (theme == ThemeVariant.Dark) _state = false;
else if (theme == ThemeVariant.Light) _state = true;
else _state = null;
}
}
}