Drawing Graphics In Your Apps with Maui.Graphics

hey everybody how's it going in today's video i'm going to walk you through the maui.graphics library let's go i've got this little demo app here and this is this clock you see here that's actually animated that's going to be the code we're going to talk through all of that code is in the github repo down below so don't worry about trying to type as we go i'm just gonna explain the code and you can grab it from there but this is completely drawn in maui.graphics and uh i will also say that just because the name is maui.graphics doesn't mean it's only for maui you can actually use this in any dotnet application so in fact to prove it i've got some f sharp code that i wrote that is uh you know using maui.graphics and it is just a straight.net application and there you go it writes the the clock out to a file i didn't go through the whole steps of doing the animation and stuff but there you go um and in fact if you would like to see more f-sharp content please let me know down below because i love f sharp and i would love to talk about it more so anyways so yeah you can use this anywhere and that's what we're going to go through today in this clock so let's start with how how these these kinds of things are structured so uh you have this concept of a drawable so you'll have an object called uh it inherits this eye drawable interface and i named mineclock drawable and it'll have the the one method it has to implement is the draw method and the way you pull this drawable into your view is through this uh tag called the graphics view and the graphics you will have a drawable and in our case we pass it a stack resource clock drawable and the way we create the static resource is through this contentpage.resourcestag and i have this name space called drawable that contains my namespace and i'm grabbing an instance of a clock drawable object and then i'm giving it a key of clock drawable so i can then reference that in the drawable for my graphics view okay pretty simple then this graphics view basically every time it is loaded or paints whatever you're going to call it it will draw your drawable so that's the xaml part of it let's look at the code behind real fast so the redraw clock method is just a method i use to basically redraw the clock and we'll talk about that in a second so this main page all i'm doing here is i've got a timer object a system.timers.timer and it's ticking for 1000 milliseconds so one second and every time it elapse i want it to run this redraw clock method and then in here all i'm doing is i'm grabbing the graphics view from the name in the xaml so if i go back to the main page i wrote x name equal clock graphics view and then in the code behind i'm using that to grab the graphics view and then i'm calling this invalidate method and what invalidate does on a graphics view is it as it says here informs the canvas that it needs to redraw itself so basically every second i'm ticking with the timer and i'm running the redraw clock which is telling it that it needs to redraw itself every second so then if we go look at our clock trouble basically all i'm doing in the clock drawable object is i'm drawing the clock with the correct you know position of the hands so let's talk about that because that's the kind of maui.graphics uh focus part of this so just to talk through this code real fast i've got a daytime object current time daytime equal now i've got a center point so this is centering the clock at a specific point obviously if you were doing this like for responsive ui type stuff you would you would do some math here or something i just for demo purposes just did 200 300 and then i gave it a radius 100 so in your draw method the two things that are given to the draw method that you get from i drawable are an i canvas object called canvas and a rect floating rectangle floating point object called dirty wreck and canvas is essentially your blank canvas in the graphics view that will you can then quote paint on and then the dirty wreck is actually just gives you information about the canvas itself so you could probably use information in dirty rec to for instance get the center point of where you want you know dirty rec dot width divided by two that kind of thing so there basically you take the canvas object and you call a bunch of methods on it and you know set properties on it so i said a stroke color of colors aqua colors comes from maui.graphics.colors easy enough and then there's an aqua color there's all kinds it's the same colors that you would see if you look in xaml and then i have a stroke size which is just the thickness of each line and then i call this draw circle method and this is actually the outer circle uh right here so yeah we're doing the clock center point so draw circle takes two you know there's other overloads but this one takes a point f of center and a float radius and our radius we just set to 100 here so that's 100 pixels whatever you call it and so yeah this is my clock my outer ring this is actually an inner point in the circle you see this little circle in here that's what this is and then canvas dot stroke size this is for slightly smaller for the hands and then we get to drawing our hands if you if you've never done you know clock math before it's a little involved you got to do some there's some signs and some cosines but in each of these methods basically all i did was i passed it a date time for the current time a radius and a center point for the hour you know i adjusted down to 12 because it gives you all the way up to 24 for hours i adjusted it down to 12 just so the clock made sense and then right here i'm getting the angle in degrees so that's the hour times 360 divided by the number of possible hours and then var angle is actually the angle in radians which you need because you're working with a circle and then hours shorter is i just wanted to make the hour hand shorter so it's it's right there and then i have the math to get the outer point of the line because you always know where it's going to start it's starting from the center right so i want to get the outer point for the line and that's just some math i actually just found this formula online and then adjusted it to what i needed but it's basically just your your radius times math dot sine you know of your angle and radians plus the center point uh you know the x property of center and then you have hours shorter the negative hour shorter times math.cosine of your angle and radians plus center dot y and you need floating points because we're doing a point f object and then you pass it back and that's pretty straightforward the other methods are the exact same except they use minute and second and they divide by 60 instead of 12. i could have probably wrote just one method for all this and and just parameterize a little better but hey whatever it's quick code and then i get those points and then i call the canvas.drawline which just takes two points and it draws a line between them easy enough and so i've got clock center point for the center and then our point for the hour hand minute second and that's it and you draw a clock that way so the the main takeaways really are your drawable class is going to be where you draw your graphic and if you want to update that graphic because for some reason you know whether it's some input of data or uh in my case the the data input is the time changed you would then call a graphics view dot invalidate which tells it hey that that drawable is no longer valid redraw it and so you you draw it and then you get an updated drawable and it creates an animation basically so you could make your own animations this way yeah and so you've got your canvas object and then you can do there's all kinds of stuff you can do with a canvas object you can set alphas you can draw all kinds of different shapes there's you can draw text so um you can take in text and write it to the screen and and do all kinds of transformations on it and stuff you can do a fill circle or a fill ellipse which basically instead of drawing a circle would fill it in as well you can do all kinds of stuff there's a lot of methods out here you can do stroke dash lines which is cool there's there's all kinds of of things you can do if you wanted to just to know if you wanted to animate this at all for instance what you could do is you could take your graphics view and do you know some kind of rotate or something rotate to you know that kind of that kind of animation so you take the view and you animate it just like you would any other view control so cool yeah i mean you know this is a quick introduction just to kind of get you up and running but hopefully that helps yeah it's you know it's not very complicated but i just wanted to show you kind of the architecture of you've got a graphics view you've got a drawable you've got the graphics you attach to the drawable and then you create a drawable and i was just putting them in these drawable folders and then yeah and then you you redraw it when you when things update and you want to draw it differently so obviously you know this is a decent amount of code for a clock if you're doing really advanced stuff it can get pretty you know advanced i i plan on doing some drawable stuff because i want to make some kind of custom controls that way i want to see how that goes i know there's other ways to make custom controls in maui but i kind of want to draw my own and see you know what kind of pretty things we can do with ui so that's how i plan on trying to use it but yeah there's all kinds of ways if you want to make a clock in your app there you go that's how you do it what's gonna be really fun is every time i cut you're going to see the time jump this was a terrible idea to put a timer on the screen anyways so now you know maui.graphics you have a quick introduction obviously you know the sky's the limit in terms of what you want to do but do you know how to do sqlite database stuff do you know how to do rest calls in your apps things like that you know those are kind of the core foundational things and if you don't i have a series that may help there right here is going to be a playlist where i've kind of gone through building my first app and.net ml it's a very basic app at this point we're gonna do more to it but it has a sqlite database in it it has api rest calls it has all kinds of stuff and i kind of show you how i did it you know there's other ways to do it but this is how i did it and yeah it may help you learn that stuff so if you if that interests you at all click there and let's get on the next one

Channel: Programming With Chris

Views: 7,956

Keywords: .net maui, .net maui community, .net maui example, .net maui preview, .net maui tutorial, csharp, dotnet maui, dotnet maui getting started, dotnet maui tutorial, first net maui app, how to run first .net maui, how to run first net maui, learn .net maui, learn dotnet maui, maui c# tutorial, maui for beginners, maui tutorial, what is .net maui

Id: SH8oQZp0oF0

Length: 10min 9sec (609 seconds)

Published: Fri Aug 05 2022