INTERMOB_MIDTERM PDF

IT2115 User Interface with XAML Fundamentals A markup language is a computer language that is used to introduce various elements in a document. Elements are described using predefined tags. The tags have specific meaning in the context of the domain where the d...

IT2115 User Interface with XAML Fundamentals A markup language is a computer language that is used to introduce various elements in a document. Elements are described 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 (HTML) to create a webpage that you can display in a web browser. Extensible Application Markup Language (XAML) is a declarative language created by Microsoft that is based on XML. XAML was designed to simplify the process of creating the UI in applications. UI on XAML will allow the separation of the app’s UI and behavior to make it easier to manage both. Other benefits include: Division of labor: Since XAML is a markup language, it does not require programming knowledge. Designers can focus on XAML and programmers can focus on writing the code. Tooling friendly: It is possible to use a design tool to create the XAML layout for you. 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, the types can be created using Object Element Syntax, 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: The above XAML element will be parsed by the XAML parser to instantiate the object in memory. This is the same with the following C# code: new Label (); The next thing to do is instruct the XAML parser to use controls. We add this instruction using 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 XAML document is ContentPage.... The two XML namespace (xmlns) declarations refer to URIs on microsoft.com. However, these URIs have no content, and they function as version identifiers. The first XML namespace declaration means that tags defined within the XAML file with no prefix refer to classes in.NET MAUI, for example ContentPage. The second namespace declaration defines a prefix of x. This is used for several elements and attributes that are intrinsic to XAML itself and supported by other XAML implementations. At the end of the first tag, the x prefix is used for an attribute named Class. Because the use of this x prefix is virtually universal for the XAML namespace, XAML attributes such as Class are almost always referred to as x:Class. The x:Class attribute specifies a fully qualified.NET class name: the MainPage class in the 03 Handout 1 *Property of STI  [email protected] Page 1 of 4  IT2115 MyMauiApp namespace. This means that this XAML file defines a new class named MainPage in the MyMauiApp namespace that derives from ContentPage (the tag in which the x:Class attribute appears). The x:Class attribute can only appear in the root element of a XAML file to define a derived C# class. This is the only new class defined in the XAML file. Everything else that appears in a XAML file is instead simply instantiated from existing classes and initialized. The MainPage.xaml.cs file looks similar to this: namespace MyMauiApp; public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } } In XML, attributes are used to describe or provide information about an element. In XAML, attributes are used to set properties on the underlying type. For example: The above XAML code creates a new Label object and sets the Text and TextColor properties. Since TextColor uses the Color type and string is the only valid thing that can be used for an XML attribute value, it is needed to convert the string value to the Color type. A Type Converter is used to convert an XML attribute value to its correct type. Event Handling The Button is the most fundamental interactive control. The Button control defines a Clicked event that is fired once the Button is tapped. The following code instantiates a Button in XAML. The Clicked event is set to an event handler named Button_Clicked. This handler is located in the xaml.cs file. Below is a sample method definition: Upon defining your UI in XAML, you will have to add code to respond to user interaction. private void Button_Clicked(object sender, EventArgs e) { PhoneDialer.Open(PhoneNumber.Text); } When the Button is tapped, the Button_Clicked method executes. The sender argument is the Button object responsible for this event. You can use this to access the Button object or to distinguish between multiple Button objects sharing the same Clicked event. 03 Handout 1 *Property of STI  [email protected] Page 2 of 4  IT2115 RadioButton It is a type of button that allows users to select one option from a set. Each option is represented by one radio button, and you can only select one radio button in a group. A RadioButton displays text when the Content property is assigned a string. To group radio buttons, you can set the GroupName property on each radio button in the group to the same value. The RadioButton control defines a CheckedChanged event that is fired when the IsChecked property changes. The CheckedChanged event is set to an event handler named RadioButton_CheckedChanged. This handler is located in the xaml.cs file. Below are sample method definition and output: private void RadioButton_CheckedChanged(object sender, CheckedChangedEventArgs e) { RadioButton button = sender as RadioButton; levelLabel.Text = $"You have chosen {button.Content}"; } SearchBar It is a user input control used to initiate a search. The SearchBar control supports placeholder text, query input, search execution, and cancellation. It has a Placeholder property that can be set to define the hint text in the query input box. The following code instantiates a SearchBar in XAML with the optional Placeholder property set: A search can be executed using the SearchBar control by attaching an event handler to either the following: SearchButtonPressed is called when the user either clicks the search button or presses the enter key. TextChanged is called anytime the text in the query box is changed. 03 Handout 1 *Property of STI  [email protected] Page 3 of 4  IT2115 The example below shows an event handler attached to the TextChanged event and uses a ListView to display search results. The TextChanged event is set to an event handler named SearchBar_TextChanged. This handler is located in the xaml.cs file. References: Bilgin, C. (2021). Mobile development with.NET (2nd ed.). Packt Publishing. Microsoft. (n.d.)..NET MAUI documentation. Retrieved on August 28, 2023 from https://learn.microsoft.com/en- us/dotnet/maui/ 03 Handout 1 *Property of STI  [email protected] Page 4 of 4  IT2115 XAML Pages type double. On iOS, the values are called points. On Android, they're Layout density-independent pixels. A layout panel is a.NET MAUI container that holds a collection of child views and determines their size and position. The layout panels automatically The sample XAML code below shows how to specify a label’s width and height. recalculate when the size of the app changes. An example is when the user panels: The layout panel reads the values during its sizing calculations and tries to accommodate the requests if it can. If there is not enough space, the layout panel is allowed to ignore the values. Both WidthRequest and HeightRequest cannot be used to tell the actual size at runtime. To solve this problem, the View base class defines two (2) additional properties called Width and Height. These properties are of type double and represent the rendered width and height of a view. You should use the Width and Height properties in retrieving the size of a view. There is also a need to set the position of a view. The View base class has two (2) properties that are used to set the view’s position: VerticalOptions and HorizontalOptions. These settings influence how the view is positioned within Figure 1..NET MAUI common layout panels the rectangle allocated for it by the layout panel. Both properties are of type LayoutOptions. StackLayout – arranges its children in a single row or column. Grid – arranges its children in cells that are created by rows and The LayoutOptions structure encapsulates two (2) layout preferences: columns. Alignment – the view's preferred alignment, which determines its AbsoluteLayout – arranges its children by using x and y coordinates. position and size within its parent layout. FlexLayout – arranges its child views like a StackLayout except that Expansion – used only by a StackLayout, and indicates if the view you can wrap them if they don't fit into a single row or column. should use extra space if it's available. If you don't specify the size of a view, it will automatically adjust to be exactly LayoutAlignment is an enumeration that contains four (4) values: Start, large enough to fit around its content. In building a UI, it is common to control Center, End, and Fill. You can use these values to control how the child view the view size. is positioned within the rectangle given to it by its layout panel. For horizontal alignment, Start positions the View on the left-hand side The View base class defines two (2) properties that influence the size of a of the parent layout, and for vertical alignment, it positions the View at view: WidthRequest and HeightRequest. WidthRequest lets you specify the the top of the parent layout. width, and HeightRequest lets you specify the height. Both properties are of For horizontal and vertical alignment, Center horizontally or vertically centers the View. 04 Handout 1 *Property of STI  [email protected] Page 1 of 4  IT2115 For horizontal alignment, End positions the View on the right-hand var a = new BoxView() { Color = Colors.Silver }; side of the parent layout, and for vertical alignment, it positions the var b = new BoxView() { Color = Colors.Blue }; View at the bottom of the parent layout. var c = new BoxView() { Color = Colors.Gray }; For horizontal alignment, Fill ensures that the View fills the width of the parent layout, and for vertical alignment, it ensures that the View stack.Children.Add(a); fills the height of the parent layout. stack.Children.Add(b); stack.Children.Add(c); Sample XAML code: Output: Output: StackLayout Stacking views in a vertical or horizontal list is a common design for user interfaces. A StackLayout organizes child views in a one-dimensional stack, either horizontally or vertically. By default, a StackLayout is oriented vertically. It can also be used as a parent layout that contains other child layouts. The StackLayout class defines the following properties: StackLayout automatically sizes and positions the views in a vertical list. Orientation – represents the direction in which child views are positioned. The default value of this property is Vertical. The code is simpler in XAML. The XAML parser adds the nested views to Spacing – indicates the amount of space between each child view. automatically. See the XAML version below. The default value of this property is 0. The following shows how to add three (3) views to a StackLayout using C# code. 04 Handout 1 *Property of STI  [email protected] Page 2 of 4  IT2115 The following example shows how to set the orientation to Horizontal: The Expands property is designed specifically for StackLayout and allows a child view to request extra space if there's any available. Here's an example of how the Expands property works: Output: Figure 2. Before and after expansion Below is an example of setting the Spacing property to 30: The extra space will be divided evenly among all views that request additional space. To request additional space, you replace the LayoutOptions value with one of these values: StartAndExpand, CenterAndExpand, EndAndExpand, or FillAndExpand. Output: The orange box is the view and the gray rectangle represents the extra space given to it by the Expands property. The view fills the extra space only when you use the FillAndExpand value. When you use the other values, the extra space remains empty, but it can't be used by other views in the StackLayout. 04 Handout 1 *Property of STI  [email protected] Page 3 of 4  IT2115 References: Bilgin, C. (2021). Mobile development with.NET (2nd ed.). Packt Publishing. Microsoft. (n.d.)..NET MAUI documentation. Retrieved on August 28, 2023 from https://learn.microsoft.com/en-us/dotnet/maui/ 04 Handout 1 *Property of STI  [email protected] Page 4 of 4