Add custom UI controls to CrissCross.Avalonia.UI

Introduces several new controls including FluentNavigationWindow, Gauges, GifImage, InfoBadge, LoadingScreen, ModernWindow, NumberPad, NumericPushButton, PersonPicture, ProgressRing, RatingControl, ThumbRate, TitleBar, and VirtualizingWrapPanel. These controls provide enhanced UI features such as navigation, data visualization, loading overlays, modern window styling, numeric input, person display, progress indication, rating, and virtualized layouts for Avalonia applications.

Author: ChrisPulman

src/CrissCross.Avalonia.UI/Controls/FluentNavigationWindow/FluentNavigationWindow.cs

@@ -0,0 +1,29 @@
+// Copyright (c) 2019-2025 ReactiveUI Association Incorporated. All rights reserved.
+// ReactiveUI Association Incorporated licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for full license information.
+
+using Avalonia;
+
+namespace CrissCross.Avalonia.UI.Controls;
+
+/// <summary>
+/// A Fluent Window with integrated navigation support.
+/// </summary>
+public class FluentNavigationWindow : FluentWindow
+{
+    /// <summary>
+    /// Property for <see cref="NavigationView"/>.
+    /// </summary>
+    public static readonly StyledProperty<NavigationView?> NavigationViewProperty =
+        AvaloniaProperty.Register<FluentNavigationWindow, NavigationView?>(
+            nameof(NavigationView), null);
+
+    /// <summary>
+    /// Gets or sets the navigation view for this window.
+    /// </summary>
+    public NavigationView? NavigationView
+    {
+        get => GetValue(NavigationViewProperty);
+        set => SetValue(NavigationViewProperty, value);
+    }
+}

src/CrissCross.Avalonia.UI/Controls/Gauges/Gauges.cs

@@ -0,0 +1,30 @@
+// Copyright (c) 2019-2025 ReactiveUI Association Incorporated. All rights reserved.
+// ReactiveUI Association Incorporated licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for full license information.
+
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+
+namespace CrissCross.Avalonia.UI.Controls;
+
+/// <summary>
+/// Represents a collection of gauge controls for data visualization.
+/// </summary>
+public class Gauges : TemplatedControl
+{
+    /// <summary>
+    /// Property for <see cref="Value"/>.
+    /// </summary>
+    public static readonly StyledProperty<double> ValueProperty =
+        AvaloniaProperty.Register<Gauges, double>(nameof(Value), 0.0);
+
+    /// <summary>
+    /// Gets or sets the gauge value.
+    /// </summary>
+    public double Value
+    {
+        get => GetValue(ValueProperty);
+        set => SetValue(ValueProperty, value);
+    }
+}

src/CrissCross.Avalonia.UI/Controls/GifImage/GifImage.cs

