[MUSIC] >> Hello. It's a pleasure
for me to be here. Today I will be talking about
the UI design for the NET MAUI. As you know, is a topic
that I really love. For today we will be speaking
a little bit about that, but first of all, I want to introduce myself. I'm Leomaris Reyes, a Student Team Lead en Platzi, software engineer from
the Dominican Republic. I'm also Microsoft MVP
for four years in a row. I'm a content editor. I usually talk about XALM in.NET MAUI and I also have my
baby, that is my blog. AskXammy.com, which I also
wrote about XALM in.NET MAUI. For me, it's a pleasure to be here. First of all, I want to introduce the two main goals that I went
to get in this presentation. The first is that I want
to teach you some tips to improve your XALM skills
and the second is that I want to explain a little
UI replicator and I want to analyze briefly each of the blocks
that I will be developing here. How we will divide these goals? The first is that I
will be teaching you the tips for selecting
a UI to practice. As we know, is to important
to continue practice, practice and practice to improve our XAML skill in.NET MAUI
or in XAML that is the same. The second is that we will be
starting analyzing a real UI, we'll call them Visual Studio. This point is subdivided
into the first is how to start coding
a UI to replicate, and the second is analyzing
the code to build these UI. The last one, but not
the least important, is how can I continue
practice my XALM skills? Knowing that, let's us start. First of all, I want to give you some tips for selecting
a UI to practice. For me, practice is one of the
main or the most important points to be better and to improve your XALM skill or whatever the
skill that you want to improve. Now the first tips is that you have to select a UI that challenge you. That is my first recommendation. Don't stay in the comfort zone. But I know that you are
thinking about how to do it. I don't know how to do it. I have three important point here. The first is that you have to select a UI that contains controls
that you have never used. For example, oh my god, these UI have a cycle button, I don't know how to do it, I don't have an idea. That's the right UI that
you have to select. The second point is
that you have to be the one that you are
afraid to replicate. Oh my god, I don't know, I don't have an idea how
to replicate this UI. I don't know how I will start, so that's the right UI that
you will help to select because it will be
keep challenging you. The third point is that
you have to then define some techniques that
you have not applied. For example, the overlapping
is a simple technique, but sometimes we don't
know how to do it. If we continue practicing
and repeating this way, we will be applying
this in a natural way. The second tips, is better for me, is that you have to
select that UI that you like and inspiring you. For example, in my case, I look for UI that have
a color that I love. For example, I use to find
some UI that have a pink, blue or purple colors, for example. Besides that, I used to select
themes that identify me, is so important, and of
course, with modern design. Keep in mind these previously
point. I want to start. Here, I have on a slide which indicates that we will
be starting to analyze a UI. In this case, I add our QR code, which blog posts that have exactly the same explanation
that I will be doing here. Leomaris is replicating course
UI profile in.NET MAUI, which you can scan and
continue analyzing. Here I have been selected
in a UI that I really love, which is too simple, is a profile UI. These are about online course. In this case, I want
to divide into blocks. But why I want to do it? Sometimes when we have UI that we don't know have an
idea about how to start, I see that is one of the
better tip divide into blocks. I have here divided in three blocks. Why? Because it will allow me to see key blocks and don't be Rubbermaid
about what do I have to do. Their first is the timeline. As you can see, the
timeline block is just ice composed by two image. The first is a background image
that it's here, is the timeline. The second is an image profile
that is a rounded image, and is followed by the name of the profile owner and
basic information, location, age, and as simple as that. Let's continue with
the second block. This is still simple, is the description block. In this case we have Angelica's Notes that is
a title for that text, and following by the
description about this note. This is just an
example, for example, etiam id dolor and so on. Third and the last block is for me, one of the most important
because it's composed by divided controls is the homework. In this case is composed
by that homework's title, and a collection of homework. As you can see, you have
inside that different frames, different homeworks that you
have to do in your profiles. We have an image and we have
the name of this homework, but is a set of information. Though it, we will be
using a collection view. We will be seeing this
in the next slide, and this is followed by the line. With these line, we will be
exploring different ways to do it. The last are two borders, that is a premium border
in the Get Detail buttons just to do an action
that the user wants to do. Keep in mind please, these three blocks, and that's how we will
be developing this UI. But first, I want to give you some different tips that
you have to keep in mind. The first is that we have previously done is divide your UI
in different blocks. The second is that
you have identified the main layout that is
better for your replication, but I don't know what
is the main layout. The main layout is the layout
that will cover all the code that you will be writing
inside your design. That's why it's important to analyze
what is the better decision. I used to use the
hybrid because it's providing one of the better
performance for my UI. But that's not always
the best UI to use. It's important to analyze
what is the best. The third is that you have to
make sure to do your tests or on all the available platform of
your app from the first moment. Please don't start use testing on iOS or you're testing in
Android please test in both because it will be
helping you to save a lot of time and to read your code
to clear from the start. Knowing that let's start
with the first block. Here, we will be starting to analyze the code that will be presented
might be solely student 9s. But first, I want to highlight
so important points. Here, as you can see, we have different controls
that we have to build, and that we have to add. For me the most
interesting are roles. The first is that we
have an image that is the timeline is a background
image with a rounded corner, as you can see here. This is one of the most
important tips to build in XALM. The second is that you have an
image profile which is rounded. How to do it in XALM? It's too easy, but
I want to highlight these because sometimes we don't know how to do it or
you used to reals, I don't know, Kusto renders and
in sometimes isn't necessary. Following by this control, you also have the name
of the profile owner and the basic information. Here I have add some
gits code which contain exactly the sample code that you
must use to replicate this UI. Here you have the portion of the timeline and here you
have the rounded image. But let's start with our Visual Studio to analyze this code that I have
previously build it. The first is, first off, start with the first block. I want to stop with the main layout. I don't know if you remember
what I was speaking about. What is the main layout
that I have to chose. In this case, I have
been choosing the grid. I have a grid with row definition
with the account that I need, and I have been adding up padding. Before that, I have to the
continuing developing the block. The first book is composing, building the timeline picture, the image profile, the profile
name and the general description. Let us start with the timeline. The timeline here, I just added a frame to get the
effort with rounded border. The frame is so important to get it. But how we cite a friend? As you can see, I have been adding different
properties that I need. For example, a border color, vertical option, high
requests and so on. But here we have some key properties that
you don't have to forget. The first is the IsClippedToBounds, that most be true. >> In this icons, the padding were zero. Of course,` don't forget to add the CornerRadius with the value that you want to add
to your corners. This is the frame that you
want to include this image. How can I add the image with
these simple lines of code? Inside the frame, you just have to add the image with the code that is the
name of the picture, in this case, is timeline, and with the aspect that you need. With this simple line of code, you have already this first
image that is the background. But I want to stop here to explain a little about the image source name. In this case, and you see, I have been adding the
name is lower letters. Please keep in mind that
to avoid some problem in the combination needed
to off some platforms. Continue with the image profile, I will be also work
indeed with a frame. Please don't forget
this same properties that I have previously mentioned, such as IsClippedtoBounds, in padding with zeros. But to get a perfect rounded image, I also need some additional
property about which are this. The first is that you have
to include both with and HeightRequests with
exactly the same value. But also you have to add
the CornerRadius property, but in this case, you have to add exactly the half
of the values previously added. This will be allowing you to create a perfect rounded image or
border or what do you need. In this case, is an image. Once you have that, you just have
to include inside this frame, what is the image which
you want to be rounded? In this case, is modelprofile. At this time, we have both the background timelines
and the profile image. Let's continue with the
following controls. The phases that we have here, the name of the profile owner, this is a simple label which is
located in our line of the grids. I have the texts, I have default attributes as bold, I have the TextColor that I need, and the HorizontalTextAlignment, with a Margin, and a FontSize. As you can see, it's a
simple label that is located to replicate the names of the owner. Let's continue with
the basic information that is this portion of code. Here, I have different
ways to do it. In this case, as you
can see, I will return. You have a set simple
of information, you have your location, you have your age,
and then your status. For example, the option to do
it with a collection view, if your information will be dynamic, but you also can include it in a simple way as I did
here that is in a grid. I leave you some different
option is depending of what is the scenario that you
have and what is your needs. Here, I add a simple grid. Any side is grid, I have been adding
different contrast. In this case, I have been
adding a button with an image source that have
as a name or location. I have also a label
with the location, in this case is Venecy, Italy. I have also a button with an age
with an ImageSource of the name, and I add all the properties
that I need such as margin, WidthRequest, HeightRequest, CornerRadius, and so on. I also have a label which
the texts of the age, and finally, a button
with the status. With this portion of code, I just have finished my first block, and I word it on, and
this is the reason. Is the [inaudible] replicate? You just have to follow, which are the most important
properties that you have to add in which are the right
layout to add in this case. I will continue with
the second block. In this case, I also
have added Gits code, which you can scan and where you
see your Gits portion of code. In this case, we just want to add a title and a
description. It's too simple. I will return to my Visual Studio, and I will locate it with my title. My title in this case
is Angelica's Notes, and it's a simple label which
contain some different properties. For example,
FontAttributes, TextColor, HorizontalTextAlignment, Margin, and FontSize in that case. I want to remember that for
some cases at any preferred to use is when I have different
projects to go to production, for example, I already made up. I used to use styles
because with the style, I can use wrapping up all these properties in just
any style and I can reuse it, and I will be saving some
lines of code just doing. Keep in mind. I will continue
with the description that is also on a simple label which
is located in a Row 5. Here, just need
horizontal alignment, that is a Start, and a FontSize, and the text that I
want to show all my UI. With this line of code, I just have replicating
these far of my UI. I will return here. These two lines of code have made replicating exactly
this part of our UI. I will continue with our final
block to finish our amazing UI. In this case, I want to highlight two important points that
we will be exploring here. The first is that we will
be exploring or using our collection view with
the homework in this case. Finally, we will be creating lines. You will see that we have
different options to do it. Here, I also add the
version of code, both the title and task list and
with the line in final buttons. Let's return to Visual Studio. Here, I want also to breaking down the explanation of
this lines of code. The first is that I have a label with the title about the homework. I have the Text, I have the FontAttributes, TextColor, and horizontal alignment, a Margin, and FontSize. Once I have been added the title, I want to start with
a collection view. Why do I use a collection view here? Because it's a set of information
that can be dynamically changed. If I just add a collection view, I will be avoiding just to
use hard code of my code. This is too important to make
my application as callable. They can encounter this. >> I want to establish
my collection view code. Here, I have been adding the basic restricted
about a collection view. As you can see, I have
been adding an item source with some sample information. I have been adding the
items layout here. It's important to add that
you want the audition tell wait about your list
because if you don't add it, will be with a vertical
wave by default. I have been adding the collection
view inside an item template, following by the data template. Any side here, I have been adding a stack layout. This stack layout
has inside a frame. This frame is because
as you can see here, we have a list with a different
square with rounded corners. The frame alone used to do it. That's why I have been adding
in here. I have a frame. Please don't forget to
add the corner radius, for example, the border color. If you've cast a shadow or not, in this case not, and add an additional option. Inside this we need a layout. In this case, I have a grid
with two row definitions. Inside this grid, I just need two different controls. The first is an image with a folder source and with the head
request and the head request, and this is followed by a label
that will be contained in, as you can see here, the file name that is binded. Binded because as I told you before, you can include this information in a dynamic way and it will be
allowing you to save time. Once you do have other text, you can also have some different properties such
as font size and text color. With this explanation we have be finished exactly the
collection view. The collection view, as I told you, is exactly the same with the set
of all that these profile has. But let's continue with another
controller that is also important. That is the box view. The box view is representing the gray line that
you see in this UI. I will stop here
because I want to tell you that you have
different way to do it. In this case, I have been
adding with a box view but you also can use the
line with the change, for example, about the net bar. This is an amazing decision. I just want that you'll see
different ways to do it. In this case, I'm having in a box
view with an additional option, and don't forget the K
requests that must be a small because if it's a line
you have to replicate the line. I have been having a margin
in the quarter that is also too important to
display your line. Finally, I want to explain the buttons that
are at the end of the UI. Here, I have add a grid to include these button inside
this grid because it has two columns and I prefer to do
it at the end and just to avoid to add two column more if I don't
need in the previously block. That's why I added this grid. Inside this grid, I have the two buttons. I have the first, that is a premium button with
its background color, with its image source, with it's width request, corner radius and font
side with the text color, and all the properties
that you need. Also that is the final
line of code I have. They get detailed buttons. Here, please don't forget
to add the corner radius, that X color, the background
colors and the font attributes. It will be helping you to replicate exactly as you need to
reduplicate this UI. With this portion of code, we have been explaining
and learning about how to do the third block that is gears, and now you have exactly the
complete UI that you need, in this case in XAML. The final result, if you run this code
that you can scan here, you will see appraisal ladies. As you can see, we have it in
vertical line or in horizontal way. As you can see both are beautiful. You can taste it also in Android and all the platform
that you are in it. Here, we are being finishes, but first of finish, I want to include
some important tips. In this case, I want to speak a little about how can I
continue to practice my XAML skills because
this is so important to continue growing up in the
MAUI or in your career. I have exactly three points
that I want to speak with you. The first is that please don't miss the news about.Net MAUI and the
contribution of the community. You have the Microsoft block
and different blocks and contribution in OpenSource
contributions that you can use. Please be up today, keep reading about all the
amazing news that you have. It's too important to continue
growing up in your career. The second is that you have to be inspired by boards and in this case, I have added an example like
gribble that I really love. You can replicate different UIs, different designs that we will
have or other portals that have the same facility,
that freedom. But please keep practice your XAML. Replicate UI and remember
all the tips that I have previously mentioned in the
starting of this presentation. Finally, take a look of
the SMPBTS that come. That is a website to see different
option to play with your XAML. Here you will see different
ways of thinking about XAML, how to do the different UI in XAML. They will be helping you to learn and to growing up above
the thinking about how to replicate a UI
[inaudible]. Thank you so much. For me has been a big
pleasure to be here. I hope that this presentation
will be too useful for you. If you need something please
contact me by my Twitter, my LinkedIn, or even my blog, and I also added the same QR that I have been adding when
we started this presentation. If you want to scan this QR, and you will be exactly
the same explanation, but in this case in a fighting way, which I hope to help you a lot.
Thank you so much [inaudible]
