unified design of the FeedBack category controls

demo/Ursa.Demo/Pages/BannerDemo.axaml

@@ -4,49 +4,65 @@
     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:pages="clr-namespace:Ursa.Demo.Pages"
     xmlns:u="https://irihi.tech/ursa"
-    x:DataType="pages:BannerDemoViewModel"
+    xmlns:vm="clr-namespace:Ursa.Demo.ViewModels"
+    x:DataType="vm:BannerDemoViewModel"
     mc:Ignorable="d">
     <Design.DataContext>
-        <pages:BannerDemoViewModel />
+        <vm:BannerDemoViewModel />
     </Design.DataContext>
-    <StackPanel Spacing="20">
-        <Grid ColumnDefinitions="*, 300">
-            <Grid Grid.Column="0">
-                <Border Margin="20">
-                    <u:Banner
-                        Classes.Bordered="{Binding Bordered}"
-                        Content="This is the Demo of Ursa Banner. "
-                        Header="Welcome to Ursa"
-                        Type="{Binding SelectedType}" />
-                </Border>
-            </Grid>
-            <Border Grid.Column="1" VerticalAlignment="Top">
-                <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *">
-                    <Label
-                        Grid.Row="0"
-                        Grid.Column="0"
-                        VerticalAlignment="Center"
-                        Content="Type" />
-                    <ComboBox
-                        Grid.Row="0"
-                        Grid.Column="1"
-                        MinWidth="200"
-                        ItemsSource="{Binding Types}"
-                        SelectedItem="{Binding SelectedType}" />
-                    <Label
-                        Grid.Row="1"
-                        Grid.Column="0"
-                        VerticalAlignment="Center"
-                        Content="Bordered" />
-                    <ToggleSwitch
-                        Grid.Row="1"
-                        Grid.Column="1"
-                        VerticalAlignment="Center"
-                        IsChecked="{Binding Bordered}" />
-                </Grid>
-            </Border>
-        </Grid>
-    </StackPanel>
-</UserControl>
+    <ScrollViewer>
+        <StackPanel Spacing="20">
+            <u:Banner
+                Name="banner"
+                Classes.Bordered="{Binding Bordered}"
+                Header="{Binding Title}"
+                Content="{Binding Content}" />
+            <u:Form Width="500">
+                <TextBox
+                    Classes="ClearButton"
+                    IsEnabled="{Binding SetTitleNull}"
+                    Text="{Binding Title}">
+                    <u:FormItem.Label>
+                        <StackPanel Orientation="Horizontal">
+                            <CheckBox Content="Title" IsChecked="{Binding SetTitleNull}" />
+                        </StackPanel>
+                    </u:FormItem.Label>
+                </TextBox>
+                <TextBox
+                    Classes="ClearButton TextArea"
+                    IsEnabled="{Binding SetContentNull}"
+                    Text="{Binding Content}"
+                    TextWrapping="Wrap">
+                    <u:FormItem.Label>
+                        <CheckBox Content="Content" IsChecked="{Binding SetContentNull}" />
+                    </u:FormItem.Label>
+                </TextBox>
+                <u:EnumSelector
+                    u:FormItem.Label="NotificationType"
+                    EnumType="NotificationType"
+                    Value="{Binding #banner.Type}" />
+                <u:EnumSelector
+                    u:FormItem.Label="HorizontalContentAlignment"
+                    EnumType="HorizontalAlignment"
+                    Value="{Binding  #banner.HorizontalContentAlignment}" />
+                <ToggleSwitch
+                    Theme="{StaticResource SimpleToggleSwitch}"
+                    u:FormItem.Label="Bordered"
+                    IsChecked="{Binding Bordered}" />
+                <ToggleSwitch
+                    Theme="{StaticResource SimpleToggleSwitch}"
+                    u:FormItem.Label="ShowIcon"
+                    IsChecked="{Binding #banner.ShowIcon}" />
+                <ToggleSwitch
+                    Theme="{StaticResource SimpleToggleSwitch}"
+                    u:FormItem.Label="CanClose"
+                    IsChecked="{Binding #banner.CanClose}" />
+                <ToggleSwitch
+                    Theme="{StaticResource SimpleToggleSwitch}"
+                    u:FormItem.Label="IsVisible"
+                    IsChecked="{Binding  #banner.IsVisible}" />
+            </u:Form>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

demo/Ursa.Demo/Pages/BannerDemo.axaml.cs

@@ -1,7 +1,4 @@
-using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using Avalonia.Controls.Notifications;
-using Avalonia.Markup.Xaml;
 using Ursa.Demo.ViewModels;
 
 namespace Ursa.Demo.Pages;
@@ -13,44 +10,4 @@ public BannerDemo()
         InitializeComponent();
         this.DataContext = new BannerDemoViewModel();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
-}
-
-public class BannerDemoViewModel : ViewModelBase
-{
-    private ObservableCollection<NotificationType>? _types;
-
-    public ObservableCollection<NotificationType>? Types
-    {
-        get => _types;
-        set => SetProperty(ref _types, value);
-    }
-
-    private NotificationType _selectedType;
-
-    public NotificationType SelectedType
-    {
-        get => _selectedType;
-        set => SetProperty(ref _selectedType, value);
-    }
-
-    private bool _bordered;
-
-    public bool Bordered
-    {
-        get => _bordered;
-        set => SetProperty(ref _bordered, value);
-    }
-
-    public BannerDemoViewModel()
-    {
-        Types = new ObservableCollection<NotificationType>()
-        {
-            NotificationType.Information, NotificationType.Success, NotificationType.Warning, NotificationType.Error
-        };
-    }
 }

