feat: redesign Banner.

demo/Ursa.Demo/Pages/BannerDemo.axaml

@@ -13,28 +13,27 @@
     </Design.DataContext>
     <StackPanel Spacing="20">
         <Grid ColumnDefinitions="*, 300">
-            <Grid Grid.Column="0">
-                <Border Margin="20">
             <u:Banner
+                Margin="20"
+                Grid.Column="0"
                 Classes.Bordered="{Binding Bordered}"
+                CanClose="{Binding CanClose}"
                 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="*, *">
+                <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *">
                     <Label
                         Grid.Row="0"
                         Grid.Column="0"
                         VerticalAlignment="Center"
                         Content="Type" />
-                    <ComboBox
+                    <u:EnumSelector
                         Grid.Row="0"
                         Grid.Column="1"
-                        MinWidth="200"
+                        Width="200"
-                        ItemsSource="{Binding Types}"
+                        EnumType="NotificationType"
-                        SelectedItem="{Binding SelectedType}" />
+                        Value="{Binding SelectedType}" />
                     <Label
                         Grid.Row="1"
                         Grid.Column="0"
@@ -45,6 +44,16 @@
                         Grid.Column="1"
                         VerticalAlignment="Center"
                         IsChecked="{Binding Bordered}" />
+                    <Label
+                        Grid.Row="2"
+                        Grid.Column="0"
+                        VerticalAlignment="Center"
+                        Content="CanClose" />
+                    <ToggleSwitch
+                        Grid.Row="2"
+                        Grid.Column="1"
+                        VerticalAlignment="Center"
+                        IsChecked="{Binding CanClose}" />
                 </Grid>
             </Border>
         </Grid>

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

@@ -1,7 +1,7 @@
-using System.Collections.ObjectModel;
 using Avalonia.Controls;
 using Avalonia.Controls.Notifications;
 using Avalonia.Markup.Xaml;
+using CommunityToolkit.Mvvm.ComponentModel;
 using Ursa.Demo.ViewModels;
 
 namespace Ursa.Demo.Pages;
@@ -20,37 +20,9 @@ public partial class BannerDemo : UserControl
     }
 }
 
-public class BannerDemoViewModel : ViewModelBase
+public partial class BannerDemoViewModel : ViewModelBase
 {
-    private ObservableCollection<NotificationType>? _types;
+    [ObservableProperty] private NotificationType _selectedType;
-
+    [ObservableProperty] private bool _bordered;
-    public ObservableCollection<NotificationType>? Types
+    [ObservableProperty] private bool _canClose;
-    {
-        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
-        };
-    }
 }

src/Ursa.Themes.Semi/Controls/Banner.axaml

@@ -2,8 +2,18 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:u="https://irihi.tech/ursa">
-    <!--  Add Resources Here  -->
+    <Design.PreviewWith>
+        <HeaderedContentControl Theme="{StaticResource GroupBox}" Width="500">
+            <u:Banner
+                Classes="Bordered"
+                Header="Title"
+                Content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
+                Type="Warning"
+                CanClose="True" />
+        </HeaderedContentControl>
+    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type u:Banner}" TargetType="u:Banner">
+        <Setter Property="Padding" Value="{DynamicResource BannerBorderPadding}" />
         <Setter Property="BorderThickness" Value="{DynamicResource BannerBorderThickness}" />
         <Setter Property="BorderBrush" Value="{DynamicResource BannerBorderBrush}" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
@@ -11,19 +21,16 @@
             <ControlTemplate TargetType="u:Banner">
                 <Border
                     Name="PART_Container"
-                    Padding="12"
+                    Padding="{TemplateBinding Padding}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}">
                     <Grid ColumnDefinitions="*, Auto">
                         <Grid
                             Grid.Column="0"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            ColumnDefinitions="Auto, *"
+                            ColumnDefinitions="Auto, *">
-                            RowDefinitions="Auto, *">
                             <!--  Icon Area  -->
                             <Panel
-                                Grid.Row="0"
-                                Grid.RowSpan="2"
                                 Grid.Column="0"
                                 Margin="{DynamicResource BannerIconMargin}"
                                 VerticalAlignment="Top"
@@ -31,38 +38,29 @@
                                 <ContentPresenter Content="{TemplateBinding Icon}" />
                                 <PathIcon
                                     Name="PART_BuildInIcon"
-                                    Width="16"
+                                    Theme="{DynamicResource InnerPathIcon}"
-                                    Height="16"
+                                    Classes="Large"
-                                    IsVisible="{TemplateBinding Icon,
+                                    IsVisible="{TemplateBinding Icon, Converter={x:Static ObjectConverters.IsNull}}" />
-                                                                Converter={x:Static ObjectConverters.IsNull}}" />
                             </Panel>
+                            <StackPanel Grid.Column="1" Spacing="2">
                                 <ContentPresenter
-                                Grid.Row="0"
-                                Grid.Column="1"
                                     Content="{TemplateBinding Header}"
                                     ContentTemplate="{TemplateBinding HeaderTemplate}"
-                                IsVisible="{TemplateBinding Header,
+                                    TextElement.FontSize="{DynamicResource BannerTitleFontSize}"
-                                                            Converter={x:Static ObjectConverters.IsNotNull}}"
                                     TextElement.FontWeight="{DynamicResource TextBlockTitleFontWeight}" />
                                 <ContentPresenter
-                                Grid.Row="1"
-                                Grid.Column="1"
                                     Content="{TemplateBinding Content}"
                                     ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            </StackPanel>
                         </Grid>
                         <Button
                             Name="{x:Static u:Banner.PART_CloseButton}"
                             Grid.Column="1"
-                            Padding="4"
+                            Margin="{DynamicResource BannerCloseButtonMargin}"
-                            Cursor="Hand"
+                            HorizontalAlignment="Right"
-                            IsVisible="{TemplateBinding CanClose}"
+                            VerticalAlignment="Top"
-                            Theme="{DynamicResource BorderlessButton}">
+                            Theme="{DynamicResource NotificationCloseButton}"
-                            <PathIcon
+                            IsVisible="{TemplateBinding CanClose}" />
-                                Width="12"
-                                Height="12"
-                                Data="{DynamicResource BannerCloseIconGeometry}"
-                                Foreground="{DynamicResource BannerCloseButtonForeground}" />
-                        </Button>
                     </Grid>
                 </Border>
             </ControlTemplate>

src/Ursa.Themes.Semi/Themes/Shared/Banner.axaml

@@ -6,6 +6,9 @@
     <StaticResource x:Key="BannerCloseIconGeometry" ResourceKey="SemiIconClose" />
 
     <CornerRadius x:Key="BannerCornerRadius">3</CornerRadius>
+    <Thickness x:Key="BannerBorderPadding">12</Thickness>
     <Thickness x:Key="BannerBorderThickness">1</Thickness>
     <Thickness x:Key="BannerIconMargin">0 0 12 0</Thickness>
+    <Thickness x:Key="BannerCloseButtonMargin">12 0 0 0</Thickness>
+    <x:Double x:Key="BannerTitleFontSize">18</x:Double>
 </ResourceDictionary>