Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (161).NET Core  (29).NET MAUI  (62)Angular  (74)ASP.NET  (50)ASP.NET Core  (79)ASP.NET MVC  (88)Azure  (36)Blazor  (152)DocIO  (23)Essential JS 2  (84)Essential Studio  (172)File Formats  (28)Flutter  (123)JavaScript  (186)Microsoft  (113)PDF  (67)React  (61)Succinctly series  (128)Syncfusion  (609)TypeScript  (31)Uno Platform  (3)UWP  (4)Vue  (39)Webinar  (35)Windows Forms  (59)WinUI  (52)WPF  (138)Xamarin  (155)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (5)Build conference  (6)Business intelligence  (54)Button  (4)C#  (119)Chart  (57)Cloud  (12)Company  (445)Dashboard  (8)Data Science  (3)Data Validation  (6)DataGrid  (55)Development  (393)Doc  (7)DockingManager  (1)eBook  (96)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (23)Extensions  (18)File Manager  (4)Gantt  (11)Gauge  (11)Git  (4)Grid  (28)HTML  (10)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (310)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (30)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (36)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (22)Solution Services  (3)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (92)UI  (223)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (23)Visual Studio Code  (16)Web  (371)What's new  (213)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
How to Add an Alert Notification UI to Your .NET MAUI App

How to Add an Alert Notification UI to Your .NET MAUI App

While creating applications like for social networking and e-commerce, you can’t ignore the importance of the alert notification UI. It plays a crucial role in notifying users that an app needs attention.

We at Syncfusion understand the need for a good notification control and have delivered one in our .NET MAUI suite.

In this blog, let’s see the use case scenarios for the alert notification UI and how to add it to your app using the Syncfusion .NET MAUI Badge View control.

Alert notification: use cases

There are many use case scenarios that require notifications to alert users. The following are some of them:

  • To alert users of unread messages or notifications.
  • To show an online status on a profile picture of a messaging app.
  • To show the dynamic receipt of a message.
  • To add a tag for an element in an app.

Let’s see how to create a simple UI for these four scenarios!

.NET MAUI Badge View control for alert notifications

You can easily create the alert notification UI using the Syncfusion .NET MAUI Badge View control. It notifies the users of new or unread messages, status information, and so on. You can also easily integrate it with controls like ListView, Tab View, and other container controls.

Easily build cross-platform mobile and desktop apps with the flexible and feature-rich controls of the Syncfusion .NET MAUI platform.

Show unread message alert notification

First, let’s include an alert notification to display the unread messages count on a contact list in a messaging app.

Refer to the following code example.

<Grid BackgroundColor="White"
      VerticalOptions="Center"
      HorizontalOptions="Center"
      Padding="5"
      HeightRequest="60"
      WidthRequest="400">
 <badgeView:SfBadgeView BadgeText="10" >
  <badgeView:SfBadgeView.BadgeSettings>
    <badgeView:BadgeSettings Icon="None" Type="None" Position="BottomRight" BorderWidth="2" Stroke="White" Background="Green"/>
  </badgeView:SfBadgeView.BadgeSettings>
  <Grid ColumnDefinitions="50,15,*">
  <Image Source="selvaganapathyk.jpeg"
          WidthRequest="50"
          HeightRequest="50"/>
   <Grid Grid.Column="2"
         RowDefinitions="*,*"
         ColumnDefinitions="*,Auto">
     <Label Text="Selva Ganapathy Kathiresan" FontSize="16" TextColor="Black" FontAttributes="Bold" VerticalTextAlignment="Start"/>
     <Label Grid.Row="0" Grid.Column="1" TextColor="Green" FontSize="12" Text="09:09 am" VerticalTextAlignment="Start"/>
     <Label Grid.Row="1" Text="Good Morning :)" FontSize="14" TextColor="Gray"/>
   </Grid>
  </Grid>
 </badgeView:SfBadgeView>
</Grid>
Alert Notification for Unread Messages Count Using .NET MAUI Badge View
Alert Notification for Unread Messages Count Using .NET MAUI Badge View

Show online status notification on a profile picture

Most apps that show a profile picture will have an option to indicate the current online status of the contact. You can use our .NET MAUI Badge View control with its predefined icons to elegantly display an online status notification.

You can easily update the badge icon using the BadgeIcon property. Badge icons will be visible only when you do not set the badge text. The badge supports the following BadgeIcon types:

  • Add
  • Available
  • Away
  • Busy
  • Delete
  • Dot
  • Prohibit1
  • Prohibit2

Let’s create a UI for the profile picture page, using the .NET MAUI Badge View component to hold the images and show the online status indication.

Refer to the following code.

