Easily Design a Group Box View in .NET MAUI
Tags: maui, development, mobile, ui
Published: 2023-02-09 11:54:39

---
title: Easily Design a Group Box View in .NET MAUI
published: true
date: 2023-02-09 11:00:00 UTC
tags: maui, development, mobile, ui
canonical_url: https://www.syncfusion.com/blogs/post/group-box-view-in-dotnet-maui.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm6kdjotg50wu5jpm9xb.png
---
As a mobile developer, it is essential to prioritize the creation of a simple and uncluttered user interface that enhances the overall usability of the application. One way to achieve this is by grouping the UI elements based on their purpose and function. A group box view can be helpful in this regard, as they allow developers to group related UI elements with a frame UI.

In this blog, we will explore using group box views on the .NET MAUI platform to organize and simplify the UI of a mobile application. By utilizing group box views, developers can improve the usability and clarity of their applications for users.

## What is a .NET MAUI group box view?

A .NET MAUI group box view is a layout element in user interface design. It is a container that contains multiple controls within it. A .NET MAUI group box view aims to group related controls and provide a frame around them with an optional title.

## Why a .NET MAUI group box view?

A .NET MAUI group box view organizes and categorizes related controls, making it easier for users to comprehend the controls’ purpose and function. In user interfaces, .NET MAUI group boxes are widely used to group controls that perform similar functions, such as input fields for a form or buttons for controlling a particular component of the program. They can help reduce clutter and improve the overall usability of an interface.

In addition to providing a visual grouping for controls, a .NET MAUI group box view can also be used to enable or disable a group of controls at once, allowing users to easily control the functionality of the controls within the group box. Overall, a group box is a useful tool for organizing and categorizing controls in user interfaces, helping improve the usability and clarity of the interface for users.

## Where can I get a .NET MAUI group box view?

You can create a .NET MAUI group box view with the features mentioned by using Syncfusion’s .NET MAUI Text Input Layout.

## Creating a .NET MAUI group box view

To create a group box view UI, you must configure the .NET MAUI Text Input Layout **(SfTextInputLayout)** control with a floating label. Follow these steps:

### Steps to Add .NET MAUI Text Input Layout

