feat: add Theme Selector.
This commit is contained in:
Zhang Dian
@@ -2,10 +2,8 @@
|
||||
x:Class="Ursa.Demo.App"
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:u-semi="https://irihi.tech/ursa/themes/semi"
|
||||
RequestedThemeVariant="{x:Static semi:SemiTheme.Desert}"
|
||||
xmlns:semi="https://irihi.tech/semi"
|
||||
xmlns:demo="clr-namespace:Ursa.Demo">
|
||||
xmlns:u-semi="https://irihi.tech/ursa/themes/semi">
|
||||
<Application.Styles>
|
||||
<semi:SemiTheme Locale="zh-CN" />
|
||||
<u-semi:SemiTheme Locale="zh-CN" />
|
||||
|
||||
@@ -8,8 +8,8 @@ namespace Ursa.Demo.Converters;
|
||||
|
||||
public class IconNameToPathConverter: IValueConverter
|
||||
{
|
||||
private readonly string[] _paths = new[]
|
||||
{
|
||||
private readonly string[] _paths =
|
||||
[
|
||||
"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
|
||||
"M16 12L9 2L2 12H3.86L0 18H7V22H11V18H18L14.14 12H16M20.14 12H22L15 2L12.61 5.41L17.92 13H15.97L19.19 18H24L20.14 12M13 19H17V22H13V19Z",
|
||||
"M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z",
|
||||
@@ -17,7 +17,7 @@ public class IconNameToPathConverter: IValueConverter
|
||||
"M16,9V7H12V12.5C11.58,12.19 11.07,12 10.5,12A2.5,2.5 0 0,0 8,14.5A2.5,2.5 0 0,0 10.5,17A2.5,2.5 0 0,0 13,14.5V9H16M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z",
|
||||
"M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z",
|
||||
"M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12S17.5 2 12 2M12.5 13H11V7H12.5V11.3L16.2 9.2L17 10.5L12.5 13Z"
|
||||
};
|
||||
];
|
||||
public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
|
||||
{
|
||||
if (value is int i)
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
using System;
|
||||
using System.Collections.ObjectModel;
|
||||
using Avalonia;
|
||||
using Avalonia.Styling;
|
||||
using CommunityToolkit.Mvvm.ComponentModel;
|
||||
using CommunityToolkit.Mvvm.Messaging;
|
||||
using Semi.Avalonia;
|
||||
|
||||
namespace Ursa.Demo.ViewModels;
|
||||
|
||||
public class MainViewViewModel : ViewModelBase
|
||||
public partial class MainViewViewModel : ViewModelBase
|
||||
{
|
||||
public MenuViewModel Menus { get; set; } = new MenuViewModel();
|
||||
|
||||
@@ -75,4 +80,33 @@ public class MainViewViewModel : ViewModelBase
|
||||
_ => throw new ArgumentOutOfRangeException(nameof(s), s, null)
|
||||
};
|
||||
}
|
||||
|
||||
public ObservableCollection<ThemeItem> Themes { get; } =
|
||||
[
|
||||
new("Default", ThemeVariant.Default),
|
||||
new("Light", ThemeVariant.Light),
|
||||
new("Dark", ThemeVariant.Dark),
|
||||
new("Aquatic", SemiTheme.Aquatic),
|
||||
new("Desert", SemiTheme.Desert),
|
||||
new("Dust", SemiTheme.Dust),
|
||||
new("NightSky", SemiTheme.NightSky)
|
||||
];
|
||||
|
||||
[ObservableProperty] private ThemeItem? _selectedTheme;
|
||||
|
||||
partial void OnSelectedThemeChanged(ThemeItem? oldValue, ThemeItem? newValue)
|
||||
{
|
||||
if (newValue is null) return;
|
||||
var app = Application.Current;
|
||||
if (app is not null)
|
||||
{
|
||||
app.RequestedThemeVariant = newValue.Theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public class ThemeItem(string name, ThemeVariant theme)
|
||||
{
|
||||
public string Name { get; set; } = name;
|
||||
public ThemeVariant Theme { get; set; } = theme;
|
||||
}
|
||||
@@ -18,6 +18,7 @@
|
||||
</Design.DataContext>
|
||||
<UserControl.Resources>
|
||||
<converters:IconNameToPathConverter x:Key="IconConverter" />
|
||||
<StreamGeometry x:Key="SettingIcon">M7.99973 5.07197C7.19713 5.53535 6.20729 5.53113 5.40866 5.06092L5.1637 4.91669C4.55751 4.55978 3.77662 4.65563 3.34264 5.20927C2.69567 6.03462 2.17585 6.94251 1.79166 7.90124C1.53027 8.55354 1.83733 9.27693 2.449 9.62286L2.69407 9.76145C3.50107 10.2178 4.00002 11.0732 4.00002 12.0003C4.00002 12.9271 3.50145 13.7822 2.69492 14.2387L2.44842 14.3783C1.83596 14.725 1.52888 15.4497 1.79213 16.1024C1.98358 16.577 2.21048 17.044 2.47374 17.5C2.73723 17.9564 3.0285 18.3868 3.34416 18.7902C3.77773 19.3443 4.5588 19.4406 5.16498 19.0834L5.40839 18.9399C6.20714 18.4692 7.19739 18.4648 8.0003 18.9284C8.80291 19.3918 9.29417 20.2511 9.28627 21.1778L9.28386 21.4601C9.27787 22.1629 9.75107 22.7906 10.4468 22.8903C11.4692 23.0368 12.5154 23.0404 13.5537 22.8927C14.2499 22.7936 14.7231 22.1653 14.7169 21.462L14.7143 21.1785C14.7061 20.2514 15.1974 19.3916 16.0003 18.928C16.8029 18.4647 17.7927 18.4689 18.5914 18.9391L18.8363 19.0833C19.4425 19.4402 20.2234 19.3444 20.6574 18.7907C21.3044 17.9654 21.8242 17.0575 22.2084 16.0988C22.4698 15.4465 22.1627 14.7231 21.551 14.3772L21.306 14.2386C20.499 13.7822 20 12.9268 20 11.9997C20 11.0729 20.4986 10.2178 21.3051 9.76126L21.5516 9.62174C22.1641 9.27506 22.4712 8.55029 22.2079 7.89761C22.0165 7.42297 21.7896 6.95598 21.5263 6.50001C21.2628 6.04362 20.9715 5.61325 20.6559 5.20982C20.2223 4.65568 19.4412 4.55944 18.8351 4.91665L18.5916 5.06009C17.7929 5.53078 16.8026 5.53519 15.9997 5.07163C15.1971 4.60825 14.7059 3.74891 14.7138 2.82218L14.7162 2.53994C14.7222 1.83708 14.249 1.20945 13.5532 1.10973C12.5308 0.963214 11.4846 0.959581 10.4464 1.10733C9.75011 1.20641 9.27691 1.83473 9.28317 2.53798L9.28569 2.82154C9.29395 3.74862 8.80264 4.60841 7.99973 5.07197ZM14 15.4641C15.9132 14.3595 16.5687 11.9132 15.4641 9.99999C14.3595 8.08682 11.9132 7.43132 10 8.53589C8.08684 9.64046 7.43134 12.0868 8.53591 14C9.64048 15.9132 12.0868 16.5687 14 15.4641Z</StreamGeometry>
|
||||
</UserControl.Resources>
|
||||
<Panel>
|
||||
<Panel.Styles>
|
||||
@@ -27,7 +28,7 @@
|
||||
</Panel.Styles>
|
||||
<Grid
|
||||
Classes.Blur="{Binding $parent[u:UrsaWindow].(u:OverlayDialogHost.IsInModalStatus)}"
|
||||
ColumnDefinitions="Auto, *" >
|
||||
ColumnDefinitions="Auto, *">
|
||||
<Border
|
||||
Padding="8 4"
|
||||
VerticalAlignment="Stretch"
|
||||
@@ -63,7 +64,7 @@
|
||||
Margin="8,0,0,0"
|
||||
HorizontalAlignment="Left"
|
||||
IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}"
|
||||
Header="{Binding Status}"/>
|
||||
Header="{Binding Status}" />
|
||||
</StackPanel>
|
||||
</DataTemplate>
|
||||
</u:NavMenu.HeaderTemplate>
|
||||
@@ -85,6 +86,35 @@
|
||||
Theme="{DynamicResource TitleTextBlock}" />
|
||||
</DockPanel>
|
||||
</u:NavMenu.Header>
|
||||
<u:NavMenu.Footer>
|
||||
<u:IconButton
|
||||
Theme="{DynamicResource BorderlessIconButton}"
|
||||
Classes="Tertiary"
|
||||
HorizontalAlignment="Stretch">
|
||||
<TextBlock
|
||||
Text="Settings"
|
||||
IsVisible="{Binding !#menu.IsHorizontalCollapsed}" />
|
||||
<u:IconButton.Icon>
|
||||
<PathIcon
|
||||
Width="16"
|
||||
Height="16"
|
||||
Data="{StaticResource SettingIcon}" />
|
||||
</u:IconButton.Icon>
|
||||
<Button.Flyout>
|
||||
<Flyout Placement="RightEdgeAlignedBottom">
|
||||
<u:Form LabelPosition="Left">
|
||||
<ComboBox
|
||||
u:FormItem.Label="ThemeVariant"
|
||||
MinWidth="100"
|
||||
PlaceholderText="Select a theme"
|
||||
DisplayMemberBinding="{Binding Name}"
|
||||
ItemsSource="{Binding Themes}"
|
||||
SelectedItem="{Binding SelectedTheme}" />
|
||||
</u:Form>
|
||||
</Flyout>
|
||||
</Button.Flyout>
|
||||
</u:IconButton>
|
||||
</u:NavMenu.Footer>
|
||||
</u:NavMenu>
|
||||
</Border>
|
||||
<ContentControl
|
||||
|
||||
Reference in New Issue
Block a user