Add ProgressRing

samples/FAControlsGallery/Assets/FAControlsGroups.json

@@ -55,6 +55,20 @@
         "WinUINamespace": null,
         "WinUIDocsLink": null,
         "WinUIGuidelinesLink": null
+      },
+      {
+        "Header": "ProgressRing",
+        "Description": "Shows the app's progress on a task, or that the app is performing ongoing work that does block user interaction",
+        "IconResourceKey": "ProgressRingIcon",
+        "PageKey": "ProgressRing",
+        "SearchKeywords": [
+          "ProgressRing",
+          "Progress"
+        ],
+        "Namespace": "FluentAvalonia.UI.Controls.ProgressRing",
+        "WinUINamespace": "Microsoft.UI.Xaml.Controls.ProgressRing",
+        "WinUIDocsLink": null,
+        "WinUIGuidelinesLink": null
       }
     ]
   },

samples/FAControlsGallery/FAControlsGallery.csproj

@@ -21,7 +21,4 @@
   <ItemGroup>    
     <ProjectReference Include="..\..\src\FluentAvalonia\FluentAvalonia.csproj" />
   </ItemGroup>
-  <ItemGroup>
-    <UpToDateCheckInput Remove="Pages\FAControlsPages\RangeSliderPage.axaml" />
-  </ItemGroup>
 </Project>

samples/FAControlsGallery/Pages/FAControlsPages/ProgressRingPage.axaml

@@ -0,0 +1,63 @@
+<UserControl 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:ui="using:FluentAvalonia.UI.Controls"
+             xmlns:ctrls="using:FAControlsGallery.Controls"
+             xmlns:pg="using:FAControlsGallery.Pages"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="650"
+             x:Class="FAControlsGallery.Pages.ProgressRingPage">
+    <StackPanel Spacing="8">
+
+        <ctrls:ControlExample Header="An indeterminate progress ring">
+
+            <!-- This is set to False so it doesn't run in designer. Changed to true in code-->
+            <ui:ProgressRing Width="80" Height="80"
+                             Name="IndetRing"
+                             IsIndeterminate="True" />
+
+            <ctrls:ControlExample.Options>
+                <StackPanel Spacing="8">
+                    <TextBlock Text="BackgroundColor" />
+                    <ColorPicker Color="Transparent"
+                                 Name="CPIndet"
+                                 ColorChanged="ColorPicker_ColorChanged"/>
+                </StackPanel>
+            </ctrls:ControlExample.Options>
+
+            <ctrls:ControlExample.XamlSource>
+                <x:String xml:space="preserve">
+&lt;ui:ProgressRing /&gt;
+                </x:String>                
+            </ctrls:ControlExample.XamlSource>
+        </ctrls:ControlExample>
+
+        <ctrls:ControlExample Header="An determinate progress ring">
+
+            <ui:ProgressRing Width="80" Height="80"
+                             Value="25"
+                             Name="DetRing"
+                             IsIndeterminate="False" />
+
+            <ctrls:ControlExample.Options>
+                <StackPanel Spacing="8">
+                    <ui:NumberBox Width="150" Name="Slider"
+                                  Minimum="0" Maximum="100"
+                                  SpinButtonPlacementMode="Inline"
+                                  Value="{Binding #DetRing.Value, Mode=TwoWay}"
+                                  Header="Value"/>
+                    <TextBlock Text="BackgroundColor" />
+                    <ColorPicker Color="Transparent" 
+                                 Name="CP1"
+                                 ColorChanged="ColorPicker_ColorChanged"/>
+                </StackPanel>
+            </ctrls:ControlExample.Options>
+
+            <ctrls:ControlExample.XamlSource>
+                <x:String xml:space="preserve">
+&lt;ui:ProgressRing IsIndeterminate="False"/&gt;
+                </x:String>
+            </ctrls:ControlExample.XamlSource>
+        </ctrls:ControlExample>
+    </StackPanel>
+</UserControl>

samples/FAControlsGallery/Pages/FAControlsPages/ProgressRingPage.axaml.cs

@@ -0,0 +1,37 @@
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Media.Immutable;
+
+namespace FAControlsGallery.Pages;
+
+public partial class ProgressRingPage : ControlsPageBase
+{
+    public ProgressRingPage()
+    {
+        InitializeComponent();
+    }
+
+    protected override void OnLoaded(RoutedEventArgs e)
+    {
+        base.OnLoaded(e);
+        IndetRing.IsIndeterminate = true;
+    }
+
+    protected override void OnUnloaded(RoutedEventArgs e)
+    {
+        base.OnUnloaded(e);
+        IndetRing.IsIndeterminate = false;
+    }
+
+    private void ColorPicker_ColorChanged(object sender, ColorChangedEventArgs e)
+    {
+        if (sender == CPIndet)
+        {
+            IndetRing.Background = new ImmutableSolidColorBrush(e.NewColor);
+        }
+        else if (sender == CP1)
+        {
+            DetRing.Background = new ImmutableSolidColorBrush(e.NewColor);
+        }
+    }
+}

samples/FAControlsGallery/Styling/Resources.axaml

@@ -107,6 +107,7 @@
     <ui:ImageIconSource x:Key="InfoBadgeIcon" Source="avares://FAControlsGallery/Assets/Icons/InfoBadgeIcon.png" />
     <ui:ImageIconSource x:Key="SettingsExpanderIcon" Source="avares://FAControlsGallery/Assets/Icons/SettingsExpanderIcon.png" />
     <ui:ImageIconSource x:Key="RangeSliderIcon" Source="avares://FAControlsGallery/Assets/Icons/RangeSliderIcon.png" />
