feat: redesign ThemeVariantDemo.

This commit is contained in:
Zhang Dian
2024-12-22 14:04:10 +08:00
parent 9c96d6e476
commit 67f33125f6
2 changed files with 41 additions and 12 deletions

View File

@@ -4,18 +4,36 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:Semi.Avalonia.Demo.Pages"
x:DataType="vm:ThemeVariantDemoViewModel"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<Grid>
<ThemeVariantScope Name="scope">
<Design.DataContext>
<vm:ThemeVariantDemoViewModel />
</Design.DataContext>
<StackPanel>
<Border Theme="{StaticResource CardBorder}">
<StackPanel>
<ListBox
Theme="{StaticResource CardRadioGroupListBox}"
ItemsSource="{Binding ThemeVariants}"
SelectedItem="{Binding SelectedThemeVariant}" />
<DatePicker />
<CalendarDatePicker />
</StackPanel>
</Border>
<ThemeVariantScope RequestedThemeVariant="{Binding SelectedThemeVariant}">
<Border Theme="{StaticResource CardBorder}">
<StackPanel>
<ListBox
Theme="{StaticResource CardRadioGroupListBox}"
ItemsSource="{Binding ThemeVariants}"
SelectedItem="{Binding SelectedThemeVariant}" />
<DatePicker />
<CalendarDatePicker />
<ToggleSwitch Content="Switch Theme" IsCheckedChanged="Switch_OnIsCheckedChanged" />
</StackPanel>
</Border>
</ThemeVariantScope>
</Grid>
</UserControl>
</StackPanel>
</UserControl>

View File

@@ -1,8 +1,7 @@
using Avalonia;
using System.Collections.Generic;
using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Markup.Xaml;
using Avalonia.Styling;
using CommunityToolkit.Mvvm.ComponentModel;
namespace Semi.Avalonia.Demo.Pages;
@@ -11,10 +10,22 @@ public partial class ThemeVariantDemo : UserControl
public ThemeVariantDemo()
{
InitializeComponent();
this.DataContext = new ThemeVariantDemoViewModel();
}
}
private void Switch_OnIsCheckedChanged(object sender, RoutedEventArgs e)
{
scope.RequestedThemeVariant = scope.ActualThemeVariant == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
}
public partial class ThemeVariantDemoViewModel : ObservableObject
{
[ObservableProperty] private ThemeVariant? _selectedThemeVariant;
public IEnumerable<ThemeVariant> ThemeVariants =>
[
ThemeVariant.Default,
ThemeVariant.Light,
ThemeVariant.Dark,
SemiTheme.Aquatic,
SemiTheme.Desert,
SemiTheme.Dust,
SemiTheme.NightSky,
];
}