properly size up and add to settings page
MODIFY
WalletWasabi.Fluent/Controls/ProgressRing.xaml
WalletWasabi.Fluent/Controls/ProgressRing.xaml
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="using:WalletWasabi.Fluent.Controls">
+ <Styles.Resources>
+ <SolidColorBrush x:Key="ProgressRingForeground" Color="{StaticResource SystemAccentColor}"/>
+ </Styles.Resources>
<Style Selector="c|ProgressRing">
+ <Setter Property="Foreground" Value="{StaticResource ProgressRingForeground}"/>
+ <Setter Property="Background" Value="{StaticResource TextControlBackground}"/>
<Setter Property="Template">
<ControlTemplate>
<Panel>
- <c:ProgressRingArc />
- <Panel>
+
+ <c:ProgressRingArc StrokeThickness="{TemplateBinding StrokeThickness}"
+ SegmentColor="{TemplateBinding Background}"/>
+
+ <c:ProgressRingArc StrokeThickness="{TemplateBinding StrokeThickness}"
+ SegmentColor="{TemplateBinding Foreground}"
+ Percentage="{TemplateBinding Percentage}"
+ IsVisible="{Binding !IsIndeterminate, RelativeSource={RelativeSource TemplatedParent}}"/>
+
+ <Panel IsVisible="{TemplateBinding IsIndeterminate}">
<Panel.RenderTransform>
<RotateTransform Angle="180"/>
</Panel.RenderTransform>
- <c:ProgressRingArc Classes="ActiveRingArc1" Percentage="0.20" SegmentColor="{StaticResource SystemAccentColor}" />
+ <c:ProgressRingArc Classes="IndeterminateRing"
+ Percentage="0.20"
+ StrokeThickness="{TemplateBinding StrokeThickness}"
+ SegmentColor="{TemplateBinding Foreground}" />
</Panel>
- <c:ProgressRingArc Classes="ActiveRingArc1" Percentage="0.20" SegmentColor="{StaticResource SystemAccentColor}" />
+
+ <c:ProgressRingArc IsVisible="{TemplateBinding IsIndeterminate}"
+ Classes="IndeterminateRing"
+ Percentage="0.20"
+ StrokeThickness="{TemplateBinding StrokeThickness}"
+ SegmentColor="{TemplateBinding Foreground}" />
</Panel>
</ControlTemplate>
</Setter>
</Style>
- <Style Selector="c|ProgressRing /template/ c|ProgressRingArc.ActiveRingArc1">
+ <Style Selector="c|ProgressRing:indeterminate /template/ c|ProgressRingArc.IndeterminateRing">
<Style.Animations>
- <Animation Duration="1.2" IterationCount="Infinite" Easing="CubicEaseIn">
- <KeyFrame Cue="0%">
+ <Animation Duration="0:0:1" IterationCount="Infinite">
+ <KeyFrame Cue="0%" KeySpline="0.4,0,0.6,1">
<Setter Property="(RotateTransform.Angle)" Value="0" />
- <Setter Property="Opacity" Value="0"/>
- </KeyFrame>
- <KeyFrame Cue="45%">
- <Setter Property="Opacity" Value="1" />
- </KeyFrame>
- <KeyFrame Cue="55%">
- <Setter Property="Opacity" Value="1" />
</KeyFrame>
- <KeyFrame Cue="100%">
+ <KeyFrame Cue="100%" KeySpline="0.4,0,0.6,1">
<Setter Property="(RotateTransform.Angle)" Value="360" />
- <Setter Property="Opacity" Value="0" />
</KeyFrame>
</Animation>
</Style.Animations>

MODIFY
WalletWasabi.Fluent/Controls/ProgressRing.xaml.cs
WalletWasabi.Fluent/Controls/ProgressRing.xaml.cs
@@ -6,6 +6,51 @@ namespace WalletWasabi.Fluent.Controls
{
public class ProgressRing : TemplatedControl
{
+ public static readonly StyledProperty<bool> IsIndeterminateProperty =
+ AvaloniaProperty.Register<ProgressRing, bool>("IsIndeterminate");
+ public static readonly StyledProperty<double> PercentageProperty =
+ AvaloniaProperty.Register<ProgressRing, double>("Percentage");
+
+ public static readonly StyledProperty<double> AngleProperty =
+ AvaloniaProperty.Register<ProgressRing, double>("Angle");
+
+ public static readonly StyledProperty<double> StrokeThicknessProperty =
+ AvaloniaProperty.Register<ProgressRing, double>("StrokeThickness");
+
+ protected override void OnPropertyChanged<T>(AvaloniaPropertyChangedEventArgs<T> change)
+ {
+ base.OnPropertyChanged(change);
+ UpdatePseudoClasses();
+ }
+
+ private void UpdatePseudoClasses()
+ {
+ PseudoClasses.Set(":indeterminate", IsIndeterminate);
+ }
+
+ public bool IsIndeterminate
+ {
+ get => GetValue(IsIndeterminateProperty);
+ set => SetValue(IsIndeterminateProperty, value);
+ }
+
+ public double Percentage
+ {
+ get => GetValue(PercentageProperty);
+ set => SetValue(PercentageProperty, value);
+ }
+
+ public double Angle
+ {
+ get => GetValue(AngleProperty);
+ set => SetValue(AngleProperty, value);
+ }
+
+ public double StrokeThickness
+ {
+ get => GetValue(StrokeThicknessProperty);
+ set => SetValue(StrokeThicknessProperty, value);
+ }
}
}

