feat: add resources.

demo/Ursa.Demo/Pages/LoadingDemo.axaml

@@ -10,16 +10,16 @@
     mc:Ignorable="d">
     <Grid RowDefinitions="Auto, Auto, *">
         <ToggleSwitch Name="s" Content="Loading" />
-        <u:LoadingIcon Grid.Row="1" />
+        <StackPanel Grid.Row="1" Orientation="Horizontal">
-        <Panel
+            <u:LoadingIcon Classes="Small" />
+            <u:LoadingIcon />
+            <u:LoadingIcon Classes="Large" />
+        </StackPanel>
+        <u:LoadingContainer
             Grid.Row="2"
-            HorizontalAlignment="Stretch"
+            IsLoading="{Binding #s.IsChecked}"
-            VerticalAlignment="Stretch">
+            LoadingMessage="Loading...">
-            <u:Banner
+            <Calendar />
-                HorizontalAlignment="Center"
+        </u:LoadingContainer>
-                VerticalAlignment="Center"
-                Content="Hello Ursa!" />
-            <u:Loading Content="Loading..." IsLoading="{Binding #s.IsChecked}" />
-        </Panel>
     </Grid>
 </UserControl>

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

@@ -6,10 +6,11 @@
     <!--  Add Resources Here  -->
     <converters:BrushToColorConverter x:Key="BrushToColorConverter" />
     <ControlTheme x:Key="{x:Type u:LoadingIcon}" TargetType="u:LoadingIcon">
-        <Setter Property="Foreground" Value="{DynamicResource SemiBlue6}" />
+        <Setter Property="Foreground" Value="{DynamicResource LoadingIconForeground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="u:LoadingIcon">
                 <Arc
+                    Name="PART_Arc"
                     Width="20"
                     Height="20"
                     StartAngle="0"
@@ -21,7 +22,8 @@
                         <ConicGradientBrush Angle="70">
                             <GradientStops>
                                 <GradientStop Offset="0" Color="{Binding Foreground, Converter={StaticResource BrushToColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
-                                <GradientStop Offset="0.8" Color="Transparent" />
+                                <GradientStop Offset="0.2" Color="{Binding Foreground, Converter={StaticResource BrushToColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+                                <GradientStop Offset="0.6" Color="Transparent" />
                             </GradientStops>
                         </ConicGradientBrush>
                     </Arc.Stroke>
@@ -42,12 +44,20 @@
                 </Arc>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^.Small /template/ Arc#PART_Arc">
+            <Setter Property="Arc.Width" Value="14" />
+            <Setter Property="Arc.Height" Value="14" />
+            <Setter Property="Arc.StrokeThickness" Value="2" />
+        </Style>
+        <Style Selector="^.Large /template/ Arc#PART_Arc">
+            <Setter Property="Arc.Width" Value="32" />
+            <Setter Property="Arc.Height" Value="32" />
+            <Setter Property="Arc.StrokeThickness" Value="5" />
+        </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type u:Loading}" TargetType="u:Loading">
-        <Setter Property="Background">
+        <Setter Property="Background" Value="{DynamicResource LoadingMaskBackground}" />
-            <SolidColorBrush Opacity="0.13" Color="#2E3238" />
-        </Setter>
         <Setter Property="Indicator">
             <Template>
                 <u:LoadingIcon />
@@ -69,10 +79,42 @@
                             Name="PART_ContentPresenter"
                             Grid.Row="1"
                             Content="{TemplateBinding Content}"
-                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            IsVisible="{TemplateBinding Content,
+                                                        Converter={x:Static ObjectConverters.IsNotNull}}" />
                     </Grid>
                 </Panel>
             </ControlTemplate>
         </Setter>
     </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type u:LoadingContainer}" TargetType="u:LoadingContainer">
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Indicator">
+            <Template>
+                <u:LoadingIcon />
+            </Template>
+        </Setter>
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:LoadingContainer">
+                <Panel>
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    <u:Loading
+                        Content="{TemplateBinding LoadingMessage}"
+                        ContentTemplate="{TemplateBinding LoadingMessageTemplate}"
+                        Indicator="{TemplateBinding Indicator}"
+                        IsLoading="{TemplateBinding IsLoading}" />
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:loading /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Effect" Value="blur(5)" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>

