Using SkiaSharp for making graphs in WPF

Question

Hi,
I have been trying to use SkiaSharp to make charts/graphs in WPF. Havent been able to find a proper sample implementation of Skia in WPF. Some of the available samples in GitHub seem to be complicated compared to other platforms. Can someone share with a sample simple implementation of Skia (using a canvas etc to draw something on the screen) in a WPF project ?

Thanks in Advance !

Answer 1

This basic sample works fine for me (Windows 10 - 1909, VS 2019, .NET.4.7.2) : WPF SkiaSharpSample

after retargeting to .NET.4.7.2, removing and installing latest versions for packages :
SkiaSharp.Views.Desktop.Common
SkiaSharp.Views.WPF

Answer 2

I will show you the steps to create a simple demo for using SkiaSharp in WPF:

Step 1: Create a .Net core WPF app and install SkiaSharp in its NuGet
Step 2: Add the below code in MainWindow.xaml:

 <Grid>  
        <Grid.RowDefinitions>  
            <RowDefinition></RowDefinition>  
            <RowDefinition Height="Auto"></RowDefinition>  
        </Grid.RowDefinitions>  
        <Image x:Name="Image" Margin="10,10,10,10"></Image>  
        <Button Margin="10,10,10,10" Grid.Row="1" Content="use Skia " Click="Button_OnClick"></Button>  
    </Grid>  

Step 3: Add the below code for MainWindow.xaml.cs:

public partial class MainWindow : Window  
    {  
        public MainWindow()  
        {  
            InitializeComponent();  
        }  
  
        private void Button_OnClick(object sender, RoutedEventArgs e)  
        {  
            var writeableBitmap = CreateImage(1920, 1080);  
            UpdateImage(writeableBitmap);  
            Image.Source = writeableBitmap;  
        }  
  
        private WriteableBitmap CreateImage(int width, int height)  
        {  
            var writeableBitmap = new WriteableBitmap(width, height, 96, 96, PixelFormats.Bgra32, BitmapPalettes.Halftone256Transparent);  
            return writeableBitmap;  
        }  
        private void UpdateImage(WriteableBitmap writeableBitmap)  
        {  
            int width = (int)writeableBitmap.Width,  
                height = (int)writeableBitmap.Height;  
            writeableBitmap.Lock();  
            var skImageInfo = new SKImageInfo()  
            {  
                Width = width,  
                Height = height,  
                ColorType = SKColorType.Bgra8888,  
                AlphaType = SKAlphaType.Premul,  
                ColorSpace = SKColorSpace.CreateSrgb()  
            };  
  
            using (var surface = SKSurface.Create(skImageInfo, writeableBitmap.BackBuffer))  
            {  
                SKCanvas canvas = surface.Canvas;  
                canvas.Clear(new SKColor(130, 130, 130));  
                canvas.DrawText("SkiaSharp in Wpf!", 50, 200, new SKPaint() { Color = new SKColor(0, 0, 0), TextSize = 100 });  
                canvas.DrawText("Using SkiaSharp for making graphs in WPF", new SKPoint(50, 500), new SKPaint(new SKFont(SKTypeface.FromFamilyName("Microsoft YaHei UI")))  
                {  
                    Color = new SKColor(0, 0, 0),  
                    TextSize = 20  
                });  
            }  
            writeableBitmap.AddDirtyRect(new Int32Rect(0, 0, width, height));  
            writeableBitmap.Unlock();  
        }  
    }  

Step 4: You will get the result picture after running the app: