Table of Contents

Class SVGButton

Namespace
VisioForge.Core.UI.MAUI
Assembly
VisioForge.Core.UI.MAUI.dll

A scalable vector graphics button control for .NET MAUI that renders SVG assets with platform-specific touch/pointer handling.

public class SVGButton : SKCanvasView, INotifyPropertyChanged, IVisualTreeElement, IEffectControlProvider, IToolTipElement, IContextFlyoutElement, IAnimatable, IGestureController, IGestureRecognizers, IPropertyMapperView, IHotReloadableView, IReplaceableView, ISKCanvasView, IView, IElement, ITransform, ISKCanvasViewController, IViewController, IVisualElementController, IElementController

Inheritance

Implements

Inherited Members

Remarks

This control provides a lightweight button implementation using SVG graphics for resolution-independent rendering. The control uses SkiaSharp for SVG rendering and integrates with platform-specific input systems:

  • Windows: Pointer events (PointerPressed)
  • Android: Touch events with debouncing to prevent multiple triggers
  • iOS/macCatalyst: SKTouch events for gesture recognition

Key features:

  • Resolution-independent SVG rendering
  • Automatic scaling to fit control bounds
  • Transparent background for overlay scenarios
  • Asynchronous asset loading from app package
  • Platform-optimized touch/click handling
  • Optional state visualization (hover, pressed, disabled)

SVG assets are loaded from the app package using the VisioForge.Core.UI.MAUI.SVGButton.AssetName property. The control automatically scales the SVG to fit the available space while maintaining aspect ratio.

Constructors

SVGButton()

Initializes a new instance of the VisioForge.Core.UI.MAUI.SVGButton class.

public SVGButton()

Remarks

The constructor sets up:

  • Transparent background for overlay scenarios
  • Paint surface event handler for rendering
  • Platform-specific touch/pointer event handlers via HandlerChanged event

Platform-specific input handlers are attached when the control is added to the visual tree and the platform handler is created. The actual input handling is configured in the SkinIconElement_HandlerChanged method based on the current platform.

Properties

AssetName

Gets or sets the name of the SVG asset file to load from the app package.

public string AssetName { get; set; }

Property Value

string

Remarks

When this property is set, the control asynchronously loads the SVG file from the app package using Microsoft.Maui.Storage.FileSystem.OpenAppPackageFileAsync(System.String). The SVG is parsed and cached for rendering.

The asset must be included in the app package with the appropriate build action (MauiAsset or EmbeddedResource). Supported format: SVG (Scalable Vector Graphics) files.

Loading occurs on a background thread to avoid blocking the UI. The control will render once loading completes.

DrawStates

Gets or sets a value indicating whether to programmatically draw visual states (hover, pressed, disabled).

public bool DrawStates { get; set; }

Property Value

bool

Remarks

When enabled, the control can apply visual effects based on interaction state:

  • Hover: Color overlay using skin's ButtonHoverColor
  • Pressed: Shadow effect with multiple offset drawings
  • Disabled: Semi-transparent black overlay

Currently, the state drawing implementation is commented out, so this property has no effect. Future versions may re-enable this functionality for enhanced visual feedback.

OnClickOrTouch

Occurs when the user clicks or touches the button.

public event EventHandler OnClickOrTouch

Event Type

EventHandler

Remarks

This event fires on:

  • Windows: Pointer press (mouse click or touch)
  • Android: Touch down event
  • iOS/macCatalyst: Touch event from SKTouch system

The event provides a unified interface for click/touch across all platforms without exposing platform-specific event details. No event arguments are provided beyond the sender.

On Android, touch events may benefit from debouncing to prevent accidental double-triggers.