DotNet MAUI notes

XAML Views

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

So let’s just have a look more closely at each of the elements and the attributes therein.

ScrollView : Offers a capacity to have a scrollable content in relation to its inside-represented child content. ScrollView, makes sure that the content placed inside can only be scrolled up/down and/or left/right if the content itself is larger than the screen area.

VerticalStackLayout : Positions the child elements one after the other in a vertical manner.

Some of the attributes of VerticalStackLayout, include:

  • Spacing="25": It define the distance between each of the child element to be 25 units.
  • Padding="30,0": Uses a padding of thirty units on the direction of the axis of x, and zero units on the axis of y.
    Note: Syntax is usually “left,top,right,bottom ” but since only two values are provided it applies to “left,right” and ” top,bottom” respectively.
  • VerticalOptions="Center": Aligns the stack in the vertical fashion right down the length and breadth of the space available.

Image : Shows a picture on the page.

Attributes of Image

  • Source="dotnet_bot.png": Defines a file that contains image to be shown.
    Note: The image must be part of the resources of a project.
  • SemanticProperties.Description: Serves as text for navigation and screen reading tools, such as tools for the blind.
  • HeightRequest="200": Asks for a height of 200 units for the image.
  • HorizontalOptions="Center": It aligns it horizontally to any parent layout.

First Label

Label: Displays text on the page.

Attributes of First Label

  • Text="Hello, World!": Sets the text to display.
  • SemanticProperties.HeadingLevel="Level1": Use this heading level 1 for accessibility to mark this label.
  • FontSize="32": Specifically, the first value that appears in the brackets after each heading sets the font size is set to 32 units.
  • HorizontalOptions="Center": Stretches the label horizontally, originally.

Second Label

Attributes of Second Label

  • Text="Welcome to .NET Multi-platform App UI": Sets the text to display.
  • SemanticProperties.HeadingLevel="Level2": This command makes this label as heading level 2.
  • SemanticProperties.Description: Used for the description of the item to the screen readers.
  • FontSize="18": Procedures this set to adjust the font size in a size of 18 units.
  • HorizontalOptions="Center": This direction mainly brings the label to the image into horizontal centering.

Button

Gives an interactive button which will enable the users to click.

Attibutes of Button

  • x:Name="CounterBtn": It bestows the name CounterBtn officially on the button.
    Explanation: There for ‘x:Name’ is used, to give some name to the button and using the same name we can access this button in code behind.
  • Text="Click me": Defines the string to be displayed by the button.
  • SemanticProperties.Hint: Presents a hidden message to the screen readers about the button’s purpose.
  • Clicked="OnCounterClicked": Function which is triggered when a click action occurs on the button.
    Note: The result is that method “OnCounterClicked” has to be placed in code behind (MainPage.xaml.cs).
  • HorizontalOptions="Center": Horizontally justifies the button.

Example of connecting code behind 

private void OnCounterClicked(object sender, EventArgs e)
    {
        //Code goes here
    }

maui

, ,