@@ -0,0 +1,44 @@
+// Copyright (c) 2019-2025 ReactiveUI Association Incorporated. All rights reserved.
+// ReactiveUI Association Incorporated licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for full license information.
+
+using Avalonia;
+using Avalonia.Media;
+
+namespace CrissCross.Avalonia.UI.Controls;
+
+/// <summary>
+/// Represents an image with additional properties.
+/// </summary>
+public class GifImage : global::Avalonia.Controls.Image
+{
+    /// <summary>
+    /// Property for <see cref="CornerRadius"/>.
+    /// </summary>
+    public static readonly StyledProperty<CornerRadius> CornerRadiusProperty = AvaloniaProperty.Register<GifImage, CornerRadius>(
+        nameof(CornerRadius), new CornerRadius(0));
+
+    /// <summary>
+    /// Property for <see cref="StretchDirection"/>.
+    /// </summary>
+    public static readonly StyledProperty<StretchDirection> StretchDirectionProperty = AvaloniaProperty.Register<GifImage, StretchDirection>(
+        nameof(StretchDirection), StretchDirection.Both);
+
+    /// <summary>
+    /// Gets or sets the CornerRadius.
+    /// </summary>
+    public CornerRadius CornerRadius
+    {
+        get => GetValue(CornerRadiusProperty);
+        set => SetValue(CornerRadiusProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the stretch direction.
+    /// </summary>
+    public StretchDirection StretchDirection
+    {
+        get => GetValue(StretchDirectionProperty);
+        set => SetValue(StretchDirectionProperty, value);
+    }
+}

src/CrissCross.Avalonia.UI/Controls/InfoBadge/InfoBadge.cs

@@ -0,0 +1,73 @@
+// Copyright (c) 2019-2025 ReactiveUI Association Incorporated. All rights reserved.
+// ReactiveUI Association Incorporated licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for full license information.
+
+using Avalonia;
+
+namespace CrissCross.Avalonia.UI.Controls;
+
+/// <summary>
+/// InfoBadge, a control that displays a small amount of information, typically a number or a small piece of text, in a compact way.
+/// </summary>
+public class InfoBadge : global::Avalonia.Controls.Control
+{
+    /// <summary>
+    /// Property for <see cref="Severity"/>.
+    /// </summary>
+    public static readonly StyledProperty<InfoBadgeSeverity> SeverityProperty = AvaloniaProperty.Register<InfoBadge, InfoBadgeSeverity>(
+        nameof(Severity), InfoBadgeSeverity.Informational);
+
+    /// <summary>
+    /// Property for <see cref="Value"/>.
+    /// </summary>
+    public static readonly StyledProperty<string> ValueProperty = AvaloniaProperty.Register<InfoBadge, string>(
+        nameof(Value), string.Empty);
+
+    /// <summary>
+    /// Property for <see cref="CornerRadius"/>.
+    /// </summary>
+    public static readonly StyledProperty<CornerRadius> CornerRadiusProperty = AvaloniaProperty.Register<InfoBadge, CornerRadius>(
+        nameof(CornerRadius), new CornerRadius(8));
+
+    /// <summary>
+    /// Property for <see cref="Icon"/>.
+    /// </summary>
+    public static readonly StyledProperty<object> IconProperty = AvaloniaProperty.Register<InfoBadge, object>(
+        nameof(Icon), null);
+
+    /// <summary>
+    /// Gets or sets the severity.
+    /// </summary>
+    public InfoBadgeSeverity Severity
+    {
+        get => GetValue(SeverityProperty);
+        set => SetValue(SeverityProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the value.
+    /// </summary>
+    public string Value
+    {
+        get => GetValue(ValueProperty);
+        set => SetValue(ValueProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the corner radius.
+    /// </summary>
+    public CornerRadius CornerRadius
+    {
+        get => GetValue(CornerRadiusProperty);
+        set => SetValue(CornerRadiusProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the icon.
+    /// </summary>
+    public object? Icon
+    {
+        get => GetValue(IconProperty);
+        set => SetValue(IconProperty, value);
+    }
+}

src/CrissCross.Avalonia.UI/Controls/LoadingScreen/LoadingScreen.cs

@@ -0,0 +1,30 @@
+// Copyright (c) 2019-2025 ReactiveUI Association Incorporated. All rights reserved.
+// ReactiveUI Association Incorporated licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for full license information.
+
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+
+namespace CrissCross.Avalonia.UI.Controls;
+
+/// <summary>
+/// Represents a loading screen overlay control.
+/// </summary>
+public class LoadingScreen : TemplatedControl
+{
+    /// <summary>
+    /// Property for <see cref="IsLoading"/>.
+    /// </summary>
+    public static readonly StyledProperty<bool> IsLoadingProperty =
+        AvaloniaProperty.Register<LoadingScreen, bool>(nameof(IsLoading), false);
+
+    /// <summary>
+    /// Gets or sets a value indicating whether the loading screen is visible.
+    /// </summary>
+    public bool IsLoading
+    {
+        get => GetValue(IsLoadingProperty);
+        set => SetValue(IsLoadingProperty, value);
+    }
+}

src/CrissCross.Avalonia.UI/Controls/ModernWindow/ModernWindow.cs

@@ -0,0 +1,23 @@
+// Copyright (c) 2019-2025 ReactiveUI Association Incorporated. All rights reserved.
+// ReactiveUI Association Incorporated licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for full license information.
+
+using Avalonia.Controls;
+
+namespace CrissCross.Avalonia.UI.Controls;
+
+/// <summary>
+/// A modern styled Window.
+/// </summary>
+public class ModernWindow : Window
+{
+    /// <summary>
+    /// Initializes a new instance of the <see cref="ModernWindow"/> class.
+    /// </summary>
+    public ModernWindow()
+    {
+        // Configure window for modern appearance
+        SystemDecorations = SystemDecorations.BorderOnly;
+        TransparencyLevelHint = new[] { WindowTransparencyLevel.AcrylicBlur };
+    }
+}

src/CrissCross.Avalonia.UI/Controls/NumberPad/NumberPad.cs

@@ -0,0 +1,24 @@
+// Copyright (c) 2019-2025 ReactiveUI Association Incorporated. All rights reserved.
+// ReactiveUI Association Incorporated licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for full license information.
+
+using Avalonia.Controls;
+using Avalonia.Layout;
+
+namespace CrissCross.Avalonia.UI.Controls;
+
+/// <summary>
+/// Represents a numeric keypad control for number input.
+/// </summary>
+public class NumberPad : Grid
+{
+    /// <summary>
+    /// Initializes a new instance of the <see cref="NumberPad"/> class.
+    /// </summary>
+    public NumberPad()
+    {
+        // 4x3 grid for standard number pad layout
+        RowDefinitions = new RowDefinitions("*,*,*,*");
+        ColumnDefinitions = new ColumnDefinitions("*,*,*");
+    }
+}

src/CrissCross.Avalonia.UI/Controls/NumericPushButton/NumericPushButton.cs

@@ -0,0 +1,29 @@
+// Copyright (c) 2019-2025 ReactiveUI Association Incorporated. All rights reserved.
+// ReactiveUI Association Incorporated licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for full license information.
+
+using Avalonia;
+using Avalonia.Controls;
+
+namespace CrissCross.Avalonia.UI.Controls;
+
+/// <summary>
+/// Represents a button with numeric increment/decrement functionality.
+/// </summary>
+public class NumericPushButton : Button
+{
+    /// <summary>
+    /// Property for <see cref="NumericValue"/>.
+    /// </summary>
+    public static readonly StyledProperty<double> NumericValueProperty =
+        AvaloniaProperty.Register<NumericPushButton, double>(nameof(NumericValue), 0.0);
+
+    /// <summary>
+    /// Gets or sets the numeric value.
+    /// </summary>
+    public double NumericValue
+    {
+        get => GetValue(NumericValueProperty);
+        set => SetValue(NumericValueProperty, value);
+    }
+}

src/CrissCross.Avalonia.UI/Controls/PersonPicture/PersonPicture.cs

@@ -0,0 +1,103 @@
+// Copyright (c) 2019-2025 ReactiveUI Association Incorporated. All rights reserved.
+// ReactiveUI Association Incorporated licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for full license information.
+
+using Avalonia;
+
+namespace CrissCross.Avalonia.UI.Controls;
+
+/// <summary>
+/// PersonPicture.
+/// </summary>
+public class PersonPicture : global::Avalonia.Controls.Control
+{
+    /// <summary>
+    /// Property for <see cref="DisplayName"/>.
+    /// </summary>
+    public static readonly StyledProperty<string> DisplayNameProperty = AvaloniaProperty.Register<PersonPicture, string>(
+        nameof(DisplayName), string.Empty);
+
+    /// <summary>
+    /// Property for <see cref="Initials"/>.
+    /// </summary>
+    public static readonly StyledProperty<string> InitialsProperty = AvaloniaProperty.Register<PersonPicture, string>(
+        nameof(Initials), string.Empty);
+
+    /// <summary>
+    /// Property for <see cref="IsGroup"/>.
+    /// </summary>
+    public static readonly StyledProperty<bool> IsGroupProperty = AvaloniaProperty.Register<PersonPicture, bool>(
+        nameof(IsGroup), false);
+
+    /// <summary>
+    /// Property for <see cref="BadgeNumber"/>.
+    /// </summary>
+    public static readonly StyledProperty<int> BadgeNumberProperty = AvaloniaProperty.Register<PersonPicture, int>(
+        nameof(BadgeNumber), 0);
+
+    /// <summary>
+    /// Property for <see cref="BadgeGlyph"/>.
+    /// </summary>
+    public static readonly StyledProperty<string> BadgeGlyphProperty = AvaloniaProperty.Register<PersonPicture, string>(
+        nameof(BadgeGlyph), string.Empty);
+
+    /// <summary>
+    /// Property for <see cref="BadgeText"/>.
+    /// </summary>
+    public static readonly StyledProperty<string> BadgeTextProperty = AvaloniaProperty.Register<PersonPicture, string>(
+        nameof(BadgeText), string.Empty);
+
+    /// <summary>
+    /// Gets or sets the display name.
+    /// </summary>
+    public string DisplayName
+    {
+        get => GetValue(DisplayNameProperty);
+        set => SetValue(DisplayNameProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the initials.
+    /// </summary>
+    public string Initials
+    {
+        get => GetValue(InitialsProperty);
+        set => SetValue(InitialsProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets a value indicating whether this is a group.
+    /// </summary>
+    public bool IsGroup
+    {
+        get => GetValue(IsGroupProperty);
+        set => SetValue(IsGroupProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the badge number.
+    /// </summary>
+    public int BadgeNumber
+    {
+        get => GetValue(BadgeNumberProperty);
+        set => SetValue(BadgeNumberProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the badge glyph.
+    /// </summary>
+    public string BadgeGlyph
+    {
+        get => GetValue(BadgeGlyphProperty);
+        set => SetValue(BadgeGlyphProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the badge text.
+    /// </summary>
+    public string BadgeText
+    {
+        get => GetValue(BadgeTextProperty);
+        set => SetValue(BadgeTextProperty, value);
+    }
+}