[Proposal] BadgeView

[TheCodeTraveler]

BadgeView

• Proposed
• Prototype
• Implementation
  • iOS Support
  • Android Support
  • macOS Support
  • Windows Support
• Unit Tests: Not Started
• Sample
• Documentation: Not Started

Summary

The BadgeView allows the user to show a badge with a string value on top of any control. By wrapping a control in a BadgeView control, you can show a badge value on top of it. This is very much like the badges you see on the app icons on iOS and Android.

Motivation

Detailed Design

BadgeView.shared.cs

[ContentProperty(nameof(Content))]
public class BadgeView : BaseTemplatedView<Grid>
{
  public static readonly BindableProperty ContentProperty;
  public static readonly BindableProperty BadgePositionProperty;
  public static BindableProperty AutoHideProperty;
  public static BindableProperty IsAnimatedProperty;
  public static BindableProperty BadgeAnimationProperty;
  public static new BindableProperty BackgroundColorProperty;
  public static readonly BindableProperty BorderColorProperty;
  public static readonly BindableProperty HasShadowProperty;
  public static BindableProperty TextColorProperty;
  public static BindableProperty TextProperty;
  public static BindableProperty FontSizeProperty;
  public static BindableProperty FontFamilyProperty;
  public static BindableProperty FontAttributesProperty;
  
  public View? Content { get; set; }
  public BadgePosition BadgePosition { get; set; }
  public bool AutoHide { get; set; }
  public bool IsAnimated { get; set; }
  public IBadgeAnimation? BadgeAnimation { get; set; }
  public new Color BackgroundColor { get; set; }
  public Color BorderColor { get; set; }
  public bool HasShadow { get; set; }
  public Color TextColor { get; set; }
  public string Text { get; set; }
  [TypeConverter(typeof(FontSizeConverter))]
  public double FontSize { get; set; }
  public string FontFamily { get; set; }
  public FontAttributes FontAttributes { get; set; }
}

Usage Syntax

XAML Usage

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="MyLittleApp.MainPage">

     <StackLayout>

        <xct:BadgeView
            BackgroundColor="Red"
            FontAttributes="Bold"
            FontSize="Medium"
            TextColor="White"
            Text="1">
            <Label
                Text="This label has a badge in the top-right"/>
        </xct:BadgeView>

    </StackLayout>

</ContentPage>

C# Usage

class MyPage : ContentPage
{
  public MyPage()
  {
    Content = new BadgeView
    {
      BackgroundColor = Colors.Red,
      FontAttributes = FontAttributes.Bold,
      TextColor = Colors.White,
      Text = "1",
      Cotent = new Label { Text = "This label has a badge in the top-right" }
    };
  }
}

[tnassour]

Hello, i made the modifications but i can't push them

[TheCodeTraveler]

Thanks @tnassour!

Let's have you make a new branch and open a new PR, then. And we'll close this PR once yours has been opened 👍

[vhugogarcia]

Hello @brminnick ,

Thanks to .NET MAUI 7+ and .NET MAUI Community Toolkit Avatar, we are able to develop a badge view very easily by using the following approaches:

• Labels
• MCT Avatar View

Find below samples using a simple grid and adding the elements on the same row and column, but just positioning them with the help of VerticalLayout and some minor margins and they are compatible with all platforms.

So, by saying that, I believe we can close this issue and focus on other features that can grant more benefits and are complex to develop.

Just my grain of salt. 😃 Let me know what you think.