Merge pull request #21 from irihitech/20-loading

20 loading

demo/Ursa.Demo/Pages/LoadingDemo.axaml

@@ -0,0 +1,25 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.LoadingDemo"
+    xmlns="https://github.com/avaloniaui"
+    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:u="https://irihi.tech/ursa"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <Grid RowDefinitions="Auto, Auto, *">
+        <ToggleSwitch Name="s" Content="Loading" />
+        <StackPanel Grid.Row="1" Orientation="Horizontal">
+            <u:LoadingIcon Classes="Small" />
+            <u:LoadingIcon />
+            <u:LoadingIcon Classes="Large" />
+        </StackPanel>
+        <u:LoadingContainer
+            Grid.Row="2"
+            IsLoading="{Binding #s.IsChecked}"
+            LoadingMessage="Loading...">
+            <Calendar />
+        </u:LoadingContainer>
+    </Grid>
+</UserControl>

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

@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Ursa.Demo.Pages;
+
+public partial class LoadingDemo : UserControl
+{
+    public LoadingDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}

demo/Ursa.Demo/Views/MainWindow.axaml

@@ -35,6 +35,9 @@
             <TabItem Header="IPv4Box">
                 <pages:IPv4BoxDemo />
             </TabItem>
+            <TabItem Header="Loading">
+                <pages:LoadingDemo />
+            </TabItem>
             <TabItem Header="Navigation">
                 <pages:NavigationMenuDemo />
             </TabItem>

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

@@ -0,0 +1,120 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Ursa.Themes.Semi.Converters"
+    xmlns:u="clr-namespace:Ursa.Controls;assembly=Ursa">
+    <!--  Add Resources Here  -->
+    <converters:BrushToColorConverter x:Key="BrushToColorConverter" />
+    <ControlTheme x:Key="{x:Type u:LoadingIcon}" TargetType="u:LoadingIcon">
+        <Setter Property="Foreground" Value="{DynamicResource LoadingIconForeground}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:LoadingIcon">
+                <Arc
+                    Name="PART_Arc"
+                    Width="20"
+                    Height="20"
+                    StartAngle="0"
+                    StrokeJoin="Round"
+                    StrokeLineCap="Round"
+                    StrokeThickness="3"
+                    SweepAngle="300">
+                    <Arc.Stroke>
+                        <ConicGradientBrush Angle="70">
+                            <GradientStops>
+                                <GradientStop Offset="0" Color="{Binding Foreground, Converter={StaticResource BrushToColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+                                <GradientStop Offset="0.2" Color="{Binding Foreground, Converter={StaticResource BrushToColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+                                <GradientStop Offset="0.6" Color="Transparent" />
+                            </GradientStops>
+                        </ConicGradientBrush>
+                    </Arc.Stroke>
+                    <Arc.Styles>
+                        <Style Selector="Arc">
+                            <Style.Animations>
+                                <Animation IterationCount="Infinite" Duration="0:0:0.5">
+                                    <KeyFrame Cue="0%">
+                                        <Setter Property="RotateTransform.Angle" Value="0.0" />
+                                    </KeyFrame>
+                                    <KeyFrame Cue="100%">
+                                        <Setter Property="RotateTransform.Angle" Value="-360.0" />
+                                    </KeyFrame>
+                                </Animation>
+                            </Style.Animations>
+                        </Style>
+                    </Arc.Styles>
+                </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" Value="{DynamicResource LoadingMaskBackground}" />
+        <Setter Property="Indicator">
+            <Template>
+                <u:LoadingIcon />
+            </Template>
+        </Setter>
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:Loading">
+                <Panel IsVisible="{TemplateBinding IsLoading}">
+                    <Border
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{TemplateBinding Background}" />
+                    <Grid
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        RowDefinitions="Auto, *">
+                        <ContentPresenter HorizontalAlignment="Center" Content="{TemplateBinding Indicator}" />
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
+                            Grid.Row="1"
+                            Content="{TemplateBinding Content}"
+                            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/Controls/_index.axaml

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

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

@@ -0,0 +1,23 @@
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace Ursa.Themes.Semi.Converters;
+
+public class BrushToColorConverter: IValueConverter
+{
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is ISolidColorBrush b)
+        {
+            return b.Color;
+        }
+        return Colors.Transparent;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

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/Loading.cs

@@ -0,0 +1,26 @@
+using Avalonia;
+using Avalonia.Controls;
+
+namespace Ursa.Controls;
+
+public class Loading: ContentControl
+{
+    public static readonly StyledProperty<object?> IndicatorProperty = AvaloniaProperty.Register<Loading, object?>(
+        nameof(Indicator));
+
+    public object? Indicator
+    {
+        get => GetValue(IndicatorProperty);
+        set => SetValue(IndicatorProperty, value);
+    }
+
+    public static readonly StyledProperty<object?> IsLoadingProperty = AvaloniaProperty.Register<Loading, object?>(
+        nameof(IsLoading));
+
+    public object? IsLoading
+    {
+        get => GetValue(IsLoadingProperty);
+        set => SetValue(IsLoadingProperty, value);
+    }
+    
+}

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);
+    }
+}

src/Ursa/Controls/Loading/LoadingIcon.cs

@@ -0,0 +1,8 @@
+using Avalonia.Controls;
+
+namespace Ursa.Controls;
+
+public class LoadingIcon: ContentControl
+{
+    
+}