From Dribble to .NET MAUI - XAML App DALL-E Challenge # 2

foreign School welcome to this new video in which we will continue doing some graphic interface challenges to create an app that could help you communicate with an AI generated image API and publish this app in an app store for example or modify it to suit your needs in a previous video we had created this graphic interface that you can see on screen which turned out quite well today we're going to continue creating this second screen where the configuration or specifications for the AI generated image should be set based on this design we will create a new page as part of Visual Studio we'll go to the folder called views and create a new content page we select the.net Maui category we select the content page and we will name this page for example generation options view this creates the new page for us I will remove the default vertical stack layout and replace it with a grid this is how we can again specify the different sections that make up the screen and assign a specific percentage I'm going to enlarge the screen a bit next let's indicate that we want a margin of 25 comma 25 comma 0 comma zero this is similar to the graphic interface of the first page which was dashboard View the row definitions will be a bit different as the first will be point to asterisk the second point one asterisk the next 0.1 asterisk the next Point through asterisk the next point to asterisk and the last point one asterisk this is the definition you'll need if you want to follow this tutorial as part of the graphic interface the first thing we have to do is create this first section where the title and subtitle of this specific page are specified to do this I will create a vertical stack layout with its vertical option set to Center and as part of the content of the vertical stack layout I will create a first label control with a font family equal to Nexa heavy that we had already defined in a previous video iPhone size equal to 30 a text equal to select options which is the text we have as part of the design on dribble we will also specify a text color equal to White as a second control we will create another level control we will specify a margin of 0 comma 10 comma 0 comma zero a font size of 20 and a text that says minimum of six options the text color will be ACB 1bb after saving changes and starting the application we see the main graphic interface screen we need to change the starting page in app.saml.cs to be generation options View upon opening the app we can see the main title but we need to modify the background color to better visualize the content we will set a background color of 10 12 16. next we will Design the top section to select a minimum of six options I'm not sure what these options are for but we will Design this as part as well later on the style of the image and the prompt used to generate the image are specified to proceed we need a data model or information to complete this listing we will do this by going to the code behind of the page that is to generation options view.saml.cs first we will create a private method called fill options inside this method we will fill out a listing that we will Define as part of the class it will be a public property of type list of strings called options with its respective get and set within the field options method we will indicate that options is equal to a new list string and fill in information with terms like World winter entries here you could add all the terms you want to finish we will invoke this method after the initialize component method and indicate that The Binding context is equal to this to access the information of this property once this is done we return to the XML code and after the vertical stack layout indicate that we want to create a collection view we place it in row number one with an item Source equal to binding options which is the listing defined earlier we close this definition and then access the property called items layout as can be seen in the design this listing or collection is arranged horizontally therefore we need a linear items layout with an item spacing equal to 10 for example and end orientation equal to horizontal after defining this part of the linear items layout we Define the item template indicating collection view dot item template inside we defined unnecessary data template and as part of the data template we want agreed with the height request equal to 50 units to set the space for each of these elements we also indicate a with request equal to 150 units so that the text fits perfectly having defined the grid we create a round rectangle as each of these elements has a rounded shape we indicate a corner radius equal to 35 and a field equal to 24 25 29 we close this definition and also close the solution Explorer the round rectangle will serve only as a background in fact if we save the changes and start the application we can see the space that each of these Concepts will occupy a grid does not have defined columns or rows so the elements try to occupy all the available space when creating the level control its horizontal options are set to Center the text has a binding to the current text of the collection with text color set to White and vertical options set to Center when saving the changes the list of options is displayed the next step is to create a control that invites users to choose a style for the image to be generated after the collection view a level control is created with grid dot row set to 2 and font family set to Nexa heavy the font size is set to 20 and the text says choose a style of picture with text color set to White and vertical options set to Center as subtitle is displayed that invites users to select a style for the image to be generated another collection is created to select the style of an image to be generated using another collection View for this information about the style name and the style image to be generated is needed a new class called art style is created in the models folder this class defines the style name and the image URL a load the image previously imported in the resources folder will be used in the subfolder called images with the class created a list is filled with a new property in the code behind of the page a public list art style is defined importing the necessary namespace and it is called styles within the method called fill options the list is initialized with a set of styles assigning the name of each style and the path to the image to be used as part of the style with the list of styles created a new collection view is created in the xaml code after the label control a collection view is created in row number three with item Source set to Styles and selection mode is set to single The Collection is horizontal so a linear items layout is specified with item spacing set to 10 and orientation set to horizontal and item template is created within add data template and a grid is added a border is created with stroke shape set around rectangle and stroke thickness set to zero inside the Border an image is created with Source set to The Binding of the property called image URL upon saving the changes and launching the application the result of the created work is displayed this listing looks quite good allowing to select each of the styles to generate an image using artificial intelligence however it is necessary to add the style of each one so the user knows which one to choose combined with the prompt they can enter after the Border element a level control is created with a margin of 0 comma 0 comma zero comma 10 a fund family equal to Nexa heavy a font size equal to 15 units horizontal text alignment equal to Center x equal to a binding to the name property a text color equal to White and vertical options equal to and to place the label at the bottom of the Box we are viewing upon applying the changes the corresponding text for each of the Styles can be seen however in some cases the text doesn't look very good such as in the case of the dog with a quiet spot on its body or the flower style to make the text stand out a shadow is created for the level control a property called Shadow is given and a shadow is created with a brush equal to Black and opacity equal to 1 a radius equal to 1 and an offset equal to 5 comma five after setting the changes a shallow can be seen that makes the text stand out even with a white color improving its appearance with this set of styles the next step is to create a section where a prompt can be entered to generate the image using artificial intelligence to do this a new border element is created in Visual Studio positioning it in row number four a margin equal to 0 comma 15 comma 25 comma 0 is specified a background color equal to 24 25 29 a stroke shape equal to round rectangle 20 20 20 and a stroke thinness equal to zero upon saving the changes the space is created to place the editor control and be able to enter text in this area which looks quite good we need to specify as part of the border the control we want to insert which in this case is an editor control we're going to add a margin equal to 5 to have some space so that this editor control is actually within the border and we don't have visibility issues also a background color equal to 24 25 29 which is the same color as the border and a text color equal to White we save the changes go to the emulator and now we have this section or this editor type control where we could add text here we have a couple of issues that don't look so good for the graphic design part firstly this card type control that allows us to know authenticator that allows us to know in which section of text we are and also this underline type style that by default appears in purple ideally we should change this pair of controls or this pair of graphical interface elements to have a better color first we will see how we can modify the color of this selector or the current element to do this I stop the application execution and go to the project I will directly access the folder called platforms the Android folder resources values and we have a file called colors.xml I will change this accent color to white by creating three F's with this change I will start duplication execution to see how the change looks okay you can see that in this case the card already appears in a different color and even the underline has also changed to a white color in my opinion it could look better if we removed this underline since it adds some distraction a visually sign that in my opinion is not so good to remove that part we will go to the code behind again of the application or the page which is Generation options view.saml.cs and after this binding context we can add a Handler to modify this behavior in my case I have already added or created a piece of code that will allow us to achieve this only that for this practical case I have only done the Handler for Android if you wanted to do it for iOS and windows as well it is possible to do so in fact it is your homework to do it so in the case of Android what we have to do is modify the background tint list property and here we are simply assigning a transparent value for the background themed list and with this we're going to make the underline disappear okay you can see that we now have the editor control and the line that appeared before is no longer there which means we have a cleaner design and we have achieved the goal of having the editor control with this background according to the design on dribble the last step is to create the blue button we see at the bottom to do this we will return to the example code and after the border control we will create a button type control that we will position in row number five we will assign a background color equal to 98 C 0 f e although you could also put those colors in your resource dictionaries if you wanted to the button will have a corner radius of 25 horizontal option set to Center to align the content the text set to generate a text color set to Black for good color contrast and vertical options set to Center lastly a good request of 150 units upon saving the changes and returning to the emulator you will see the generate button now appears with this we could select one of the added Styles and input a prompt to generate an image using artificial intelligence I hope you enjoyed this video in the next part we will create the final page where the AI generated image will be displayed comment if you would like me to continue making videos like this and don't forget to subscribe like the video and share it on your social media see you in the next video [Music] thank you [Music]

Channel: Devs School

Views: 2,265

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

Id: 9GE_clfNgB0

Length: 16min 39sec (999 seconds)

Published: Tue Apr 25 2023