Announcing Forms9Patch

Xamarin Forms is great for developing apps on Android and iOS but it is missing two important tools for developers: scalable images and PCL multi-screen image management. Android developers use NinePatch bitmaps and the drawable directory naming convention for this purpose. Likewise, iOS developers use ResizeableImageWithCapInsets and the @2x, @3x, @4x file naming convention for this purpose.

Forms 9 Patch enhances Xamarin Forms to enable multi-resolution / multi-screen image management to PCL apps for iOS and Android.

What is it?

Simply stated, Forms9Patch is two separate elements (Image and ImageSource) which are multi-screen / multi-resolution extensions of their Xamarin Forms counterparts.

Forms9Patch.ImageSource

Xamarin Forms provides native iOS and Android multi-screen image management (described here). This requires storing your iOS images using the native iOS schema and storing your Android images using the Android schema. In other words, duplicative efforts to get the same results on both Android and iOS. Forms9Patch.ImageSource extends Xamarin.Forms.ImageSource capabilities to bring multi-screen image management to your PCL assemblies - so you only have to generate and configure your app's image resources once. Forms9Patch.ImageSource is a cross-platform implementation to sourcing multi-screen images in Xamarin Forms PCL apps as embedded resources.

Forms9Patch.Image

Forms9Patch.Image compliments Xamarin.Forms.Image to provide Xamarin Forms with a scaleable image element. Scalable images are images that fill their parent view by stretching in designated regions. The source image for the Forms9Patch.Image element can be specified either as a Forms9Patch.ImageSource or a Xamarin.Forms.ImageSource. Supported file formats are NinePatch (.9.png), .png, .jpg, .jpeg, .gif, .bmp, and .bmpf.

using Xamarin.Forms;

namespace Forms9PatchDemo
{
    public class App : Xamarin.Forms.Application
    {
        public App ()
        {
                MainPage = new ContentPage {
                    Content = new ScrollView {
                        Content = new StackLayout {
                            Children = {
                                new Image { 
                                    Source = Forms9Patch.ImageSource.FromMultiResource("Forms9PatchDemo.Resources.image.9.png") },
                            }
                        }
                    }
                };
                MainPage.Padding = new Thickness (5, Device.OnPlatform(20,5,5), 5, 5);          
            }
        }

        protected override void OnStart ()
        {
            // Handle when your app starts
        }

        protected override void OnSleep ()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume ()
        {
            // Handle when your app resumes
        }
    }
}

Or, 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:f9p="clr-namespace:Forms9Patch;assembly=Forms9Patch"
    xmlns:local="clr-namespace:Forms9PatchDemo;assembly=Forms9PatchDemo"
    x:Class="Forms9PatchDemo.MyPage"
    Padding="5, 20, 5, 5">
    <ScrollView>
        <ScrollView.Content>
                <StackLayout>
                    <Label Text="Xamarin.Image"/>
                    <Image Source="{local:ImageResource Forms9PatchDemo.Resources.redribbon.png}"/>
                    <Image Source="{local:ImageMultiResource Forms9PatchDemo.Resources.redribbon}"/>
                    <Label Text="Form9Patch NinePatch Image"/>
                    <f9p:Image Source="{local:ImageMultiResource Forms9PatchDemo.Resources.button}"/>
                    <f9p:Image Source="{local:ImageMultiResource Forms9PatchDemo.Resources.bubble}"/>
                    <Label Text = "Forms9Patch Image w/ CapInsets"/>
                    <f9p:Image Source="{local:ImageMultiResource Forms9PatchDemo.Resources.redribbon}" CapInsets="23,-1,111,-1"/>
                </StackLayout>
        </ScrollView.Content>
    </ScrollView>
</ContentPage>

For more information:
- Home page: http://Forms9Patch.com
- Demo project: https://github.com/baskren/Forms9PatchDemo
- Nuget Repository: https://www.nuget.org/packages/Forms9Patch/0.9.1