+    <ui:ImageIconSource x:Key="ProgressRingIcon" Source="avares://FAControlsGallery/Assets/Icons/ProgressRingIcon.png" />
 
     <ui:ImageIconSource x:Key="SourceCodeIcon">
         <ui:ImageIconSource.Source>

samples/FAControlsGallery/ViewModels/MainViewViewModel.cs

@@ -207,7 +207,8 @@ private Control ResolvePage(PageBaseViewModel pbvm)
         { "InfoBar", () => new InfoBarPage() },
         { "InfoBadge", () => new InfoBadgePage() },
         { "SettingsExpander", () => new SettingsExpanderPage() },
-        { "RangeSlider", () => new RangeSliderPage() }
+        { "RangeSlider", () => new RangeSliderPage() },
+        { "ProgressRing", () => new ProgressRingPage() }
     };
 }
 

src/FluentAvalonia/Styling/ControlThemes/Controls.axaml

@@ -114,6 +114,8 @@
                 <MergeResourceInclude Source="/Styling/ControlThemes/FAControls/AppWindowStyles.axaml" />
 
                 <MergeResourceInclude Source="/Styling/ControlThemes/FAControls/RangeSliderStyles.axaml" />
+
+                <MergeResourceInclude Source="/Styling/ControlThemes/FAControls/ProgressRingStyles.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>

src/FluentAvalonia/Styling/ControlThemes/FAControls/ProgressRingStyles.axaml

@@ -0,0 +1,28 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:ui="using:FluentAvalonia.UI.Controls"
+                    xmlns:uip="using:FluentAvalonia.UI.Controls.Primitives">
+
+    <ControlTheme TargetType="ui:ProgressRing"
+                  x:Key="{x:Type ui:ProgressRing}">
+        <Setter Property="Foreground" Value="{DynamicResource AccentFillColorDefaultBrush}" />
+        <Setter Property="Background" Value="{DynamicResource ControlFillColorTransparentBrush}" />
+        <Setter Property="IsHitTestVisible" Value="False" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="MinHeight" Value="16" />
+        <Setter Property="MinWidth" Value="16" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="Width" Value="32" />
+        <Setter Property="Height" Value="32" />
+        <Setter Property="Maximum" Value="100" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Panel Background="Transparent">
+                    <uip:ProgressRingAnimatedVisual Name="AnimatedVisual" />
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+</ResourceDictionary>

src/FluentAvalonia/UI/Controls/ProgressRing/ProgressRing.cs

@@ -0,0 +1,88 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Primitives;
+using Avalonia.Media;
+using FluentAvalonia.UI.Controls.Primitives;
+
+namespace FluentAvalonia.UI.Controls;
+
+[TemplatePart(_tpAnimatedVisual, typeof(ProgressRingAnimatedVisual))]
+public class ProgressRing : RangeBase
+{
+    /// <summary>
+    /// Defines the <see cref="IsActive"/> property
+    /// </summary>
+    public static readonly StyledProperty<bool> IsActiveProperty =
+        AvaloniaProperty.Register<ProgressRing, bool>(nameof(IsActive), true);
+
+    /// <summary>
+    /// Defines the <see cref="IsIndeterminate"/> property
+    /// </summary>
+    public static readonly StyledProperty<bool> IsIndeterminateProperty =
+        ProgressBar.IsIndeterminateProperty.AddOwner<ProgressRing>(
+            new StyledPropertyMetadata<bool>(defaultValue: true));
+
+    /// <summary>
+    /// Gets or sets a value that indicates whether the ProgressRing is showing progress
+    /// </summary>
+    public bool IsActive
+    {
+        get => GetValue(IsActiveProperty);
+        set => SetValue(IsActiveProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets a value that indicates whether the progress ring reports generic progress 
+    /// with a repeating pattern or reports progress based on the Value property.
+    /// </summary>
+    public bool IsIndeterminate
+    {
+        get => GetValue(IsIndeterminateProperty);
+        set => SetValue(IsIndeterminateProperty, value);
+    }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        _animatedVisualSource = e.NameScope.Get<ProgressRingAnimatedVisual>(_tpAnimatedVisual);
+    }
+
+    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
+    {
+        base.OnPropertyChanged(change);
+
+        if (change.Property == ValueProperty)
+        {
+            _animatedVisualSource?.SetValue(change.GetNewValue<double>());
+        }
+        else if (change.Property == MinimumProperty)
+        {
+            _animatedVisualSource?.SetMinimum(change.GetNewValue<double>());
+        }
+        else if (change.Property == MaximumProperty)
+        {
+            _animatedVisualSource?.SetMaximum(change.GetNewValue<double>());
+        }
+        else if (change.Property == IsIndeterminateProperty)
+        {
+            _animatedVisualSource?.SetIndeterminate(change.GetNewValue<bool>());
+        }
+        else if (change.Property == IsActiveProperty)
+        {
+            _animatedVisualSource?.SetActive(change.GetNewValue<bool>());
+        }
+        else if (change.Property == ForegroundProperty)
+        {
+            _animatedVisualSource?.SetForeground((IBrush)change.NewValue);
+        }
+        else if (change.Property == BackgroundProperty)
+        {
+            _animatedVisualSource?.SetBackground((IBrush)change.NewValue);
+        }
+    }
+
+    private ProgressRingAnimatedVisual _animatedVisualSource;
+
+    private const string _tpAnimatedVisual = "AnimatedVisual";
+}