Hi
I've been trying to use the FFImageLoading
NuGet package to utilise SVGs (which for me, are embedded resources) in my project, and have been trying to use them with regular <Image/>
and <ImageButton/>
elements. On the online docs, they say to do the following:
Which I have done in my MainActivity
and AppDelegate
projects. But I still can't seem to get an SVG to work on a regular Image or ImageButton. I have tried the following attempts:
<ImageButton WidthRequest="50" Source="ExampleProject.SVGs.ContactPhone.svg"/> <ImageButton WidthRequest="50" Source="resource://ExampleProject.SVGs.ContactPhone.svg"/>
But neither of them work. Is there something I'm missing? It's not very clear how you do the code in the xaml side.
The Images work if I set the source programatically so it's nothing wrong with the packages being installed, but I want to get it to work inside xaml.
Thanks in advance,
Jamie
@JamieColclough said:
1 . Set Build Action to
EmbeddedResource
on the image file .2 . Create a class which converter from string to ResourceImageSource
[ContentProperty (nameof(Source))] public class ImageResourceExtension : IMarkupExtension { public string Source { get; set; } public object ProvideValue (IServiceProvider serviceProvider) { if (Source == null) { return null; } // Do your translation lookup here, using whatever method you require var imageSource = ImageSource.FromResource(Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly); return imageSource; } }3 . Usage in xaml
<?xml version="1.0" encoding="UTF-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:WorkingWithImages;assembly=WorkingWithImages" x:Class="WorkingWithImages.EmbeddedImagesXaml"> <StackLayout VerticalOptions="Center" HorizontalOptions="Center"> <!-- use a custom Markup Extension --> <Image Source="{local:ImageResource WorkingWithImages.beach.jpg}" /> </StackLayout> </ContentPage>@ColeX This worked perfectly and I've managed to get it working
For the sake of people reading this thread hoping to get it working specifically forFFImageLoading
, you will also need to include a width and/or a height property in theSvgImageSource.FromResource()
method to get the SVG to load in the right size.
To access the width and height using theWidthRequest
andHeightRequest
properties that you would usually put on the xaml of the image, you can use theIServiceProvider
inside theProvideValue
method as follows:public object ProvideValue(IServiceProvider serviceProvider) { if (Source == null) { return null; } IProvideValueTarget provideValueTarget = serviceProvider.GetService(typeof(IProvideValueTarget)) as IProvideValueTarget; Image image = provideValueTarget.TargetObject as Image; if(image != null) { Width = (int)image.Width; Height = (int)image.Height; } var imageSource = SvgImageSource.FromResource(Source, typeof(SVGResourceExtension).Assembly, Width, Height); return imageSource; }And that'll work easily with
<Image Source="{local:ImageResource WorkingWithImages.beach.jpg}" WidthRequest="50" HeightRequest="50"/>
If problem has been solved could you mark the solution as answer ? It's helpful to others who's facing the same problem.
Answers
Take a look at Embedded images , please follow the steps as below
1 . Set Build Action to
EmbeddedResource
on the image file .2 . Create a class which converter from string to ResourceImageSource
3 . Usage in xaml
@ColeX This worked perfectly and I've managed to get it working
For the sake of people reading this thread hoping to get it working specifically for
FFImageLoading
, you will also need to include a width and/or a height property in theSvgImageSource.FromResource()
method to get the SVG to load in the right size.To access the width and height using the
WidthRequest
andHeightRequest
properties that you would usually put on the xaml of the image, you can use theIServiceProvider
inside theProvideValue
method as follows:And that'll work easily with
If problem has been solved could you mark the solution as answer ? It's helpful to others who's facing the same problem.
Thanks for this solution. It works for me.
But, just to completed the answer with the problem I faced, the name of the image has to mentioned the name of the assembly : "Project.Folder.ImageName.Ext". I decide to handle this in the MarkupExtension :