Skip to content

FreakySvgImageView

Gulam Ali H edited this page Sep 30, 2022 · 2 revisions

A Freaky ImageView that uses SkiaSharp to display SVG images in your app.

Build action of all SVG images that you want to use needs to be set to EmbeddedResource.

   <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}"/>

SvgAssembly : Assembly of the Svg image that you want to display in this view. (An Example shown below)

ResourceId : The String path to your Embedded SVG file that you want to display on your View.

Base64String : Your SVG is not a file on your project but a Base64 string i got you homie ;) (Assembly is not needed here)

ImageColor: Using our Control to show icons on your app but your svg image has a different color then you would want, No problemo just use this property to change the display color of the icon, NOTE: This will change the Color of the whole SVG image and not specific parts of it, Only useful in case you wan t to change color of icons based on conditions but dont want multiple icons in your app.

SvgMode: Different modes in which you can display your SVG image wherein it uses Maui's Aspect enum with the same options that you find in AspectMode for a regular Maui Image control.

Command/CommandParameter: Your usual combo of MVVM love.

Tapped: A tap event in case MVVM is too boring for you :D

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 :)

Clone this wiki locally