FreakySvgImageView

FreakySvgImageView

The FreakySvgImageView class is a versatile SVG image view control designed for use in .NET MAUI applications. It allows you to display Scalable Vector Graphics (SVG) images with various customization options.

Properties

ImageColor

• Type: Color
• Default Value: Colors.Transparent
• Description: Gets or sets the color applied to the SVG image. The SVG image is tinted with this color.

SvgAssembly

• Type: Assembly
• Default Value: null
• Description: Gets or sets the assembly containing the SVG image resource when using ResourceId.

Command

• Type: ICommand
• Description: Gets or sets the command to be executed when the image is tapped.

CommandParameter

• Type: object
• Description: Gets or sets the parameter to be passed to the command when the image is tapped.

SvgMode

• Type: Aspect
• Default Value: Aspect.AspectFit
• Description: Gets or sets the scaling mode of the SVG image within the view. It supports values like Aspect.Fill, Aspect.AspectFit, and Aspect.AspectFill.

ResourceId

• Type: string
• Default Value: null
• Description: Gets or sets the resource ID of the SVG image when loaded from the application's resources.

Base64String

• Type: string
• Default Value: null
• Description: Gets or sets the Base64-encoded SVG image data to be displayed.

Uri

• Type: Uri
• Default Value: null
• Description: Gets or sets the URI of the SVG image to be displayed. It supports remote image loading.

Events

Tapped

• Description: Occurs when the image is tapped or clicked. Handle this event to perform actions when the image is interacted with.

Methods

Dispose()

• Description: Releases any resources used by the FreakySvgImageView. Call this method when you are done using the control.

Constructors

FreakySvgImageView()

• Description: Initializes a new instance of the FreakySvgImageView class. Sets up gesture recognition for tap events and initializes the underlying SVG object.

Remarks

• The FreakySvgImageView allows you to display SVG images with customizable color, scaling, and interaction capabilities.

• You can load SVG images from different sources, including resources, Base64-encoded strings, and remote URIs.

• Use the ImageColor property to apply a color filter to the SVG image, tinting it with the specified color.

• The Command property allows you to define a command that is executed when the image is tapped. You can also provide a CommandParameter for additional context.

• The SvgMode property controls how the SVG image is scaled and fitted within the view, supporting various scaling modes.

• The Tapped event enables you to handle interactions with the image, such as tapping or clicking.

• Ensure to call the Dispose method when you are done using the FreakySvgImageView to release any allocated resources.

Examples

// Create a FreakySvgImageView instance
var svgImageView = new FreakySvgImageView
{
    ResourceId = "YourAppNamespace.Images.myimage.svg",
    ImageColor = Color.Blue,
    SvgMode = Aspect.AspectFill,
    Command = new Command(() => HandleImageTap()),
    CommandParameter = "ImageTapped"
};

       <freakyControls:FreakySvgImageView
		Base64String="{Binding Base64Data}"
		Command="{Binding OnTapCommand}"
		CommandParameter="{Binding OnTapCommandParam}"
		ImageColor="AliceBlue"
		Tapped="FreakySvgImageView_Tapped"
		SvgAssembly="{x:Static samples:Constants.SvgAssembly}"
		SvgMode="AspectFit"
		ResourceId="{x:Static samples:Constants.DotnetBot}"/>

Example of a constant class that provides Assembly and ResourceId to the ImageView:

   public static class Constants
{
   public static readonly Assembly SvgAssembly = typeof(Constants).Assembly;
   public static readonly string ResourcePath = "Samples.Resources.Images.";
   public static readonly string DotnetBot = ResourcePath+ "dotnet_bot.svg";
}

Still confused? Don't Worry just check the Sample project for how to configure this :)