From Dribble to .NET MAUI - XAML App DALL-E with animations Challenge # 3

foreign School welcome to this new video in which we're doing a graphic interface challenge with London Maui in previous videos we have created different screens for this application that could be useful for connecting to an API and generating images using artificial intelligence so far we have created two of the necessary screens for this application a third screen is missing which you will see next which would allow you to generate the image using artificial intelligence we see that these are very simple screen however that series of effects you saw at the end could cast you some problems if you wanted to create this application these effects that you can see on the screen in this video we will focus on creating this graphical interface in.net Maui to do this I will go to the project we have been working on previously in Visual Studio which is this project you can see here and we will start creating this screen first I will create a new screen as part of the project I will do this again in a folder called views I will click on add new item select the.net Maui category and choose a xaml Content page I will name this screen image generator View The Next Step I will take is to set these newly created screen as the start up screen so we can see how the graphical interface looks to do this I will go to the app.saml.cs where I will indicate that I want the initial screen to be image generator View and start the execution in the emulator you can see the default content for this screen that has been created I will go to the xaml file and start making some modifications such as changing the background color of the screen to color 10 12 16. we will save the changes preview the screen and we now have this new graphical interface I will remove the default content from this screen and instead add a grid with a margin equal to 25 comma 25 comma 0 comma zero I will also assign it a set of rows the first width 20 space the second width 60 space and the last with the remaining 20 space inside this grid I will place a vertical stack layout element with its vertical options set to Center let's look at the elements that make up this screen we have first of all the screen's title we also see a subtitle that shows us how much time it took to generate this image through the API we could connect to therefore we will create a label control inside the vertical stack layout this code is very similar to that of the previous screens we will use a font family equal to Nexa heavy a font size of 30 units and a text that says picture generated the text color will be white when we save the changes we can see the title as part of this screen we will create a second label control with a margin of 0 comma 10 comma 0 comma zero a font size of 20 units and a text that says time spent 30 seconds as a placeholder the text color will be AC B1 BB upon saving the changes we now have this subtitle in that video the main title appears split into two lines but in the emulator it is displayed in a single line to add spacing between these words we can include the symbol Ampersand followed by a pound sign then the number 10 and a semicolon as part of the text picture generated upon saving the changes the text separates successfully this is a simple way to separate text in the xaml code in.net Maui and other platforms the next step is to add the generated image section after the vertical stack layout I'll create a border control positioning it in row number one I'll use the stroke shape property with a round rectangle since the image has rounded Corners with the values to any comma to any comma to any comma 20. and a stroke thickness equal to zero inside the Border I create an image control with an aspect equal to aspect field and a source using one of the previously imported images such as cartoon.jpg upon saving the changes the image appears overlapping the Text due to small mistake I forgot to put a dot before the definition of the last row after correcting it the image appears correctly as a placeholder for the AI generated image the final step for this graphical interface is to create the button we will position it in row number two with the background color equal to 8ff 8e a corner radius equal to 35 a font size equal to 25 units a height request equal to 75 horizontal options equal to Center and a text that says finish as it appeared in the image the text color will be equal to 10 12 16 vertical options equal to Center and a width request equal to 250 units once we say the changes we can see this graphical interface looking quite good now we will begin with animations which is the most complex step of this video unfortunately Dal e doesn't provide a response every time a noisy image is generated what actually happens is that from an OC image some kind of new image is created instead of placing an element like this we will put a lot the animation to show the user that their image is being generated searching through Lottie files I found a cute robot in motion animation that would match well with the background we have previously placed to replicate this tutorial click on download and download the Json file as shown on the screen once downloaded go to visual studio and import it in the Raw folder to do this open the resources folder locate the raw folder that contains the about assets.txt file and that's where you should import the generated Json file after importing this file I'll right click select the rename option as I want to have a simpler name to handle it when we work with it the next step is to install a nougat package that will allow us to interact with or work with loti files right click on the project and let's indicate that we want to manage nougat packages for the solution we search for skia Sharp extended so that the result we are interested in appears in fact I will add Maui at the end although nothing appears in this list you have to click on this box that says include pre-release so that this package which is not currently available as public but in a preview phase is displayed I will select the package install it on the solution once the package has been installed I will go to magueyprogram.cs since we need to add the use skia sharp method here we will add it and with this we can use the graphic controls as part of the project I will save all the changes return to the XML file since I want to declare a new namespace to work with the control called SK Lottie View I will declare a new prefix indicate CLR namespace colon skia sharp and the namespace that really interests us is this one called skiasharp dot extended dot UI dot controls I will select it so that the namespace is automatically completed once these namespace is declared I will use this control under the border control where we have added the image I will position the control on row number one true is animation enabled I will indicate if I want the Low T animation to be animated set repeat count to -1 for an infinite animation finally I will indicate Source equal to the previously imported Json file which is the robot.json file I will start the application so that we can see how it looks after a few seconds we can already see the animation in the application however the background image is also appearing therefore I will control these border controls is visible property with a false value to make it disappear and with this the Border containing this image disappears I will stop the application for a moment and this is because I want to explain you what steps we need to take in the application or what we need to achieve you can see that as part of the application this image is generated certain seconds pass and I want you to see what happens when the image is generated when the image is generated a green rectangle starts to animate simultaneously with an animation in the second counter this is the first animation that occurs simultaneously once the rectangle animation is completed notice how behind the numbers 55 a second animation begins to fade away finally we have a third animation that starts the buttons movement to make it larger allowing us to press it and finish this step of image generation this is what we need to achieve as part of the application to do this we need to adjust the elements so that these animations can occur what do I mean first let's go with the simplest modify the button so that it does not appear by default you can see that while this whole process is happening the button at the bottom does not appear how can we achieve this well we can simply indicate that we want scaling equal to zero with which the button in the application will disappear as you will see in a moment OK you can see that we have the app or the page displayed here but this button is no longer immediately visible we're going to use this button temporarily to perform some tests I'll change the scaling from 0 to 0.1 which will minimally display this button so we can press it and do some tests with the animations I'm also going to add an X name for this button equal to BTN finish so that we can control it from the code behind and add an animation and we're also going to add the clicked event let's create a new event color that is created by default now that we have the event handler ready the next step we want to achieve is to stop the animation being executed by the robot and hide the SK Lottie view control how can we do this well let's go to the code behind of this page that we haven't touched until now and I'll declare a private method called stop generation once we have the method ready we'll invoke it from the event handler as mentioned earlier we want to stop the animation and hide it from the user's view to achieve this I'll indicate that they want to add a name to the control using xname let's call the Ctrl Lottie for example and from the code behind we'll set Low T dot is animated enabled to false to stop the animation execution and not overwhelmed the app's graphical interface next we'll set Low T dot is visible to false as we want to quite this control from the user's View if we go to the app you can see that if I press a button the animation stops and also disappears the next step is to display the image that has been generated by artificial intelligence to do this I'll go back to the XML file and give a name to the Border containing the image generated by the AI I'll assign xname the value image border let's save the changes go back to the code behind and the next step is to set image border that is visible to true to display or show the image to the user running the app again you can see that if I press the button the animation disappears and the generated image reappears the next thing we need to do is create the green animations we see on the screen you can appreciate that what's really happening is that a rectangle is being modified but it's scaling and opacity you can see how this rectangle is increasing getting bigger and also disappearing similarly this green color that appears behind the number what it does is become more intense that is its opacity increases this is the opposite of what happens with the green rectangle it's the first animation we're going to work with what we're going to do is duplicate the border with the image first to create an animation the animation you're seeing I'll go back to the app's xaml code I'll copy this border paste it I'll remove some things here like the image since we don't want to have the same image as part of the control I'll change its name instead of image border I'll name it for example image animation save the changes I'm going to stop the animation and we can look at this image again to be able to see this border we're going to change the is visible property to a true value now we have our border here which matches exactly the first border containing the image we're going to change the background color through background color and assign it the color e8ff 8e when built on the emulator we have this green color to better visualize the image let's change the opacity to 0.9 value save the changes and now we can see this rectangle right in front of the image but still allowing us to see a bit of the image in the background we now have this first border ready for the animation the second thing we need to do is add a border to this 30 second text so we can work with the border interactively from the code behind to do this we need to separate this string which is currently a label control into multiple elements what I'm going to do is change this label control and I'm going to delete it completely instead I'm going to create a horizontal stack layout with a margin equal to 0 comma 10 comma 0 comma zero inside I will create a set of controls first a level control with a font size equal to 20 text equal to time spent a text color equal to AC B1 BB and its vertical options equal to Center we previously had these properties in the label control I'm going to copy the labor control paste it a couple of times and modify the last label so that instead of the text being equal to time spent it's equal to zero as we watch the changes in the emulator we now have time spent time spent zero the next step is to remove the second label and this is because we want to create a grid containing but the text and the Border I'm going to declare a border control with an X name equal to border time so we can manipulate it from the code behind position it in row number one a background color equal to e8ff 8e also is visible is equal to True its opacity property is equal to zero and scaling equal to 1.1 a stroke shape equal to round rectangle 5 comma 5 comma five comma and finally stroke thickness equal to zero we're doing this because we're setting up the border to have some initial characteristics based on the video we're watching on the screen notice how this rectangle gets smaller over time and also gets lighter the initial properties are those we can see here and opacity of zero to reach a value of 1 and a scaling of 1.1 to reach a value of 1 as well now that we have this ready let's see how it looks in the emulator we have the app here and you can see that at the top this string is already divided into different sections I'm going to change the last string so that instead of 0 it says seconds adding a space at the beginning and I'll also add a space after the first label after time spent with this we now have the space available here to add how many seconds it took to generate this image next after the control border I'll create a control label with a font size equal to 20 text equal to 0 because as part of this text this is the text that I'm going to modify from the code behind to display how much time has passed since the image generation started I'm going to assign the same value that we've used for text color and finally vertical options equal to Center I close the label and now we can see how the subtitle would look once we start modifying the text or the value of the seconds with this if we change the opacity of the Border notice how we now have the background available that is displayed behind the text of the seconds once we have the initial controls to perform the animation I'm going to stop the app because we need to work from the code behind tool precisely animate these elements inside the stop generation method I'm going to indicate a weight task dot when any I do this because I want to execute a series of animations you can remember that in the video we saw several animations running at once the first animation I'm going to perform is to animate image animation which is the border that is under generated image the one that unfolds gradually from the inside out this image or border that we can see here I'm going to indicate that I want to animate it I want to animate the scale property and I want to go to the value 1.1 also in a span of one second what's going to happen here is that this border will go from the value 1 which we haven't specified but it's the default value to the value 1.1 we're also going to indicate that we want to manipulate image animation but now using the method called fade 2 which allows us to manipulate opacity we want to reach the value 0 in a span of one second as well additionally we want to animate the border that this part of this label we saw earlier this specific border and we're going to modify some properties in fact I'm going to copy these two lines and change only the name to border time first we're going to modify the scaling so that it goes from an initial specified value of 1.1 to the value 1 in a span of one second and finally we also want to manipulate the opacity to reach the value 1 so that it is displayed at 100 opacity with the changes made I'll start the execution of the app and press the button notice that the Border above the image is properly deployed we couldn't see the second effect because in the saml code I had previously modified the opacity value to 1 when initially it was set to zero I'm going to restart the app click on the button and watch as both effects are properly displayed if you noticed when we started the app we had the default green background let's go to the border that contains the image and set the visible property of that second border to false so that it doesn't appear when the app starts now the green border no longer appears behind the animation next I'll add a delay to avoid the abrupt change we are currently seeing when we start the execution of the stop generation method I invoke a weight task dot delay and indicate that I want a 2 second delay using 2000 upon pressing the button the image appears but the animation starts after a couple of seconds finally since we modified the is visible property of the second border we also need to modify the property once the animation begins to do this I'll add this line image animation dot is visible is set to true we'll start the app and see how it looks we'll press the button OK you can see that the animations have executed correctly the next animation we need to work on is the one where the background of the seconds Fades gradually and the last animation is the button this is very easy to achieve in.net Maui we go back to the code behind and once this set of animations is finished will indicate a weight border time which is a control we're interested in we'll apply a fade tool to a value of 0 over 300 milliseconds to make it faster finally we'll display the button through BT and finish using the scale 2 method to indicate that we want to reach a value of 1 over 1 second will run the app again click the button and all animations have executed correctly the next step is to create the timer that will allow us to modify this level control element to show us how many seconds the AI took to generate an image also we'll modify the logic slightly so that it doesn't depend on this button to initiate this transition but happens after a certain time I'm I'm going to stop the execution of the application I'm going to go to the top of the code behind file here I am going to add a new instance of a stopwatch through stopwatch we are going to call it for example watch which is equal to new stopwatch this class or this instance will allow us to know how much time has passed since the execution or the generation of the image by artificial intelligence to display this data we go to the XML file search for the label that will hold this value and add a next name equal to LVL timer next we'll add the code that allows us to start a timer to execute a task at certain intervals in this case every second to show us the time taken since the image generation began we overwrite the unappearing method and within this method we use a task.delay indicating time span Dot from seconds with a parameter of 2. this delay will help us pass the start of the task for a bit we start desktop watch to begin counting once this delay has passed then we use a variable called timer which is a new instance of a class called periodic timer we specify how often we want this timer to execute passing a value of timespan Dot from seconds to indicate that a task is executed every second we add parenthesis and inside we'll use a try catch since we'll be using a cancellation token we'll catch a task canceled exception and I'll explain why in a moment I'll fill in the catch information as part of the try I'm going to create a variable called counter and set it to zero I also need to add a closing brace to prevent errors then I'll indicate while a weight timer this class has a method called wait for next thick async that will allow us to control what happens after a tick is executed in this case we can pass a cancellation token so I'm going to declare it after the watch dot start line I'll indicate VAR CTS equals new cancellation token Source once it's declared I'll pass it as a parameter through CTS dot token this will allow us to cancel the execution of the task that runs at certain intervals what we're doing is running a task every second but in case the counter variable reaches a certain value that will help us count how many times the timer has been executed for example to know how many seconds have elapsed since the task started if a condition is met we'll directly cancel this task through the cancellation token source and execute the subsequent task from this sketch since once the task is canceled and exception of this type is directly thrown indicating that the task has finished and we can then execute the result of that task or what comes next after running the timer inside this while loop we'll check if counter equals 5 and if that's true we'll cancel the cancellation token source to execute this catch will indicate that when the condition of counter being equal to 5 is met meaning 5 Seconds have passed the task is to be canceled if this condition isn't met we'll declare a variable called seconds which will be equal to watch dot elapsed dot seconds to retrieve how many seconds have passed thanks to the stopwatch next we'll modify the text property of the lbl timer control assign it seconds dot to string and finally increase the counter by one CE the task is canceled through this if statement as mentioned earlier the execution of this sketch will take place and this is where will invoke the stop generation method instead of executing it in the button event handler these Strokes are narrow because the stop generation method has avoid return type will change it to task to avoid this problem we can remove the event handler without any issues inside desktop generation method we need to stop the stopwatch so it doesn't keep running will indicate watch that stop which stops the stopwatch the logic is the same in the stop generation method but the button is no longer responsible for executing this task we'll remove the event and modify the SK link to have a value of 0. upon starting the application you'll see that after 5 seconds are displayed on the lever control the animation and animation set will begin one second will pass 2 seconds 3 seconds 4 seconds 5 seconds and it's at that point that the processing of animations will start to display the AI generated image the number of seconds and finally the button to return to a previous screen or the initial screen if you liked this video I invite you to support the channel by giving the video a like subscribing and clicking on the Bell to receive notifications when I publish new videos related to graphical interface challenges with Don and Maui or other Technologies and coding with.net Technologies see you in the next video [Music] thank you

Channel: Devs School

Views: 3,312

Keywords: .net maui ui, .net maui ui challenge, .net maui xaml, .net maui design

Id: KH-Frrl70G4

Length: 31min 7sec (1867 seconds)

Published: Wed May 03 2023