Need a badgelabel in menu items

4 posts, 0 answers
  1. Sivamuhan
    Sivamuhan avatar
    5 posts
    Member since:
    Apr 2018

    Posted 08 Apr 2018 Link to this post

    Do you have an example with icon, text and badgelabel in menu items?
  2. Lance | Technical Support Engineer, Principal
    Admin
    Lance | Technical Support Engineer, Principal avatar
    1002 posts

    Posted 09 Apr 2018 Link to this post

    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
  3. Sivamuhan
    Sivamuhan avatar
    5 posts
    Member since:
    Apr 2018

    Posted 13 Apr 2018 in reply to Lance | Technical Support Engineer, Principal Link to this post

    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?

     

  4. Lance | Technical Support Engineer, Principal
    Admin
    Lance | Technical Support Engineer, Principal avatar
    1002 posts

    Posted 13 Apr 2018 Link to this post

    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
Back to Top