SkiaSharp, powered by Google’s Skia graphics library, helps developers extend their Xamarin.Forms apps with compelling 2D graphics. Charles Petzold shows you how to include a SkiaSharp canvas in your Xamarin.Forms apps and make the most of the extensive and versatile SkiaSharp library. Watch the webinar recording at aka.ms/xamu-skiasharp-video Explore Xamarin University at xamarin.com/university

2. Senior Content Developer
charlespetzold.com

3. Our work and personal data is in the cloud

4. We have multiple devices and use whichever is best for each task

5. We use devices in all aspects of our lives

6. We expect our data to be available on every device we use

7. iOS

9. Visual Studio
for Windows or Mac
.NET Library.NET Languages

10. iOS
C# UI
Shared C# business logic
Android
C# UI
Windows
C# UI Shared C# UI
Shared C# business logic
Xamarin.Android and Xamarin.iOS
Separate UIs per platform
Xamarin.Forms
Shared UI definition

13. Getting started with SkiaSharp for Xamarin.Forms [DEMO]
Graphics programming techniques [DEMO]
Final touches [DEMO]
Resources
Q&A

14. Have questions?

15. Getting started with SkiaSharp

16. Skia Graphics Engine acquired by Google in 2005
Open source
C++
Used in Google Chrome, Mozilla Firefox, and Android
Immediate-mode 2D vector graphics system

17. Xamarin’s implementation of Skia
C# and .NET API
Bindings for Windows Forms, WPF, UWP, iOS, tvOS,
Mac, Android, and Xamarin.Forms
github.com/mono/SkiaSharp
NuGet: search “SkiaSharp”

18. SKCanvasView and SKGLView
Derive from Xamarin.Forms View class
PaintSurface event
Info property: Size of surface area
Surface property: SKSurface  SKCanvas
InvalidateSurface method
Can draw to bitmap or SVG file

19. Demo
Getting started with SkiaSharp for
Xamarin.Forms

20. Graphics programming

21. Drawing Methods
DrawCircle, DrawRect, DrawLine, DrawText, DrawBitmap
DrawPath (the only one you really need)
Transforms
Translate
Scale
RotateDegrees and RotateRadians
Clipping

22. Style: Stroke, Fill, or both
Color: SKColor value
StrokeWidth
StrokeCap: Butt, Square, or Round
StrokeJoin: Miter, Bevel, or Round
Shader: gradients or bitmap tiling

23. Demo
Back to Visual Studio…

24. Multiple contours, opened or closed
MoveTo and LineTo
ArcTo: Three kinds of arc definitions
CubicTo and QuadTo: Bézier curves
ConicTo
SVG path data in and out

25. Demo
Back to Visual Studio…

26. Final touches

27. CreateLinearGradient
CreateRadialGradient
CreateSweepGradient
CreateTwoPointConicalGradient
CreatePerlinNoise…
CreateBitmap: Tile with SKBitmap

28. CreateDash
Create1DPath: Dashed with other path
Create2DPath: Stroked with array of other path
CreateDiscrete: Jitter effect

29. Demo
Visual Studio: the final return

30. aka.ms/buy-xamarin-university
Start your free Xamarin University trial.
Learn to build better mobile apps.

31. Starting at
$83.25/month
Use existing Azure
subscription
Flexible billing
options

32. Documentation
developer.xamarin.com/api/root/SkiaSharp
developer.xamarin.com/guides/xamarin-forms/advanced/skiasharp
Demo Code
aka.ms/cat-clock-demo
aka.ms/skia-sharp-samples
Xamarin University Presents Webinar Series
aka.ms/xam-u-webinars
aka.ms/xam-u-webinar-recordings

33. Thank You

34. Q&A

35. © Copyright Microsoft Corporation. All rights reserved.