src/Ursa.Themes.Semi/Converters/BrushToColorConverter.cs

@@ -1,4 +1,5 @@
 using System.Globalization;
+using Avalonia;
 using Avalonia.Data.Converters;
 using Avalonia.Media;
 
@@ -12,7 +13,7 @@ public class BrushToColorConverter: IValueConverter
         {
             return b.Color;
         }
-        return null;
+        return Colors.Transparent;
     }
 
     public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)

src/Ursa.Themes.Semi/Themes/Dark/Loading.axaml

@@ -0,0 +1,5 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="LoadingIconForeground" Color="#54A9FF" />
+    <SolidColorBrush x:Key="LoadingMaskBackground" Opacity="0.12" Color="White" />
+</ResourceDictionary>

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

@@ -5,6 +5,7 @@
         <MergeResourceInclude Source="Banner.axaml" />
         <MergeResourceInclude Source="Divider.axaml" />
         <MergeResourceInclude Source="IPv4Box.axaml" />
+        <MergeResourceInclude Source="Loading.axaml" />
         <MergeResourceInclude Source="NavigationMenu.axaml" />
         <MergeResourceInclude Source="Pagination.axaml" />
         <MergeResourceInclude Source="Timeline.axaml" />

src/Ursa.Themes.Semi/Themes/Light/Loading.axaml

@@ -0,0 +1,5 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="LoadingIconForeground" Color="#0077FA" />
+    <SolidColorBrush x:Key="LoadingMaskBackground" Opacity="0.05" Color="#2E3238" />
+</ResourceDictionary>

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

@@ -5,6 +5,7 @@
         <MergeResourceInclude Source="Banner.axaml" />
         <MergeResourceInclude Source="Divider.axaml" />
         <MergeResourceInclude Source="IPv4Box.axaml" />
+        <MergeResourceInclude Source="Loading.axaml" />
         <MergeResourceInclude Source="NavigationMenu.axaml" />
         <MergeResourceInclude Source="Pagination.axaml" />
         <MergeResourceInclude Source="Timeline.axaml" />

src/Ursa/Controls/Loading/LoadingContainer.cs

@@ -0,0 +1,59 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Templates;
+
+namespace Ursa.Controls;
+
+[PseudoClasses(PC_Loading)]
+public class LoadingContainer: ContentControl
+{
+    public const string PC_Loading = ":loading";
+    
+    public static readonly StyledProperty<object?> IndicatorProperty = AvaloniaProperty.Register<LoadingContainer, object?>(
+        nameof(Indicator));
+
+    public object? Indicator
+    {
+        get => GetValue(IndicatorProperty);
+        set => SetValue(IndicatorProperty, value);
+    }
+
+    public static readonly StyledProperty<object?> LoadingMessageProperty = AvaloniaProperty.Register<LoadingContainer, object?>(
+        nameof(LoadingMessage));
+
+    public object? LoadingMessage
+    {
+        get => GetValue(LoadingMessageProperty);
+        set => SetValue(LoadingMessageProperty, value);
+    }
+
+    public static readonly StyledProperty<IDataTemplate> LoadingMessageTemplateProperty = AvaloniaProperty.Register<LoadingContainer, IDataTemplate>(
+        nameof(LoadingMessageTemplate));
+
+    public IDataTemplate LoadingMessageTemplate
+    {
+        get => GetValue(LoadingMessageTemplateProperty);
+        set => SetValue(LoadingMessageTemplateProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> IsLoadingProperty = AvaloniaProperty.Register<LoadingContainer, bool>(
+        nameof(IsLoading));
+
+    public bool IsLoading
+    {
+        get => GetValue(IsLoadingProperty);
+        set => SetValue(IsLoadingProperty, value);
+    }
+
+    static LoadingContainer()
+    {
+        IsLoadingProperty.Changed.AddClassHandler<LoadingContainer>((x, e) => x.OnIsLoadingChanged(e));
+    }
+
+    private void OnIsLoadingChanged(AvaloniaPropertyChangedEventArgs args)
+    {
+        bool newValue = args.GetNewValue<bool>();
+        PseudoClasses.Set(PC_Loading, newValue);
+    }
+}