Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Senior Content Developer
charlespetzold.com
Our work and personal data is in the cloud
We have multiple devices and use whichever is best for each task
We use devices in all aspects of our lives
We expect our data to be available on every device we use
iOS
Visual Studio
for Windows or Mac
.NET Library.NET Languages
iOS
C# UI
Shared C# business logic
Android
C# UI
Windows
C# UI Shared C# UI
Shared C# business logic
Xamarin.Android and X...
Getting started with SkiaSharp for Xamarin.Forms [DEMO]
Graphics programming techniques [DEMO]
Final touches [DEMO]
Resour...
Have questions?
Getting started with SkiaSharp
Skia Graphics Engine acquired by Google in 2005
Open source
C++
Used in Google Chrome, Mozilla Firefox, and Android
Immedi...
Xamarin’s implementation of Skia
C# and .NET API
Bindings for Windows Forms, WPF, UWP, iOS, tvOS,
Mac, Android, and Xamari...
SKCanvasView and SKGLView
Derive from Xamarin.Forms View class
PaintSurface event
Info property: Size of surface area
Surf...
Demo
Getting started with SkiaSharp for
Xamarin.Forms
Graphics programming
Drawing Methods
DrawCircle, DrawRect, DrawLine, DrawText, DrawBitmap
DrawPath (the only one you really need)
Transforms
Tr...
Style: Stroke, Fill, or both
Color: SKColor value
StrokeWidth
StrokeCap: Butt, Square, or Round
StrokeJoin: Miter, Bevel, ...
Demo
Back to Visual Studio…
Multiple contours, opened or closed
MoveTo and LineTo
ArcTo: Three kinds of arc definitions
CubicTo and QuadTo: Bézier cur...
Demo
Back to Visual Studio…
Final touches
CreateLinearGradient
CreateRadialGradient
CreateSweepGradient
CreateTwoPointConicalGradient
CreatePerlinNoise…
CreateBitma...
CreateDash
Create1DPath: Dashed with other path
Create2DPath: Stroked with array of other path
CreateDiscrete: Jitter effe...
Demo
Visual Studio: the final return
aka.ms/buy-xamarin-university
Start your free Xamarin University trial.
Learn to build better mobile apps.
Starting at
$83.25/month
Use existing Azure
subscription
Flexible billing
options
Documentation
developer.xamarin.com/api/root/SkiaSharp
developer.xamarin.com/guides/xamarin-forms/advanced/skiasharp
Demo ...
Thank You
Q&A
© Copyright Microsoft Corporation. All rights reserved.
SkiaSharp Graphics for Xamarin.Forms
SkiaSharp Graphics for Xamarin.Forms
SkiaSharp Graphics for Xamarin.Forms
SkiaSharp Graphics for Xamarin.Forms
Upcoming SlideShare
Loading in …5
×

SkiaSharp Graphics for Xamarin.Forms

1,266 views

Published on

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

Published in: Software
  • Be the first to comment

SkiaSharp Graphics for Xamarin.Forms

  1. 1. Senior Content Developer charlespetzold.com
  2. 2. Our work and personal data is in the cloud
  3. 3. We have multiple devices and use whichever is best for each task
  4. 4. We use devices in all aspects of our lives
  5. 5. We expect our data to be available on every device we use
  6. 6. iOS
  7. 7. Visual Studio for Windows or Mac .NET Library.NET Languages
  8. 8. 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
  9. 9. Getting started with SkiaSharp for Xamarin.Forms [DEMO] Graphics programming techniques [DEMO] Final touches [DEMO] Resources Q&A
  10. 10. Have questions?
  11. 11. Getting started with SkiaSharp
  12. 12. 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
  13. 13. 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”
  14. 14. 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
  15. 15. Demo Getting started with SkiaSharp for Xamarin.Forms
  16. 16. Graphics programming
  17. 17. Drawing Methods DrawCircle, DrawRect, DrawLine, DrawText, DrawBitmap DrawPath (the only one you really need) Transforms Translate Scale RotateDegrees and RotateRadians Clipping
  18. 18. Style: Stroke, Fill, or both Color: SKColor value StrokeWidth StrokeCap: Butt, Square, or Round StrokeJoin: Miter, Bevel, or Round Shader: gradients or bitmap tiling
  19. 19. Demo Back to Visual Studio…
  20. 20. 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
  21. 21. Demo Back to Visual Studio…
  22. 22. Final touches
  23. 23. CreateLinearGradient CreateRadialGradient CreateSweepGradient CreateTwoPointConicalGradient CreatePerlinNoise… CreateBitmap: Tile with SKBitmap
  24. 24. CreateDash Create1DPath: Dashed with other path Create2DPath: Stroked with array of other path CreateDiscrete: Jitter effect
  25. 25. Demo Visual Studio: the final return
  26. 26. aka.ms/buy-xamarin-university Start your free Xamarin University trial. Learn to build better mobile apps.
  27. 27. Starting at $83.25/month Use existing Azure subscription Flexible billing options
  28. 28. 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
  29. 29. Thank You
  30. 30. Q&A
  31. 31. © Copyright Microsoft Corporation. All rights reserved.

×