Xamarin Forms #6: Create Greet App in C#

[Music] good day everyone i'm michael and i am using a text-to-speech program to have a more clear speech in audio for this video lesson we are going to create the ui and add controls for a xamarin forms app using xaml access xaml based ui elements from code subscribe to xaml based ui events recognize xaml versus code behind and create ui using code behind suppose you work for a power utility company as a mobile developer you're responsible for improving the company's customer facing mobile app currently the app's ui is built using c-sharp code however you've started to notice it's becoming more difficult to manage ui updates this additional maintenance is because the app is getting more complex it's difficult to read the core behavior logic as it's mixed in with ui code you want to find a solution that will introduce clean separation of ui and behavior separation of ui and behavior will allow your design expert to focus on what they do best and you'll have time to focus on coding the behavior of the app xamarin forms lets you define your ui using the extensible application markup language xaml xaml gives you a clean separation of user interface ui and behavior xaml also makes it easier to use a design expert and design tools in this module you'll learn how to create xamarin forms app that defines its pages and controls using xaml instead of c-sharp code creating ui on xaml will allow you to separate all your ui code from your behavior code to make it easier to manage both what are the benefits of using xaml extensible application markup language xaml is a markup language that you can use to build your ui instead of c sharp code using xaml you can split up your ui and behave your code to make both easier to manage in this video lesson we'll talk about some of the benefits of using markup languages to define your ui we'll also look at some of the benefits xaml provides to you as a xamarin forms developer what is a markup language a markup language is a computer language that you can use to introduce various elements in a document you describe elements using predefined tags the tags have specific meaning in the context of the domain where the document is used for example you can use hypertext markup language or html to create a web page that you can display in a web browser you don't need to understand all the tags that are used in the following example what's important to see is that this code describes a document that has the text hello world as content you've likely already worked with a markup language you might have created a web page using html or you might have modified the extensible markup language xml in your visual studio project file if the file describes a visual studio project file it's most likely an xml file and will be parsed by the microsoft build tools as you can see it's common for files that contain markup language to be processed and interpreted by other software tools this interpretative nature of markup is exactly how xaml is intended to work however the software tools that interpret it help produce app ui what is xaml xaml is a declarative markup language created by microsoft xaml was designed to simplify the process of creating the ui in applications the xaml documents you create contain elements that declaratively describe the application ui elements keep in mind that these elements in xaml directly represent the instantiation of objects once you've defined an element in xaml you can access it in code behind files and define behavior using c-sharp code difference between xamarin forms xaml and microsoft saml xamarin forms xaml is based on the microsoft 2009 xaml specification however the specification defines only the syntax of the language as with windows presentation foundation of wpf silverlight universal windows platform or uwp and windows workflow foundation all of which use xaml the elements you declare in the xaml will change xaml first appeared in 2006 with wpf if you've been working with microsoft xaml for a while the xaml syntax should look familiar there are some key differences between xamarin forms xaml and microsoft xaml the structure and concepts are similar however some of the names of the classes and properties will be different now let's go and open the greet app that we've created just a quick review this is the page we just created the greet page this is the xaml file and this is its code behind where we put our c-sharp code what i'm going to do is to create the ui of the app using c-sharp first we need to delete the codes from our xaml file then open the cs file let's also delete the method for our clicked event inside the partial class let's add a button object and name it greet button then we also add a stack layout object name it layout a stack layout is a layout that organizes its children in a one-dimensional stack either horizontally or vertically it's like a container where we put our objects now go to the constructor of the page then we add the properties of the button first we create a new instance of the greet button then open and close curly braces inside these braces we add the properties of the greet button we wanted the button to be at the center of the screen so we set its horizontal options to center the vertical options to center then the text property of the button which is greet after creating the button we are now ready to create the event for the greet button and that is clicked event type in the button.clicked the event we would like to create then plus an equal sign then press double tab this will automatically create the method for our click event then we need to add this to our stack layout as children type in the name of the stack layout that is layout.children.ad inside the parentheses type in the name of the button we created now we set the stack layout to be the content of our page inside the method for our click event we add the display alert method just like we did to the previous version of our app now let's debug and run this app sorry but i forgot to create an instance of the stack layout object so let's go back to stack layout and create an instance of it now let's debug and run this app again as you can see the output is the same for both xaml and c-sharp code the benefits of creating our ui using xaml code allows for the separation of design and behavior the entire declaration of the ui is contained in a single dedicated source file it's separate from the ui behavior what are other benefits of xaml as we just saw using xaml allows us to separate our behavior logic from our ui design this separation helps us build each independently that will make the entire app easier to manage as it grows however there are also two other benefits first is the division of labor since xaml is a markup language it doesn't require programming knowledge designers can focus on xaml and programmers can focus on writing the code second is the tooling friendly it's possible to use a design tool to create the xaml layout for you for example instead of writing the xaml by hand you can drag and drop controls onto a design surface using a graphical experience the first step in using xaml to build a ui is instantiating the ui control types in xaml we can create types by using object element syntax what is object element syntax object element syntax is a standard well-formed xml syntax to declare the element to instantiate for example if you want to declare a label your xaml element will look like the following code this xaml element will be parsed by the xamarin forms xaml parser to instantiate the object in memory effectively the parsed xaml label is the same as the following c sharp code what is a namespace an xml namespace is used to specify the location of the information needed to instantiate the xaml elements that you declare namespaces are defined by adding the xmlns attribute to the root element in the xaml document typically the root element of a xamarin forms xaml document is content page as you can see the xmlns attribute has a value of http colon slash xamarin.com schema 2014 forms which is referencing xamarin forms this value is known as the default namespace the second namespace xmlnsx has a prefix the x following the colon is a namespace prefix you'll use the prefix to indicate that you want to reference a namespace other than the default namespace for example in this case the x namespace is referencing xaml itself this namespace is where you'll find things like intrinsic clr types such as string integer and double how to specify property values in xaml in xml attributes are used to describe or provide information about an element in xamarin forms xaml we'll use attributes to set properties on the underlying type for example considering the following c sharp code we're simply creating a new label object and setting the text and text color properties to set properties in xaml we would use attributes and it would look like the following xaml one thing that you may notice that is different in the xaml code than the c sharp code is the values of the properties for example in the c sharp code we use the color type for the text color property however in the xaml we use a string to set text color since string is the only valid thing that you can use for an xml attribute value there needs to be a way to convert each string value to its correct type in xaml we do this conversion by using a type converter what is a type converter a type converter is used to convert an xml attribute value to its correct type to understand this concept better let's look at an example code in this code we create a label that is setting its text text color font size and font attributes properties let's start with the first property text behind the scenes text is already a string which means we don't need a typed converter as we saw before text color uses the color type so we'll need a type converter the font size property is an integer which means we'll use a type converter to parse the string to an integer finally font attributes is an example of a complex object you can combine the values as a comedy limited string bold italic the comedy limited string is treated as a flags based enumeration and the appropriate type converter will apply the bitwise or of the value to the property xamarin forms have associated type converters for most of the built-in classes however if a specific converter doesn't exist you can write your own and associate it to your type to make it usable in xaml complex type assignment type converters are great for simple property settings however in some cases you need to create a full object with its own property values the solution to this problem is to change the property assignment to use an element-based syntax this syntax is called the property element form this syntax involves breaking the property setter into the parent child form where the property is expressed in an element tag as type dot property name let's assume you want to assign a gesture recognizer to a label so that the user of the app can tap on the label the gesture recognizer is a complex object with its own properties typically these properties need to be assigned to ensure proper functionality if we wanted to assign this value to a label we can write our xaml this way label has a property called gesture recognizers by using property element form we can add our tap gesture recognizer to the labels list of gestures that's all for this video lesson if you have questions suggestions something to add or you think something is missing or incorrect to the lesson please let me know again this is michael thank you and see you at my next video lesson keep safe everyone you

Channel: Mikaelson

Views: 493

Keywords: Hello World, How to create app in C#, Xamarin forms, Xamarin, Xamarin for Beginners, XAML, Xamarin Forms Tutorial, C#, Java, C sharp, c++, Programming, Creating your first Mobile App, Android, iOS, Kotlin, Flutter, Xamarin tutorial, Xamarin Full Course, James Montemagno, Introduction to Xamarin, Mobile Development, Android Development, OOP, Object Oriented, Object Oriented Programming, Visual Studio, VS2019, Programming with Mosh, Mikaelson, How to Create Mobile Application

Id: PoxsPFyXEl4

Length: 16min 40sec (1000 seconds)

Published: Sat Sep 25 2021