**Course Title:** .NET MAUI App Development **Section Title:** Fundamentals of XAML and MVVM **Topic:** Core UI elements and layouts (Grid, StackLayout, FlexLayout) **Introduction** In the previous topics, we have covered the basics of .NET MAUI and the fundamentals of XAML and MVVM. Now, it's time to dive deeper into the world of UI design and explore the core UI elements and layouts that will help you build robust and visually appealing applications. In this topic, we will discuss three essential layouts: Grid, StackLayout, and FlexLayout. We will also cover other core UI elements that you need to know. **Core UI Elements** Before we dive into layouts, let's cover some essential UI elements that you will use frequently in your .NET MAUI applications. * **Label**: A Label is used to display text. It's one of the most commonly used UI elements in any application. * **Entry**: An Entry is a text input field where users can enter data. * **Button**: A Button is used to trigger actions in your application. * **Image**: An Image is used to display images in your application. * **ActivityIndicator**: An ActivityIndicator is used to display a loading animation when your application is performing a task. Here's an example of how you can use these UI elements in your XAML code: ```xaml <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.MainPage" Title="UI Elements"> <VerticalStackLayout> <Label Text="Hello, World!" /> <Entry Placeholder="Enter your name" /> <Button Text="Click me" /> <Image Source="image.jpg" /> <ActivityIndicator IsRunning="true" /> </VerticalStackLayout> </ContentPage> ``` **Grid Layout** The Grid layout is one of the most powerful and flexible layouts in XAML. It allows you to arrange UI elements in rows and columns. * **Grid Rows**: Define rows using the `RowDefinitions` property. * **Grid Columns**: Define columns using the `ColumnDefinitions` property. * **Positioning UI Elements**: Use the `Grid.Row` and `Grid.Column` properties to position UI elements within the grid. Here's an example of how you can use the Grid layout in your XAML code: ```xaml <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.MainPage" Title="Grid Layout"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Label Text="Hello" Grid.Column="0" Grid.Row="0" /> <Label Text="World" Grid.Column="1" Grid.Row="0" /> <Label Text="Welcome" Grid.Column="0" Grid.Row="1" /> <Label Text="To .NET MAUI" Grid.Column="1" Grid.Row="1" /> </Grid> </ContentPage> ``` **StackLayout** The StackLayout is a simple layout that arranges UI elements in a vertical or horizontal stack. * **Orientation**: Use the `Orientation` property to set the orientation to `Vertical` or `Horizontal`. * **Spacing**: Use the `Spacing` property to set the space between UI elements. Here's an example of how you can use the StackLayout in your XAML code: ```xaml <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.MainPage" Title="StackLayout"> <VerticalStackLayout Spacing="10"> <Label Text="Hello, World!" /> <Entry Placeholder="Enter your name" /> <Button Text="Click me" /> </VerticalStackLayout> </ContentPage> ``` **FlexLayout** The FlexLayout is a layout that arranges UI elements in a flexible and responsive way. * **Direction**: Use the `Direction` property to set the direction to `Column` or `Row`. * **JustifyContent**: Use the `JustifyContent` property to set the justification of UI elements. * **AlignItems**: Use the `AlignItems` property to set the alignment of UI elements. Here's an example of how you can use the FlexLayout in your XAML code: ```xaml <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.MainPage" Title="FlexLayout"> <FlexLayout Direction="Column" JustifyContent="Center" AlignItems="Center"> <Label Text="Hello, World!" /> <Entry Placeholder="Enter your name" /> <Button Text="Click me" /> </FlexLayout> </ContentPage> ``` **Conclusion** In this topic, we have covered the core UI elements and layouts in .NET MAUI. You have learned how to use the Grid, StackLayout, and FlexLayout to arrange UI elements in your application. You have also learned about other core UI elements such as Label, Entry, Button, Image, and ActivityIndicator. **What's Next?** In the next topic, we will cover data binding and MVVM in more depth. You will learn how to bind data to UI elements and how to use the MVVM pattern to separate your application logic from your UI. **Additional Resources** * [Microsoft Documentation: Grid](https://docs.microsoft.com/en-us/dotnet/maui/user-interface/controls/grid) * [Microsoft Documentation: StackLayout](https://docs.microsoft.com/en-us/dotnet/maui/user-interface/controls/stacklayout) * [Microsoft Documentation: FlexLayout](https://docs.microsoft.com/en-us/dotnet/maui/user-interface/controls/flexlayout) **Comments and Questions** Please leave a comment or ask for help if you have any questions or need further clarification on any of the topics covered in this section.