MODIFY
WalletWasabi.Fluent/Controls/ProgressRingArc.xaml.cs
WalletWasabi.Fluent/Controls/ProgressRingArc.xaml.cs
using System;
-using System.Collections;
-using System.Collections.Generic;
-using System.Globalization;
-using System.Linq;
-using System.Reactive.Disposables;
-using System.Threading;
-using System.Threading.Tasks;
-using System.Windows.Input;
using Avalonia;
using Avalonia.Media;
-using Avalonia.Controls;
using Avalonia.Controls.Primitives;
-using Avalonia.Data;
-using Avalonia.Input;
-using Avalonia.Interactivity;
-using Avalonia.Markup.Xaml;
-using Avalonia.Threading;
namespace WalletWasabi.Fluent.Controls
{
@@ -29,9 +15,6 @@ namespace WalletWasabi.Fluent.Controls
private Size _arcSegmentSize;
private bool _arcSegmentIsLargeArc;
- public static readonly StyledProperty<int> RadiusProperty =
- AvaloniaProperty.Register<ProgressRingArc, int>(nameof(Radius), 35);
-
public static readonly StyledProperty<IBrush> SegmentColorProperty =
AvaloniaProperty.Register<ProgressRingArc, IBrush>(nameof(SegmentColor), Brushes.Gray);
@@ -79,11 +62,7 @@ namespace WalletWasabi.Fluent.Controls
o => o.ArcSegmentIsLargeArc,
(o, v) => o.ArcSegmentIsLargeArc = v);
- public int Radius
- {
- get => GetValue(RadiusProperty);
- set => SetValue(RadiusProperty, value);
- }
+ private double _radius;
public IBrush SegmentColor
{
@@ -159,23 +138,31 @@ namespace WalletWasabi.Fluent.Controls
RenderArc();
}
+ protected override Size MeasureOverride(Size availableSize)
+ {
+ _radius = (availableSize.Height / 2) - StrokeThickness;
+ RenderArc();
+ return new Size(_radius * 2, _radius * 2);
+ }
+
private void RenderArc()
{
- var startPoint = new Point(Radius, 0);
- var endPoint = ComputeCartesianCoordinate(Angle, Radius);
- endPoint += new Point(Radius, Radius);
+ var startPoint = new Point(_radius, 0);
+ var endPoint = ComputeCartesianCoordinate(Angle, _radius);
+ endPoint += new Point(_radius, _radius);
- PathFigureWidth = Radius * 2 + StrokeThickness;
- PathFigureHeight = Radius * 2 + StrokeThickness;
+ PathFigureWidth = (int) _radius * 2 + StrokeThickness;
+ PathFigureHeight = (int) _radius * 2 + StrokeThickness;
PathFigureMargin = new Thickness(StrokeThickness, StrokeThickness, 0, 0);
var largeArc = Angle > 180.0;
- var outerArcSize = new Size(Radius, Radius);
+ var outerArcSize = new Size(_radius, _radius);
PathFigureStartPoint = startPoint;
- if (Math.Abs(startPoint.X - Math.Round(endPoint.X)) < 0.01 && Math.Abs(startPoint.Y - Math.Round(endPoint.Y)) < 0.01)
+ if (Math.Abs(startPoint.X - Math.Round(endPoint.X)) < 0.01 &&
+ Math.Abs(startPoint.Y - Math.Round(endPoint.Y)) < 0.01)
{
endPoint -= new Point(0.01, 0);
}

MODIFY
WalletWasabi.Fluent/Views/SettingsPageView.axaml
WalletWasabi.Fluent/Views/SettingsPageView.axaml
<Button Command="{Binding OpenDialogCommand}" Content="Open Dialog" />
<Button Command="{Binding OpenDialogScreenCommand}" Content="Open Dialog Screen" />
<Button Command="{Binding ChangeThemeCommand}" Content="Change Theme" />
+ <c:ProgressRing Height="100" Width="100" IsIndeterminate="True"/>
</StackPanel>
</c:ContentArea>
</UserControl>
\ No newline at end of file

properly size up and add to settings page