FFImageLoading Xaml ReplaceStringMap SvgCachedImage : how does this work ?

Alain91Alain91 USMember ✭✭

Hello Xamarin,

I would like to change text property of an SVG image at runtime.
I use FFImageLoading library on a forms application.

In the xaml definition I use :

<ffSvg:SvgCachedImage Source="test.svg" Grid.Row="1" Grid.Column="2" x:Name="imagea" Grid.ColumnSpan="2" />

And it displays without problem.

In the SVG image, here is the text part :

 <    text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:42.84254456px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.07106364"
           x="49.873535"
           y="44.078949"
           id="text12"
           transform="scale(0.4246626,2.3548106)"><tspan
             sodipodi:role="line"
             id="tspan10"
             x="49.873535"
             y="44.078949"
             style="stroke-width:1.07106364">ESSAI DE TEXTE</tspan></text>

I would like to change ESSAI DE TEXTE according to the platform langage (localization)

In the cs file, I added a dictionary :

Dictionary<string, string> Map = new Dictionary<string, string>();

Map.Add("ESSAI", "TRY");
imagea.ReplaceStringMap = Map;
imagea.ReloadImage();

But nothing change in the image...

By the way how could I add the Map dictionnary into the Xaml image definition ?

Could you help me please ?

Alain

Best Answer

  • Alain91Alain91 US ✭✭
    edited January 2018 Accepted Answer

    I finally found a solution, without MVVM that I will try to learn later.

    My aim was to change svg text at runtime.

    In the XAML file, the change is fired with this :

    <Button Text="Change pic" Clicked="ReplaceCommand" HorizontalOptions="FillAndExpand" />

    The image is :

    <ffSvg:SvgCachedImage Source="hello.svg" x:Name="img" ReplaceStringMap="{Binding ReplaceMap}" />

    And here is the buttonClicked in the cs code :

     public void ReplaceCommand(object sender, EventArgs e)
            {
                img.ReplaceStringMap.Clear();
                img.ReplaceStringMap.Add("Hello!","TEST");              
                img.ReloadImage();   
        }
    

    and it works ! :)

    Thanks to all of you !
    Alain

Answers

  • Alain91Alain91 USMember ✭✭

    Thanks a lot Daniel !

    I tried but failed :neutral:

    I used xaml forms but didn't succeeded.. Please could you look at this code ?

    mainpage.xaml.cs :

    using System;
    using System.Collections.Generic;
    using Xamarin.Forms;
    
    namespace expGrid
    {
        public partial class MainPage : ContentPage
        {
    
            public Dictionary<string, string> ReplaceMap { get; set; }
    
            public MainPage()
            {
                InitializeComponent();
            }
    
            public void ReplaceCommand(object sender, EventArgs e)
            {
                // DisplayAlert("ok", "ok!", "OK");
                ReplaceMap = new Dictionary<string, string>()
                    {
                        { "Hello!", Guid.NewGuid().ToString() }
                    };
            }
        }
    }
    

    mainpage.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:expGrid"
                 x:Class="expGrid.MainPage"
    
                 xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
                 xmlns:ffSvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
                 xmlns:ffTransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
                 >
    
        <StackLayout>
            <Button Text="Change pic"  Command="{Binding ReplaceCommand}" HorizontalOptions="FillAndExpand" />
            <Button Text="Change pic"  Clicked="ReplaceCommand"  HorizontalOptions="FillAndExpand" />
    
            <ffSvg:SvgCachedImage Source="hello.svg"  ReplaceStringMap="{Binding ReplaceMap}" />
    
            <Label Text="{Binding ReplaceMap}" HorizontalOptions="FillAndExpand"/>
    
        </StackLayout>
    
    </ContentPage>
    

    And your svg file :

    <svg xmlns="http://www.w3.org/2000/svg"
         width="500" height="40" viewBox="0 0 500 40">
      <circle cx="20" cy="20" r="15" stroke="black" stroke-width="3" fill="red" />
      <text x="0" y="35" font-family="Verdana" font-size="35">
        Hello!
      </text>
    </svg>
    

    Any help is welcome :smile:

    Thanks a lot Daniel

  • batmacibatmaci DEMember ✭✭✭✭✭

    try with raising property changed on ReplaceMap

  • Alain91Alain91 USMember ✭✭

    Thanks batmaci.

    I am not very fluent in this :neutral:

    Could you give an example please ?

    Alain

  • batmacibatmaci DEMember ✭✭✭✭✭

    well you have to implement INotifyPropertyChange on your viewmodel as shown in this article and you should raise property changed see the example there. https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-basics/data_bindings_to_mvvm/

    I use freshmvvm and it has built in implementation so simply using RaisePropertyChanged("ReplaceMap");
    but you dont have to use this library, just follow the article

  • Alain91Alain91 USMember ✭✭
    edited January 2018 Accepted Answer

    I finally found a solution, without MVVM that I will try to learn later.

    My aim was to change svg text at runtime.

    In the XAML file, the change is fired with this :

    <Button Text="Change pic" Clicked="ReplaceCommand" HorizontalOptions="FillAndExpand" />

    The image is :

    <ffSvg:SvgCachedImage Source="hello.svg" x:Name="img" ReplaceStringMap="{Binding ReplaceMap}" />

    And here is the buttonClicked in the cs code :

     public void ReplaceCommand(object sender, EventArgs e)
            {
                img.ReplaceStringMap.Clear();
                img.ReplaceStringMap.Add("Hello!","TEST");              
                img.ReloadImage();   
        }
    

    and it works ! :)

    Thanks to all of you !
    Alain

  • aeodeveloperaeodeveloper Member ✭✭
    edited February 2018

    I just trying use this ffsvg, but when I run my project, my svg not loaded, but it throws no errors

    ffSvg:SvgCachedImage Source="ic_access_time_black_24dp.svg"

    any help please

  • mkgitaliamkgitalia Member

    @aeodeveloper said:
    I just trying use this ffsvg, but when I run my project, my svg not loaded, but it throws no errors

    ffffSvg:SvgCachedImage Source="ic_access_time_black_24dp.svg"

    any help please

    you must insert full path ffSvg:SvgCachedImage Source="myapp/Resource/ic_access_time_black_24dp.svg"

Sign In or Register to comment.