0914-201501 Mvvmcross binding

Hi all,
time for a new post.

Some of us are still using the fantastic Mvvmcross framework to build cross-platform mobile apps with Xamarin.
Mvvmcross is more agile than Xamarin Forms in most ways, and much more stable, but requires to write the UI twice, which is quite a good idea if you need specific UI effects/displays/transitions/navigation. You can see the power of mvvmcross in effect shapr for example. More on Mvvmcross here.

So what if you need to bind an SVG image in mvcmcross, to be able to change the svg at runtime ?
You only need to declare a custom target binding and register it once.

Add the file MvxImageViewSvgDrawableTargetBinding.cs to your project (there are 2 files, one for Android and one for iOS). You can get the files here.
In your Startup class register the binding:


public class Setup : MvxAndroidSetup //(or MvxTouchDialogSetup for ios) { ... protected override void FillTargetFactories(IMvxTargetBindingFactoryRegistry registry) { base.FillTargetFactories(registry); MvxImageViewSvgDrawableTargetBinding.Register(registry); } }



Then use it from anywhere !

From android layout:
        <XamSvg.SvgImageView
            android:id="@+id/icon"
            local:MvxBind="Svg Icon"
            android:layout_marginLeft="10dp"
            android:layout_width="18dp"
            android:layout_height="18dp"
            android:layout_centerVertical="true"
            android:layout_alignParentLeft="true" />
From ios or android code:
var set = this.CreateBindingSet<TableCellMenuItems>();
set.Bind(icon).For("Svg").To(vm => vm.Section).WithConversion("MenuSectionImage");
set.Apply();
And as a bonus, the code for the enum to svg image name converter:
/// <summary>
/// MenuSection is an enumerable
/// convert an section into an image name /// Automatically discovered and registered.
/// </summary> public class MvxMenuSectionImageConverter : MvxValueConverter<MenuSection,string> {     public static void Register(IMvxValueConverterRegistry registry)     {         registry.AddOrOverwrite("MenuSectionImage"new MvxMenuSectionImageConverter());     }     protected override string Convert(MenuSection value, Type targetType, object parameter, CultureInfo culture)     {         if (value == MenuSection.Unknown)             return null;         return "menu_" + value.ToString().ToLowerInvariant();     } }



Feedback and Knowledge Base