Forum Xamarin.Forms


The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

How to work with graphics in Xamarin.Forms? I don't want to know about Platform Specific Details!

VaylandtVaylandt RUMember ✭✭

All libraries offer to write native code in Android and iOS. Is there a PCL library to work with graphics?

Has a specific task: merge 2 image from source and crop the image.

I honestly tried to deal with libraries, but I can't do anything.

I understand it's impossible to write code only in the Portable project!?


  • EmanueleSabettaEmanueleSabetta ITBeta ✭✭✭

    I work with NGraphics and it is perfectly fine for cross platform XAML graphics. It also load and display SVG, so you can create your assets in Inkscape or Adobe Experience Design.

  • VaylandtVaylandt RUMember ✭✭

    @EmanueleSabetta said:
    I work with NGraphics and it is perfectly fine for cross platform XAML graphics. It also load and display SVG, so you can create your assets in Inkscape or Adobe Experience Design.

    If You don't mind could you show example how to do it?
    I'll be immensely grateful!
    For some time I did not get (

  • DanielKDanielK CAMember

    You can use NControl:

    NControl is a Xamarin.Forms wrapper control built around the NGraphics library enabling developers to create custom controls without the need for custom renderers.

  • VaylandtVaylandt RUMember ✭✭
    edited August 2016

    OK, I see you don't understand me or I don't understand what you say ((

    Here is what I have:

    MyFirstApp (Portable)
    public class App : Application
    public App()
    MainPage = new NavigationPage(new MyPage());

    public partial class MyPage: ContentPage
    public MyPage()
    pickPhoto.Clicked += async (sender, args) =>{

        var file1 = await CrossMedia.Current.PickPhotoAsync();
        var file2 = await CrossMedia.Current.PickPhotoAsync();


    Then go to NControl... Example Usage

    In your Xamarin.Forms project, add a new NControlView element to your page in the constructor and provide a drawing function where your custom drawing is performed:

    Content = new NControlView {
    DrawingFunction = (canvas, rect) => {
    canvas.DrawLine(rect.Left, rect.Top, rect.Width, rect.Height, NGraphics.Colors.Red);
    canvas.DrawLine(rect.Width, rect.Top, rect.Left, rect.Height, NGraphics.Colors.Yellow);

    It doesn't work!

    Similarly does not work NGraphics

    Platforms.Current ...

  • any news? does anybody use NGRAPHICS?

  • VaylandtVaylandt RUMember ✭✭

    using System;
    using myXamApp.Droid;
    using SkiaSharp;
    using System.IO;

    [assembly: Xamarin.Forms.Dependency(typeof(ImageEditor))]
    namespace myXamApp.Droid
    class ImageEditor : IImageEditor
    public byte[] MergeImage(byte[] backImage, byte[] frontImage, double offsetX, double offsetY, double scale, double screenW)
    int sizeImg = 600;
    using (var surface = SKSurface.Create(sizeImg, sizeImg, SKImageInfo.PlatformColorType, SKAlphaType.Premul))
    SKCanvas canvas = surface.Canvas;

                using (var bitmap = SKBitmap.Decode(backImage))
                using (var bitmap2 = SKBitmap.Decode(frontImage))
                using (var paint = new SKPaint())
                    float bW = 0;
                    float bH = 0;
                    float w = bitmap.Width;
                    float h = bitmap.Height;
                    float s = (float)scale;
                    float hO = 0;
                    float wO = 0;
                    if (bitmap.Width > bitmap.Height)
                        bW = sizeImg * s;
                        bH = h / w * sizeImg * s;
                        hO = (bW - bH) / 2;
                        bH = sizeImg * s;
                        bW = w/h* sizeImg * s;
                        wO = (bH - bW) / 2;
                    float oX = (float)offsetX;
                    float oY = (float)offsetY;
                    float sW = (float)screenW;
                    float X =  sizeImg/ sW * oX;
                    float Y = sizeImg/sW * oY;
                    canvas.DrawBitmap(bitmap, SKRect.Create( X + wO, Y + hO, bW, bH), paint);
                    canvas.DrawBitmap(bitmap2, SKRect.Create(0, 0, sizeImg, sizeImg), paint);
                SKImage finalImage = surface.Snapshot();
                SKData data = finalImage.Encode(SKImageEncodeFormat.Png, 50);
                Stream source = data.AsStream();
                source.Position = 0;
                byte[] buffer = new byte[source.Length];
                for (int totalBytesCopied = 0; totalBytesCopied < source.Length;)
                    totalBytesCopied += source.Read(buffer, totalBytesCopied, Convert.ToInt32(source.Length) - totalBytesCopied);
                return buffer;
        public string PlatformName()
            return "__Android";


  • mattleibowmattleibow ZAXamarin Team Xamurai
    edited October 2016

    @Vaylandt You may also want to try out the brand new SkiaSharp.Views and SkiaSharp.Views.Forms NuGets. These packages have a large set of ready-to-use views that can be added to your app and then draw on using n event or overriding the draw method.

    If you have a look at the updated samples, you can see how to use them (just add it to the view hierarchy)

  • VaylandtVaylandt RUMember ✭✭

    My solution is already working, but still I will study your offer! Thank you!

Sign In or Register to comment.