demo/Ursa.Demo/Pages/MessageBoxDemo.axaml

@@ -13,23 +13,23 @@
     <UserControl.Styles>
         <Style Selector="Button">
             <Setter Property="HorizontalAlignment" Value="Left" />
-            <Setter Property="Margin" Value="8"></Setter>
+            <Setter Property="Margin" Value="8" />
         </Style>
     </UserControl.Styles>
     <StackPanel HorizontalAlignment="Left">
         <ComboBox ItemsSource="{Binding Icons}" SelectedItem="{Binding SelectedIcon}" />
-        <ToggleSwitch Content="Try Long Message" IsChecked="{Binding UseLong}"></ToggleSwitch>
-        <ToggleSwitch Content="Show Title" IsChecked="{Binding UseTitle}"></ToggleSwitch>
-        <ToggleSwitch Content="Overlay" IsChecked="{Binding UseOverlay}"></ToggleSwitch>
+        <ToggleSwitch Content="Try Long Message" IsChecked="{Binding UseLong}" />
+        <ToggleSwitch Content="Show Title" IsChecked="{Binding UseTitle}" />
+        <ToggleSwitch Content="Overlay" IsChecked="{Binding UseOverlay}" />
         <Button Command="{Binding DefaultMessageBoxCommand}" Content="Default" />
         <Button Command="{Binding OkCommand}" Content="OK" />
         <Button Command="{Binding OkCancelCommand}" Content="OKCancel" />
         <Button Command="{Binding YesNoCommand}" Content="YesNo" />
         <Button Command="{Binding YesNoCancelCommand}" Content="YesNoCancel" />
-        
+
         <TextBlock>
-            <Run Text="Last Clicked Result: "></Run>
-            <Run Text="{Binding Result}"></Run>
+            <Run Text="Last Clicked Result: " />
+            <Run Text="{Binding Result}" />
         </TextBlock>
     </StackPanel>
-</UserControl>
+</UserControl>

demo/Ursa.Demo/ViewModels/BannerDemoViewModel.cs

@@ -1,6 +1,41 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
 namespace Ursa.Demo.ViewModels;
 
-public class BannerDemoViewModel: ViewModelBase
+public partial class BannerDemoViewModel : ViewModelBase
 {
-
+    private string? _oldTitle = string.Empty;
+    private string? _oldContent = string.Empty;
+    [ObservableProperty] private string? _title = "Welcome to Ursa";
+    [ObservableProperty] private string? _content = "This is the Demo of Ursa Banner.";
+    [ObservableProperty] private bool _bordered;
+
+    [ObservableProperty] private bool _setTitleNull = true;
+    [ObservableProperty] private bool _setContentNull = true;
+
+    partial void OnSetTitleNullChanged(bool value)
+    {
+        if (value)
+        {
+            Title = _oldTitle;
+        }
+        else
+        {
+            _oldTitle = Title;
+            Title = null;
+        }
+    }
+
+    partial void OnSetContentNullChanged(bool value)
+    {
+        if (value)
+        {
+            Content = _oldContent;
+        }
+        else
+        {
+            _oldContent = Content;
+            Content = null;
+        }
+    }
 }

src/Ursa.Themes.Semi/Compatibles/Theme.axaml

@@ -0,0 +1,45 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StaticResource x:Key="NotificationCloseButton" ResourceKey="OverlayCloseButton" />
+    <StaticResource x:Key="ToastCloseButton" ResourceKey="OverlayCloseButton" />
+
+    <ControlTheme x:Key="InnerPathIcon" TargetType="PathIcon">
+        <Setter Property="Height" Value="16" />
+        <Setter Property="Width" Value="16" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="PathIcon">
+                <Border Background="{TemplateBinding Background}">
+                    <Viewbox
+                        Width="{TemplateBinding Width}"
+                        Height="{TemplateBinding Height}">
+                        <Path
+                            Name="PART_Path"
+                            Width="24"
+                            Height="24"
+                            Data="{TemplateBinding Data}"
+                            Fill="{TemplateBinding Foreground}" />
+                    </Viewbox>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^.Active /template/ Path#PART_Path">
+            <Setter Property="Fill" Value="{Binding BorderBrush,RelativeSource={RelativeSource TemplatedParent}}" />
+        </Style>
+        <Style Selector="^.ExtraSmall">
+            <Setter Property="Height" Value="8" />
+            <Setter Property="Width" Value="8" />
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="Height" Value="12" />
+            <Setter Property="Width" Value="12" />
+        </Style>
+        <Style Selector="^.Large">
+            <Setter Property="Height" Value="20" />
+            <Setter Property="Width" Value="20" />
+        </Style>
+        <Style Selector="^.ExtraLarge">
+            <Setter Property="Height" Value="24" />
+            <Setter Property="Width" Value="24" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/Ursa.Themes.Semi/Compatibles/_index.axaml

@@ -1,5 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ResourceDictionary.MergedDictionaries>
         <ResourceInclude Source="/Compatibles/Icon.axaml" />
+        <ResourceInclude Source="/Compatibles/Theme.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>