0912-201503 Xamarin Forms : svg stored as resources in PCL

The latest version of XamSvg supports Xamarin Forms 1.4, but it also supports reading svg files from a unique location: the pcl shared library.

To display a svg image in xamarin forms you can use a code like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  <ContentView Padding="10, 40, 40, 10">
    <StackLayout Orientation="Vertical" VerticalOptions="Start">
      <Label Text="Clicking the vector image will select it and switch to next image. Get more svg images on http://www.flaticon.com/" HorizontalOptions="Center" />
      <controls:SvgImage x:Name="Svg" HorizontalOptions="CenterAndExpand"
                         ColorMappingSelected="#ffffff=#00ff00" />

Examine the line Svg="res:images.hand"

The new "res:" scheme tells xamsvg to search the vector image file among the .NET resources of the assembly specified in the new RessourceAssembly property. The following example code specify the Xamarin Forms PCL (or shared) assembly as the container where to search for resources :

    public class App
        public static Page GetMainPage()
            var assembly = typeof (App).GetTypeInfo().Assembly;
            XamSvg.Shared.Config.ResourceAssembly = assembly;

To store a file as a .NET resource, its build action must be set to Embedded Resource. It can be stored in any folder.
The standard "file name" of this new .NET resource is the namespace of the assembly, plus the folder names where the file is stored, plus the file name without extension. All parts of the name are separated by dots. XamSvg automatically prepends the namespace of the assembly, so you only need to specify the relative path and name of the file.

In the above example images.hand refers to the file hand.sv stored in the images folder in the Xamarin Forms PCL project.

In the next example below, the file is "pin.svg" stored in the same images folder.

      <controls:SvgImage Svg="res:images.pin" ColorMapping="#ffffff=#ff0000" ColorMappingSelected="#ffffff=#00ff00" HorizontalOptions="Center" Clicked="OnSvgClicked" />

No more duplicate files !
Note: remember to use our private nuget server (as a registered user you should have received an access through a welcome email) to easily add XamSvg to your forms project.

Hope it helps.

Feedback and Knowledge Base