**Step 1:** The Syncfusion .NET MAUI controls are available on [NuGet.org](https://www.nuget.org/ "NuGet Gallery"). To add .NET MAUI Text Input Layout to your project, open the NuGet package manager in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"), search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/ "Syncfusion.Maui.Core NuGet Package"), and then install it.

**Step 2:** In the **MauiProgram.cs** file, register the handler for Syncfusion Core.

```csharp
using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;

namespace TextInputLayoutSample
{
  public static class MauiProgram
  {
     public static MauiApp CreateMauiApp()
     {
	var builder = MauiApp.CreateBuilder();
	builder
	.UseMauiApp<App>()
	.ConfigureSyncfusionCore()
	.ConfigureFonts(fonts =>
	{
	    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
	});
	return builder.Build();
     }
  }
}

```

**Step 3:** Add the following namespace to add the .NET MAUI Text Input Layout.

```xml
xmlns:groupBoxView ="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
```

**Step 4:** Add the SfTextInputLayout control.

```xml
< groupBoxView:SfTextInputLayout/>
```

### Creating a .NET MAUI group box view layout on a page

The code below defines a user interface for an application using the Syncfusion library’s SfTextInputLayout (for the group box view) and SfAvatarView components. The interface includes a SfAvatarView element for displaying a profile picture, a label for displaying a name, a SfTextInputLayout (_for the group box view_) segment with a text field and label for displaying information about the user, and two SfTextInputLayout elements with HorizontalStackLayout elements and SfAvatarView elements for displaying lists of friends. Some style properties are also applied to various elements, such as corner radius and stroke color.

```xml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:groupBoxView="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
               x:Class="GroupBoxViewApp.MainPage">
    <ScrollView>
        <VerticalStackLayout WidthRequest="310"
                             Padding="30,0"
                             VerticalOptions="Center">
            <groupBoxView:SfAvatarView ContentType="Custom"
                                       CornerRadius="75"
                                       Stroke="#ce04d1"
                                       ImageSource="selvaganapathy.png"
                                       WidthRequest="150"
                                       HeightRequest="150"/>
            <Label Text="Selva Ganapathy Kathiresan"
                   Margin="0,10"
                   FontSize="16"
                   FontAttributes="Bold"
                   HorizontalOptions="Center"/>
            <groupBoxView:SfTextInputLayout Hint="About" 
                                            Stroke="#ce04d1"
                                            ContainerType="Outlined" 
                                            ContainerBackground="White">
                <groupBoxView:SfTextInputLayout.HintLabelStyle>
                    <groupBoxView:LabelStyle TextColor="#d10489"/>
                </groupBoxView:SfTextInputLayout.HintLabelStyle>
                <VerticalStackLayout Margin="5">
                    <Label FontSize="10" 
                           Text="Selva Ganapathy Kathiresan is a Senior Product Manager at Syncfusion and a Microsoft MVP (2014), who sees through the development of Layout and Editors."/>
                    <Grid ColumnDefinitions="Auto,*" 
                          Margin="0,10,0,0">
                        <Label Background="Transparent" 
                                Text="Follow"
                                TextColor="#d10489"
                                FontSize="12"/>
                        <Label Grid.Column="1" 
                               Background="Transparent" 
                               HorizontalTextAlignment="End"
                               HorizontalOptions="End"
                               Text="Add Friend"
                               TextColor="#ce04d1"
                               FontSize="12"/>
                    </Grid>
                </VerticalStackLayout>
            </groupBoxView:SfTextInputLayout>
            <groupBoxView:SfTextInputLayout Hint="Friends" Padding="-10,0"
                                            Stroke="#ce04d1"
                                            ContainerType="Outlined" 
                                            ContainerBackground="White">
                <groupBoxView:SfTextInputLayout.HintLabelStyle>
                    <groupBoxView:LabelStyle TextColor="#d10489"/>
                </groupBoxView:SfTextInputLayout.HintLabelStyle>
                <VerticalStackLayout>
                <HorizontalStackLayout BindableLayout.ItemsSource="{Binding GroupMembers}" >
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <groupBoxView:SfAvatarView Margin="5,5,0,0"
                                                       HeightRequest="70"
                                                       WidthRequest="70"
                                                       CornerRadius="35"
                                                       ContentType="Custom"
                                                       ImageSource="{Binding Picture}"/>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </HorizontalStackLayout>
                <HorizontalStackLayout BindableLayout.ItemsSource="{Binding GroupMembers1}" >
                    <BindableLayout.ItemTemplate>
                       <DataTemplate>
                          <groupBoxView:SfAvatarView Margin="5,5,0,0"
                                                    HeightRequest="70"
                                                    WidthRequest="70"
                                                    CornerRadius="35"
                                                    ContentType="Custom"
                                                    ImageSource="{Binding Picture}"/>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </HorizontalStackLayout>
                <HorizontalStackLayout BindableLayout.ItemsSource="{Binding GroupMembers2}" >
                   <BindableLayout.ItemTemplate>
                     <DataTemplate>
                        <groupBoxView:SfAvatarView Margin="5,5,0,0"
                                                   HeightRequest="70"
                                                   WidthRequest="70"
                                                   CornerRadius="35"
                                                   ContentType="Custom"
                                                   ImageSource="{Binding Picture}"/>
                      </DataTemplate>
                   </BindableLayout.ItemTemplate>
                </HorizontalStackLayout>
            </VerticalStackLayout>
        </groupBoxView:SfTextInputLayout>
     </VerticalStackLayout>
   </ScrollView>
</ContentPage>
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/NET-MAUI-Group-Box-View-Layout-on-a-age.png" alt=".NET MAUI Group Box View Layout" style="width:100%">

  <figcaption>.NET MAUI Group Box View Layout on a page</figcaption>

</figure>

## Resources

For more information, refer to the [.NET MAUI Group Box View project on GitHub](https://github.com/SyncfusionExamples/maui-general-samples/tree/main/GroupBoxViewApp ".NET MAUI Group Box View GitHub demo").

## Conclusion

Thank you for your time! This article showed how to use the [Syncfusion .NET MAUI Text Input Layout control](https://www.syncfusion.com/maui-controls/maui-textinputlayout "Syncfusion .NET MAUI Text Input Layout") to construct a group box control in a .NET application. This control makes it simple to add a text field and label to your interface and apply other style settings such as stroke color and corner radius. Overall, the [Syncfusion.NET MAUI library](https://www.syncfusion.com/maui-controls "Syncfusion .NET MAUI controls") offers a variety of valuable components for creating user interfaces and is worth checking out.

Are you already a Syncfusion user? You can download the product setup [here](https://www.syncfusion.com/account/downloads/studio/ "License and downloads page of Essential Studio"). If you are not yet a Syncfusion user, you can download a [30-day free trial](https://www.syncfusion.com/downloads/maui "Free Evaluation of the Syncfusion Essential Studio Products").

Please contact us via our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"), if you have any queries or issues. We are always happy to assist!

## Related blogs

- [Introducing the New .NET MAUI Rating Control](https://www.syncfusion.com/blogs/post/dotnet-maui-rating-control.aspx "Blog: Introducing the New .NET MAUI Rating Control")
- [Introducing the Sixth Set of .NET MAUI Controls](https://www.syncfusion.com/blogs/post/introducing-the-sixth-set-of-net-maui-controls.aspx "Blog: Introducing the Sixth Set of .NET MAUI Controls")
- [Authenticate the .NET MAUI App with Azure AD](https://www.syncfusion.com/blogs/post/authenticate-the-net-maui-app-with-azure-ad.aspx "Blog: Authenticate the .NET MAUI App with Azure AD")
- [Agenda View In .NET MAUI Scheduler: A Perfect Tool For Modern-Day Office Management](https://www.syncfusion.com/blogs/post/agenda-view-in-net-maui-scheduler-a-perfect-tool-for-modern-day-office-management.aspx "Blog: Agenda View In .NET MAUI Scheduler: A Perfect Tool For Modern-Day Office Management")
- [Achieve Outlook-Like Swiping Using .NET MAUI ListView](https://www.syncfusion.com/blogs/post/achieve-outlook-like-swiping-using-net-maui-listview.aspx "Blog: Achieve Outlook-Like Swiping Using .NET MAUI ListView")