<Grid BackgroundColor="White"
      VerticalOptions="Center"
      HorizontalOptions="Center"
      HeightRequest="105"
      WidthRequest="350"
      Padding="15"
      ColumnDefinitions="75,*">
 <badgeView:SfBadgeView >
  <badgeView:SfBadgeView.BadgeSettings>
   <badgeView:BadgeSettings x:Name="badgeSettings" Icon="Available" Position="BottomRight" Type="Success" BorderWidth="2" Stroke="White"/>
  </badgeView:SfBadgeView.BadgeSettings>
  <Frame CornerRadius="40">
   <Image Source="selvaganapathyk.jpeg"
          Margin="-20"
          WidthRequest="75"
          HeightRequest="75"/>
  </Frame>
 </badgeView:SfBadgeView>
 <StackLayout Margin="10,0,0,0" Orientation="Vertical"
              Grid.Column="1">
  <Label Text="Selva Ganapathy Kathiresan" FontSize="16" TextColor="Black"/>
  <Grid Margin="0,10,0,0" ColumnDefinitions="Auto,*">
   <Picker x:Name="iconPicker"/>
   <Entry Grid.Column="1" TextColor="Gray" FontSize="12" Placeholder="Set Status Message"/>
  </Grid>
 </StackLayout>
</Grid>
Alert Notification for Online Status on a Profile Picture using .NET MAUI Badge View
Alert Notification for Online Status on a Profile Picture using .NET MAUI Badge View

Syncfusion .NET MAUI controls are well-documented, which helps to quickly get started and migrate your Xamarin apps.

Alert notification when receiving a message

Also, you can set an alert notification on an icon and an animated alert notification while receiving an update with the help of the .NET MAUI Badge View component.

You can enable or disable the badge text animation by setting Scale or None values to the BadgeAnimation property, respectively. We can see the animation once the badge text is changed.

Refer to the following code example.

<Grid BackgroundColor="White"
      VerticalOptions="Center"
      HorizontalOptions="Center"
      HeightRequest="75"
      WidthRequest="75">
 <badgeView:SfBadgeView x:Name="animationBadgeView" BadgeText="0">
  <badgeView:SfBadgeView.BadgeSettings>
    <badgeView:BadgeSettings Icon="None"
                             Animation="Scale"
                             Type="None"
                             BadgeAlignment="Center"
                             Position="BottomRight"
                             Background="Red"/>
  </badgeView:SfBadgeView.BadgeSettings>
  <Image Source="facebook.png"WidthRequest="75"
         HeightRequest="75"/>
 </badgeView:SfBadgeView>
</Grid>
Alert Notification With Dynamic Update Animation using .NET MAUI Badge View
Alert Notification with Dynamic Update Animation Using .NET MAUI Badge View

Alert notification with a tag text

The .NET MAUI Badge View control also supports adding a tag for an element in an app. This will help you add a tag alert notification.

In the following code example, we will create an item UI for a shopping cart where we will mark the item with the tag Best Seller. This tag text alert notification will grab users’ attention.

<Grid BackgroundColor="White"
      VerticalOptions="Center"
      HorizontalOptions="Center"
      Padding="5"
      HeightRequest="60"
      WidthRequest="200">
 <badgeView:SfBadgeView BadgeText="Best Seller" >
  <badgeView:SfBadgeView.BadgeSettings>
   <badgeView:BadgeSettings Icon="None" Type="None" Position="TopRight" Background="Gold" TextColor="Black"/>
  </badgeView:SfBadgeView.BadgeSettings>
 <Grid ColumnDefinitions="50,15,*">
   <Image Source="apple.jpg"
          WidthRequest="50"
          HeightRequest="50"/>
   <Grid Grid.Column="2"
         RowDefinitions="*,*"
         ColumnDefinitions="*,Auto">
    <Label Text="Apple" FontSize="16" TextColor="Black" FontAttributes="Bold" VerticalTextAlignment="Start"/>
    <Label Grid.Row="1" Text="$ 0.99 / KG" FontSize="14" TextColor="Gray"/>
   </Grid>
  </Grid>
 </badgeView:SfBadgeView>
</Grid>
Alert Notification for Tag Text Using .NET MAUI Badge View
Alert Notification for Tag Text Using .NET MAUI Badge View

Note: Badge icon and badge alignment features will be available in the .NET MAUI Badge View control in the 2022 Volume 1 release.

To make it easy for developers to include Syncfusion .NET MAUI controls in their projects, we have shared some working ones.

GitHub reference

For more details, refer to the example for adding an alert notification UI in your .NET MAUI app.

Conclusion

Thanks for reading! In this blog, we have seen how to add alert notification UIs to your app using our Syncfusion .NET MAUI Badge View control. Along with the above scenarios, use the Badge View control to provide alert notifications for transactions, product availability, and more!

If you have any special requirements, please mention them in the comments section below!

Also, you can contact us through our support forumsupport portal, or feedback portal. As always, we are happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (2)

The article provides me with a lot of useful information, which I believe is very important for everyone; I hope that more people become aware of your post. This is a very useful post, and I admire the author. I hope you succeed in your next post, and I will continue to follow your posts. Very good topic, similar texts are available, but I’m not sure if they’re as good as your work.

Selva Ganapathy Kathiresan

Hi Sandeep Kumar,

Thank you for your comment.

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top