SkiaSharp Graphics for Xamarin.Forms

hello today I'm going to show you how to integrate high-performance graphics into your xamarin forms applications using ski is sharp you can write graphics code in c-sharp that will run on a variety of platforms including iOS Android and the universal Windows platform and I'm going to build a graphics application right before your very eyes my name is Charles pencilled I am a proud member of the xamarin documentation team and I am also the author of the free downloadable book creating mobile apps with zaman forms that you can find on the xamarin website I have been writing professionally about PCs and programming and API since 1984 and back then a slide like this would have looked like science fiction in 1984 clouds were white fluffy things and mobile was a gas station but this slide pretty accurately represents this new world if we could see the electronic interconnections that surround us I am the guy with the phone yep if I don't have my phone with me I'm probably not wearing pants either I'm also someone who codes and writes about xamarin forms which means I'm constantly switching my mind and my focus among various platforms my desk these days has a surface pro a MacBook Pro an iPhone Android phone windows mobile phone and iPad and Android tablet and when a notification comes in it sounds like new and in a cuckoo clock factory That's not me exactly but I have used the watch to measure how many steps I take during the day and to have yet another device keeping me aware of notifications and yes I've been there too away from my desk out in the middle of beautiful serene nature with rolling hills and grassy plains all the while nervously looking around for a cell phone tower so I can post a photo of this lovely setting on Facebook we developers have a unique position in this brave new mobile first cloud first world if we want to address the entire mobile application market we must deal with three different developmental systems iOS windows and Android and we're writing code for each of these a combination of user interface code and business logic but each of these platforms is associated with different programming languages API frameworks and development environments for iOS you're dealing with objective-c or perhaps Swift in Xcode Windows is c-sharp and net in visual studio while Android is Java in Android studio and if you're part of a company that targets all three of these platforms you're probably dealing with three different programming teams that's too bad because while these three platforms might incorporate different user interface paradigms the underlying business logic is likely to be identical except that this business logic must be written in three different programming languages this is a problem that xamarin solves by allowing you to build applications that use the native API of these platforms xamarin reduces the Tower of Babel of mobile development to just one great development environment one great programming language and one great API framework these are the only tools you need so how does this work there are two basic approaches to xamarin cross-platform mobile development the first is that you can write the front ends of your iOS uwp and Android apps in Visual Studio using C sharp and dotnet to access the native API of all three platforms xamarin provides bindings that expose all the ios and android native API s in versions that incorporate C sharp and dotnet semantics then because you're using C sharp and dotnet for all three platforms you can easily share the business logic the alternative is xamarin forms shown at the right which implements a single user interface that maps to the native UI of these platforms this is truly a one program multi-platform solution and that's what I'll be using to a one thing about xamarin forms however is that it's missing a graphic system and that is also what I'll be addressing today the coming together of xamarin and Microsoft has synergistically strengthened the entire scope of mobile development not only are there tools to develop your apps in Visual Studio but also the test cloud to test them on a variety of real devices and jaqi app to get your app to beta testers for testing as well as tools to monitor end-user usage of your app track custom events and receive crash reports but this raises a whole other question how are you possibly going to learn all this that's the job of my good friends at xamarin University whose team of mobile experts have helped thousands of developers whether you've just recently graduated and you're new to the computer industry or you're an experienced enterprise team lead xamarin University can help you deliver amazing native apps using the greatest of programming languages c-sharp salmon university subscriptions include live interactive mobile development training led by zammurd experts offered in all time zones one-to-one sessions to get your questions answered fast you can schedule time with xamarin experts to review architectures remove technical roadblocks get mobile strategy guidance and more you also get self guided learning two essential xamarin training where you can earn course credits towards certification at your own pace classes include the same content as live versions there are more than 80 live and on-demand courses broken into eight learning tracks with constantly updated classes ranging from beginner to expert salmon university includes access to exclusive on-demand videos from industry leaders covering the latest mobile topics and challenges from new platform api's to testing and deploying on physical devices subscription options are flexible including a new monthly option starting at 83 dollars and 25 cents a month or less than $3 a day offering unlimited access to full course catalog expert mobile instruction and advice hands on help and more are you also have the opportunity become a xamarin certified developer designer designates that top mobile developers in the industry it is awarded to those who complete the certification track do vigorous coursework and demonstrate practical xamarin mobile development expertise so let's get moving the subject here is skia strap graphics for xamarin forms I'll be introducing you to the basics of this graphics programming language in the context of a real application keep in mind that you can ask questions any time during this webinar getting started what we're going to be looking at here is a graphic system called skia which is an open source C++ project that Google owns that is used in many Google products skia is an immediate mode graphic system immediate mode means that when your program calls various graphics drawing functions the graphics are very quickly rendered on the screen as the functions are being called the alternative is a retain mode graphic system in which graphical objects are persistent and render themselves when necessary immediate mode graphics is the more traditional approach skia is also a 2d system and primarily a vector graphic system which means that it's mostly concerned with lines and curves but it also supports the rendering of bitmaps and raster operations on those bitmaps of course many of us would much rather be programming in c-sharp rather than C++ and that's the purpose of skia sharp which is zamarons wrapper and packaging of the skia graphics engine when coding ASCII is sharp graphics you use C sharp and it integrates with dotnet for example later in this presentation you'll see how to load a bitmap into a program and you'll use some skier shop for that but you'll also be using a regular old dotnet stream object you can use ski to sharpen Windows forms apps windows presentation foundation Universal Windows platform as well as Apple platforms iOS TV OS and the Mac as well as Android and because the uwp iOS and Android are on this list that means we can use skia sharpens aberrant forms applications which target all three of these platforms of course kia sharp itself is open-source it's in a model repository rather than xamarin repository if you're just interested in adding skia sharp to your project you access the libraries through new get as you will be seeing shortly most of skia sharp is exactly the same for whatever platform you use it with but each platform has a few platform specific items when you use ski is representing forms you'll be drawing graphics on either an desk a canvas view or an S kgl view notice the word view on the end these classes derived from the xamarin forms view class so you can use these objects in layout just like a normal salmon forms view the SK canvas view in SK GL view classes both define a paint surface event the paint surface event handler is where you do all your drawing the event is accompanied by information about the display surface it also provides a surface object from which you get an extremely important canvas object you can also cause paint surface events to fire and hence generate calls to the paint surface event handler as you'll see this is how you do animation mostly uski is sharp to draw to a computer screen but you can also draw to a bitmap or the drawing commands can generate a file in the scalable vector graphics format which is an XML format supported by many browsers so let's get started and jump right into Visual Studio I'm on a PC running Visual Studio 2017 and over at the right is an Android emulator you can also run this program on an iOS simulator or a Windows Mobile simulator or Windows mobile device or the Windows 10 desktop or anything like that I've already created a xamarin forms project named clock you can see at the right in the solution Explorer the clock project itself as well as Android iOS and uwp stub projects let's add this Kia Sharpe libraries bring up the nougat manager for the solution pick the Browse tab search for skill sharp and there it is skia sharp dub used at forums let's add it to all the projects and that's it in the clock project you can see a main page that zamel file and a main page that zem of that cs code-behind file let's bring up the code file first and add a couple using directives for sceeto Sharpe and then we'll go into the sam'l file and one thing we'll need is an XML namespace declaration for skia shark dive view that forms I want to get rid of this label here but insert a ski of sharp canvas view give it a name set the bed handler for paint surface pick the default name and we are done you can instantiate an sk canvas view in code or zamel you can put it in layout with others and forms views you can set a specific size or let it adapt to the size of its container you can have multiple sk canvas view objects on the screen you can get touch input through them let's go back to the code-behind file and there is the paint surface event handler the paint surface event is fired when the canvas view first becomes visible and thereafter if the canvas view changes size for example if you tilt the phone from portrait to landscape or back you can also force a paint surface event with an invalidate surface method that's for animation the job of the paint surface event handler is to repaint the entire canvas we are ready to add some codes from the event arguments get an SK surface object and then and okay canvas let's clear to start off with a blank canvas I'll pick a random color such as cornflower blue let's compile to see if it's working a little time lapse but there it is the cornflower blue background we're off to a good start now this eske surface object is of limited use but eske canvas is one of the most important classes in skia sharp this is what you use to call every drawing function let's go back to the slides welcome to graphics programming the canvas is your drawing surface the SK canvas class defines all the drawing methods and I've listed the most common such as draw circle draw rect draw line draw text and draw a bitmap but as you'll see later Ischia supports a thing called a graphics path so really for drawing lines and other figures the only drawing method you need is draw path skia also supports graphics transforms that allow you to translate scale rotate or skew your graphics objects transforms are sometimes treated as an advanced topic in graphics programming but they are really so important so useful I'm going to introduce transforms very shortly now anytime you draw something like a circle you need to specify certain attributes such as color all those attributes are specified in an object of type SK paint now skia sharp is primarily a vector graphics system which means that graphical objects are defined as a series of lines and curves the most important property of SK paint is style which indicates whether you want to stroke these lines for example to outline a circle or to fill them for example to fill the circle with a color if you're stroking lines then you can also specify stroke widths and the appearance of ends of lines and how lines are connected we now know enough to go back to visual studio for some actual drawing I want to create an analog clock and the first thing I need is a circle for the background of this clock and I want that background to be black so let me first define an escape paint object for a black fill you can define these SK paint objects right in the paint surface handler and that's okay but if the paint surface handler is called frequently as this one will be eventually and you should watch out for creating lots of objects in the handler if you're going to be reusing as Kay paint objects you can define them as fields outside the handler and that's what I will do here and we set the style to fill and the color to black and that's it now let's go to the paint surface handler and draw a black circle in the draw circle method we need to specify a center in the form of x and y coordinates and a radius skier sharp draws in units of pixels x coordinates increase to the right Y coordinates increase going down the origin of the coordinate system the point zero zero is the upper left corner of the canvas now it's possible to determine how big the screen is and calculate the coordinates and size this clocks you would be and use those calculated values in the graphics drawing functions however it's usually more convenient to decide at the outset that you prefer to draw the clock in a particular size with particular coordinates for an analog clock for example it's very convenient if the center of the clock is the coordinates 0 0 and the radius of the clock is a fixed size for instance 100 units so let's do that Center at 0 0 radius of 100 with the black fill paint let's compile again and there it is look up and to the left we can only see a quarter of it because the center of the circle is sitting at the upper left corner of the canvas where x equals 0 and y equals 0 now obviously we need to do something and that something is transforms transforms are basically little chunks of math that are applied to all the coordinates before they are displayed we want to create transforms that move the center of this circle to the center of the screen and make it a bit larger the first job is to get the width and height of the screen in pixels and that's available from the event arguments and then apply two transforms the first to move the point zero zero to the centre of the screen and the second a scale to enlarge all the coordinates based on a scaling factor using the 200 unit diameter of the circle compile again and now it's more reasonable maybe to reasonable we probably don't want the circle butting up against the sides of this screen so if that's the case we could just increase that 200 factor to 210 or something but let's leave it for now one advantage of using transforms is that we can now draw everything else in the clock as if the center of the clock is the point 0 0 and the radius is 100 this is a clock so we need the time and because we're in a dotnet environment we can use date/time and I want to draw an hour hand a minute hand and a secondhand these hands will be white lines against a black background so let's create another sk paint object as a field now the style is stroke we want to draw lines rather than fill an area the color is white and it has a stroke width and a stroke cap so the ends of the lines are rounded this stroke width by the way is subject to scaling transforms to make it look nice I've also set anti-aliasing move down to after the black circle is drawn and draw an hour hand these coordinates draw a line from zero zero which is the center of the circle to zero minus 50 which is halfway up near the top of the circle this is the position of the our hand for 12 o'clock we need to rotate the clock hand based on the hour and minute this is another transform called rotate degrees 30 degrees per hour plus another 1 degree for every 2 minutes and now I want to make this our hand thick so let me set the stroke width to fix 15 pixels you can alter paint objects within the paint surface handler now the problem is I also have to draw minute hands and second hands and they need to be rotated by different angles all together and these calls to rotate degrees are cumulative so I want to save the current state of the canvas which is includes all the transforms before setting the rotation angle and restore the canvas afterwards and that's accomplished with Eske canvas methods name save and restore call save before you start transforms and restore after you're done now let's do the same thing for a minute hand except that the rotation is calculated based on the minute and second the stroke width is thinner and the hand is a little longer and similarly for the second hand you let's recompile the good news is that it's the correct time the bad news is that it's not very attractive and worse the hands aren't moving the time was correct a little while ago but it's already wrong that second problem is actually very easy to solve all we need to do is make sure that the paint surface event handler is repeatedly executed to do that we can use as Ameren forms timer and set it right in the constructor of the page class the timer is fired 60 times a second which is a typical refresh rate for a video display and the event handler simply calls invalidate surface and let's compile again and now it's an actual clock and you'll note that there is no flickering or anything nasty like that all the buffering to eliminate flickering is handled behind the scenes and everything is being with redrawn 60 times a second but the clock looks kind of plain as it is let's add our and minute marks around the perimeter just little dots to do this we need another sk paint object this one for a white fill and let's set up a little loop to draw sixty dots every six degrees draw a new circle bury the radius depending upon whether it's an hour or minute and rotate it by another six degrees by the end of the loop the 60 rotate degrees calls have accumulated to 360 degrees so there's no reason to save or restore anything compile again and it's looking better already have you ever seen one of those clocks that looks like a cat where the clock is actually in the body of the cat and there's a hit on top and a tail dangling down let's make this clock into a cat clock it shouldn't be too hard we can begin with another filled circle for the head the center is somewhere above the first circle and the radius is smaller 75 pixels rather than 100 compile again well we're obviously going to need some ears and eyes and a tail but it's also obvious that we need more room for this clock in other words we are scaling factor is too high let's go back and fix that by removing the simple division with divided by 200 and replacing it with a calculation based on both the width and height compile again and now there's room for the head and some ears as well and a tail these are not simple figures to learn how to draw these things we need to go back to the PowerPoint deck to draw anything other than simple lines and figures you need an SK path a path is a collection of contours each contour is a series of connected straight lines and curves contours can be either open or closed closed means that the end of the contour meets up with the beginning a complete path can then be either stroked to draw the lines are filled to fill all the enclosed areas move to begins a new contour line to adds a line to it there a variety of curves that can be added arc to adds a curve on the circumference of an ellipse or circle and there are a variety of bezier curves if you're familiar with scalable vector graphics or if you know the path markup language in Windows saml-based environments you'll be happy to know that SK path supports that path language and you'll be seeing an example shortly armed with this knowledge let's head back to visual studio you can create and define paths right in the paint surface event handler but keep in mind that the event handler is now executing 60 times a second so you might want to define the paths outside the handler and reuse them let's define some fields of type SK path adds for the cat's ear the eye the pupil inside the eye and the tail and let's actually define these paths in the constructor for the ear new path move to line 2 line 2 and close that makes a triangle just three points the cat's eye is a little more complex this involves a couple of arcs the arcs are rather complicated because they can be drawn in a variety of ways but the eye is just too connected arcs so it's not too bad the pupil of the eye is similar these coordinates are relative to the eye itself and finally a simple busy a curve for the tail four points we're going to need more paint objects the cat's eye has to be green of course and the tail needs to be black we already have an sk paint object for a black fill but now we also need a black stroke the coordinates of the ears and the eyes are relative to a coordinate of zero zero so we know we're going to need a transform to move them into place relative to the cat's head and as we know cats usually have two ears and two eyes so we might take advantage of this symmetry by using a transform to flip them around the vertical axis let's begin with a simple loop that loops twice for the two sides of the cat's head when I equals zero then the scale transform has an x coordinate of minus one so it flips everything around the vertical axis then when I equals one the scale transform is normal let's draw the ear with a nested save and restore so it's in the correct position and similarly for the eyes and while we're at it let's add some whiskers whiskers are simply white lines and we'll add four of them a cat has only one tail fortunately so that can be added outside the loop just simply draw the path with the black stroke there's a lot of new stuff here I think we deserve a recompile okay this is starting to look good but the hands of the clock themselves are still rather ugly they blend too much into each other so it's hard to distinguish them when they overlap one way to draw something so it stands out from something that's similar is to draw it with both a stroke and a fill to give it an interior color and a different stroke color and I think these hands should have a white outline with a gray interior and that means we need another paint object just another fill this time it's gray and I'm going to define the hour hand and the minute hand with a path that includes some Bezier curves but instead of doing it in code I'm going to do it in scalable vector graphic style these strings are one letter commands and coordinates Emmie's move c is a cubic Bezier spline l is a line z closes the path at the end and now we need to replace the code that we already have for these two hands here's the our hand we no longer need to set the stroke width or draw the line instead we draw the path first with a gray fill and then again with a white stroke similarly for the minute hand and since the white stroke paint has a stroke width of two I no longer need this statement which sets it back to two for the second hand let's see what it looks like now nice much better curvy old fashioned clock hands let's see if there's anything else in the PowerPoint slides that might help us pretty this up even more we've been dealing with solid colors but skia also supports what they call shaders which encompasses a collection of gradients some random noise tile bitmaps and it's also possible to combine these things for fancy strokes there are paths effects the - can create a custom series of dots and dashes but the next two can actually create a row or an array of little path objects so you can draw a line composed of little stars for example let's go back to visual studio one last time I want to replace the cornflower blue background with a tiled bitmap shader I have a little bit map of some wood grain somewhere around let me add that to the project add existing item let's go to my pictures and there's woodgrain dot ping add it I made this bitmap by taking a photograph of my floor very important you see the properties for this file down at the bottom here set the build action to embedded resource otherwise you won't be able to load it into the program and let's go back to the code-behind file and add a new paint object just for this background and it's defined as something very simple just a fill I need a couple of new using directives in order to load in the bitmap system that IO and system dot reflection and now let's load in the bitmap and create the shader to set the de background fill paint the code that's the assembly object first and then a stream object a dotnet stream and converts that to a skia sharp stream for loading in the bitmap and then creating the shader all these objects are disposable so it's a good practice to put them into using statements so they get disposed in an orderly manner finally set the shader property of background fill paint to the shader that we've just created now let's replace the original call that cleared the background with cornflower blue with code that paints the background with this paint there it is and now we just paint the background let's recompile ah looks like it's hanging up on a wall of your cabin there's a temptation now once we have the basic clock done to add some animation you can make the eyes blink you can make the tail swing back and forth like a pendulum stuff like that let me give you some advice if you have temptation to add some animation to this give in to those temptations in computer graphics there is no such thing as too much animation go crazy with it but let me try something a little different you recall that there was a busy ape act defined in the constructor for this tail let me first calculate a value of T for time that moves sinusoidally from minus 1 to 1 every second and I want to use that to recreate the path that defines the cat's tail so that the individual coordinates of the Bezier spline change with time one last time let's compile to see what this looks like well this is not your grandmother's cat clock now the tail is flipping back and forth in a rather agitated manner as if the cat is not entirely happy to have a clock embedded in its belly if you want to plunge deeper into xamarin technologies there's no better path to knowledge than xamarin University with salmon university you will be exposed to self-guided learning where you can go at your own pace lightening lectures and guest lectures covering the latest technologies and to live expert-led introductory courses that count towards your xamarin mobile developer certification you can sign up for xamarin university from the visual studio marketplace which offers monthly payment options and the ability to use as your subscriptions for less than three dollars a day you receive unlimited access to a constantly updated curriculum with everything ranging from topics such as c-sharp for beginners to classes covering the latest in navigation styles and controls for Android and iOS for more information about ski is sharp and skia sharp for xamarin forums check out the documentation on the xamarin website the program i've just built here is available for downloading from the samples gallery of the xamarin website it's called cat clock there are also plenty of other skia sharpers am informed samples and tune in again at the same time next week on June 22nd for xamarin University presents customizing xamarin forms user interface and on June 29th for the developers introduction to Azure machine learning previous webinars are available on channel 9 at the link at the bottom of the page thank you so much and if you have any more questions please continue to ask them you

Channel: Xamarin Developers

Views: 36,555

Keywords:

Id: fF0tzA6wUhA

Length: 41min 50sec (2510 seconds)

Published: Thu Jun 15 2017