Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a "simple" picture view #255

mattleibow opened this issue Feb 23, 2017 · 3 comments


Copy link

commented Feb 23, 2017

This view should be able to just have a setter:

var view = new SKImageView();
view.Bitmap = SKBitmap.Decode(myImagePath);

Also, another option would be to create extension methods to convert images to platform images:

// bitmaps
SKBitmap bitmap = ...;
var uiImage = bitmap.ToUIImage();

// pictures
SKPicture picture = ...;
var cgImage = picture.ToCGImage(new SKSizeI(100, 100));
@mattleibow mattleibow added this to the 1.56.2 milestone Feb 28, 2017

This comment has been minimized.

Copy link
Contributor Author

commented Feb 28, 2017

I decided against creating a custom image view just for SkiaSharp for several reasons:

  • re-doing the work of every platform out there
  • too many features, for too many platforms
  • existing infrastructure/extensions (loaders/effects) won't work

However... I have provided a way to convert from SkiaSharp types (SkBitmap, SKPicture, SKImage and SKPixmap) into platform types (CGImage, CIImage, UIImage, NSImage, System.Drawing.Bitmap, Android.Graphics.Bitmap, WriteableBitmap).

These are basic extension methods that take a copy of the pixels and hand it over to the OS. Then, these can be used in any UI picture view on the platform - and any custom ones that are in use:

myNativeImageView.Image = viewModel.AwesomeImage.ToUIImage();

I have also created a set of ImageSource types for Xamarin.Forms (SKBitmapImageSource, SKImageImageSource, SKPictureImageSource and SKPixmapImageSource). These are used as "normal" in XAML:

<Image WidthRequest="100" HeightRequest="100">
        <skiasharp:SKImageImageSource Image="{Binding AwesomeImage}" />

Or in C#

var image = new Image {
    Source = new SKImageImageSource {
        Image = viewModel.AwesomeImage

// or with the nice implicit cast
var image = new Image {
    Source = (SKImageImageSource) viewModel.AwesomeImage

I am closing this now as I think I have something that will help everyone :) But, feel free to re-open if you need/prefer something else:

  • you really need a custom image view...
  • you want some extension method that does NOT copy the pixels (you will have to manage the lifetime of the SkiaSharp instance) - this is also not always possible on some of the platforms
  • another idea based on displaying a SkiaSharp image in some native way
@mattleibow mattleibow closed this Feb 28, 2017

This comment has been minimized.

Copy link

commented Jul 22, 2017

I see here and also here that there is a way to use SkiaSharp from XAML (Xamarin Forms), but what about AXML (native Android) layouts?


This comment has been minimized.

Copy link
Contributor Author

commented Jul 22, 2017

You can use:

        android:id="@+id/canvasView" />

@mattleibow mattleibow added this to To Be Classified in Previous Releases Jul 26, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Previous Releases
To Be Classified
2 participants
You can’t perform that action at this time.