Loading FFImageLoading SVG into ImageButton Source from code?

Question

This post shows how to make SvgCachedImage act like a button. However, how to load SvgCachedImage into XamarinForm's ImageButton Source ?

My non-working code:

<?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:SharedSvgSample"
             x:Class="SharedSvgSample.MainPage"
             xmlns:ffimageloadingsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms">
    <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
        <ImageButton
            x:Name="myButton"
            HeightRequest="200"
            Clicked="myButton_Clicked"
            WidthRequest="200" />
    </StackLayout>
</ContentPage>

Code-behind:

using FFImageLoading.Svg.Forms;
using System;
using Xamarin.Forms;

namespace SharedSvgSample
{
    public partial class MainPage : ContentPage
    {
        private bool _myButtonValue;
        private SvgImageSource _visibilityOn = null;
        private SvgImageSource _visibilityOff = null;

        public MainPage()
        {
            InitializeComponent();
            _visibilityOn = SvgImageSource.FromResource("SharedSvgSample.Resources.visibility_on.svg");
            _visibilityOn.VectorHeight = 100;
            _visibilityOn.VectorWidth = 100;

            _visibilityOff = SvgImageSource.FromResource("SharedSvgSample.Resources.visibility_off.svg");
            _visibilityOff.VectorHeight = 100;
            _visibilityOff.VectorWidth = 100;

            myButton.Source = _visibilityOff;   
        }

        private void myButton_Clicked(object sender, EventArgs e)
        {
            _myButtonValue = !_myButtonValue;
            myButton.Source = _myButtonValue ? _visibilityOn.ImageSource : _visibilityOff.ImageSource;
        }
    }
}

As I know, FFImageLoading SVG and Image button are different controls, and you can set only the ImageButton image source. Why can't you use FFImageLoading SVG with tap gesture event? — Денис Чорный, Jan 17 '19 at 08:02
I am confused here these are two different controls what exactly are you trying to achieve here — FreakyAli, Jan 17 '19 at 09:13
@ДенисЧорный , with FFImageLoading SVG with tap gesture event, I lost features of ImageButton (such as setting rounded border, etc). The workaround I am looking for is to have FFImageLoading to prerender an image on-memory that ImageButton can accept. — Jeson Martajaya, Jan 17 '19 at 18:37
Well i don't know if you can do that, I am pretty sure you can't but goodluck finding it — FreakyAli, Jan 17 '19 at 19:44
@JesonMartajaya would be interesting to see what would you achieve in your issue :) — Денис Чорный, Jan 18 '19 at 02:30

score 1 · Answer 1 · answered Jan 17 '19 at 13:07

1

Unluckily, Xamarin.Forms.Button only supports FileImageSource, so at the moment you can't just load an SVG into the Button Image.

However, you can just load the SVG image, and add the TapGestureRecognizer to simulate a Button.

answered Jan 17 '19 at 13:07

Bruno Caceiro

7,035
1
26
45

I am referring to `Xamarin.Forms.ImageButton`. I am more looking into workaround in having FFImageLoading prerenders svg icon in-memory to an image that ImageButton can accept. – Jeson Martajaya Jan 17 '19 at 18:39
1

@JesonMartajaya did you find a solution for this? – sparkhead95 May 10 '19 at 11:28

Loading FFImageLoading SVG into ImageButton Source from code?

1 Answers1