This is a migrated thread and some comments may be shown as answers.

Need a badgelabel in menu items

5 Answers 122 Views
Button
This is a migrated thread and some comments may be shown as answers.
Sivamuhan
Top achievements
Rank 1
Sivamuhan asked on 08 Apr 2018, 02:54 PM
Do you have an example with icon, text and badgelabel in menu items?

5 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 09 Apr 2018, 04:42 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Sivamuhan
Top achievements
Rank 1
answered on 13 Apr 2018, 07:23 AM

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?

 

0
Lance | Manager Technical Support
Telerik team
answered on 13 Apr 2018, 02:27 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Hai
Top achievements
Rank 1
answered on 16 Dec 2020, 01:29 AM

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!

0
Didi
Telerik team
answered on 16 Dec 2020, 08:06 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Button
Asked by
Sivamuhan
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Sivamuhan
Top achievements
Rank 1
Hai
Top achievements
Rank 1
Didi
Telerik team
Share this question
or