Need a badgelabel in menu items

[Sivamuhan]

Do you have an example with icon, text and badgelabel in menu items?

[Lance | Manager Technical Support]

Hi Sivamuhan,

I'm not exactly sure how your question is related to the RadSideDrawer. There are no menu items in the control, the two main properties where you put your content are MainContent and DrawerContent. If you're referring to menu items that you would place in the DrawerContent, there needs to be a host for those menu items (e.g. RadListView), as it wouldn't be the SideDrawer itself that renders the list.

That being said,  I have changed the forum thread type to go under RadButton so that we can continue the conversation in context of the request.  We do not have an explicit "Badges" type of UI control, but you could use a RadButton and put the count as the button Text (see the linked documentation for additional features, such as CornerRadius).

<input:RadButton Text="{Binding BadgeCount}"  "/>

If you wanted the RadButton to be on a list item, you could use a RadButton at the top-right corner of a ListViewTemplateCell. Then, you can show or hide the badge depending on the value of a "HasBadges" property of your data model.

Demo

Although custom app development falls outside the scope of support, I've built you a quick prototype that you can take a look at the idea. You can find the demo here on GitHub and here is a short video of the prototype at runtime.

Here is the relevant code:

<dataControls:RadListView ItemsSource="{Binding MyItems}">
    <dataControls:RadListView.ItemTemplate>
        <DataTemplate>
            <listView:ListViewTemplateCell>
                <Grid BackgroundColor="LightGray">
                    <!-- This is the text -->
                    <Label Text="{Binding Title}"
                        FontSize="Large"
                        VerticalOptions="Center"
                        Margin="10,0,0,0"/>

                    <!-- This button acts like a badge, you can tap it execute a command and clear the badge count -->
                    <input:RadButton Text="{Binding BadgeCount}"
                             IsVisible="{Binding HasBadges}"
                             Command="{Binding ResetBadgeCountCommand}"
                             HorizontalOptions="End"
                             VerticalOptions="Start"
                             BackgroundColor="DarkRed"
                             TextColor="White"
                             Margin="5"/>
                </Grid>
            </listView:ListViewTemplateCell>
        </DataTemplate>
    </dataControls:RadListView.ItemTemplate>
    <dataControls:RadListView.LayoutDefinition>
        <listView:ListViewLinearLayout ItemLength="80" VerticalItemSpacing="5" />
    </dataControls:RadListView.LayoutDefinition>
</dataControls:RadListView>

public class BadgedItem : ObservableObject
{
    private string title;
    private bool hasBadges;
    private int badgeCount;

    public BadgedItem()
    {
        ResetBadgeCountCommand = new Command(() => { BadgeCount = 0; });
    }

    public string Title
    {
        get => title;
        set => SetProperty(ref title, value);
    }

    public bool HasBadges
    {
        get => hasBadges;
        set => SetProperty(ref hasBadges, value);
    }

    public int BadgeCount
    {
        get => badgeCount;
        set
        {
            SetProperty(ref badgeCount, value);

            HasBadges = value > 0;
        }
    }

    public Command ResetBadgeCountCommand { get; set; }
}

Wrapping Up

I hope this information helps you towards finding what you're looking for.

- If I have answered your questions, you can let me know by using the ticket's "Mark as resolved" button.
- If you have any difficulty implementing the individual controls (e.g. RadListView or RadButton), please open a new Support Ticket for each discrete problem. 

Thank you for contacting Support and for choosing UI for Xamarin

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Sivamuhan]

Hi Lance,

Inside the DrawerContent, I need each menu items to have icon, text and a badge label.

Can I add menu item with icon, Label and RadButton inside DrawerContent?

 

[Lance | Manager Technical Support]

Hi Sivamuhan,

You can put whatever you want inside DrawerContent as long as it derives from View (i.e. not ContentPage).

<telerikPrimitives:RadSideDrawer x:Name="drawer" DrawerLength="200">
    <telerikPrimitives:RadSideDrawer.MainContent>
        <!-- Put your custom Main content here -->
    </telerikPrimitives:RadSideDrawer.MainContent>
    <telerikPrimitives:RadSideDrawer.DrawerContent>
        <!-- Put your custom drawer content here -->
    </telerikPrimitives:RadSideDrawer.DrawerContent>
</telerikPrimitives:RadSideDrawer>

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Hai]

Telerik

 

Do you have a solution for adding badge to tabbed page icon? I have been using Plugin.Badge nuget, it works on iOS, but there is no supported for android. thank you!

[Didi]

Hello Hai,

Currently, there isn't a built-in feature in RadTabView for adding a badge. We have a feature request in our feedback portal about badges in SegmentedControl control. Please follow and vote for it at the link below:

https://feedback.telerik.com/xamarin/1414200-badges-in-radsegmentedcontrol 

Solution:

This can be achieved by customizing the TabViewHeaderItem.  You can, for example, create a simple badge with a Xamarin.Forms Frame element or Telerik UI for Xamarin Border and add it to the TabViewHeaderItem Content.

Please find attached a sample demo that shows how this would work. 

Regards,
Didi
Progress Telerik