We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

SfBadgeView control support for Xamarin.Forms Shell container/framework

Hi,

Does the SfBadgeView control support the latest Xamarin.Forms Shell container/framework (https://docs.microsoft.com/en-gb/xamarin/xamarin-forms/app-fundamentals/shell?tabs=android)?

I am using Xamarin Shell with bottom tabs and would like to add SfBadgeView to one of the tab icons. Is this possible? If so, can you please provide any guidelines.


Thanks in advance,
Yousuf


13 Replies

BK Bharathiraja K Syncfusion Team February 21, 2019 06:24 PM UTC

Hi Yousuf, 
 
Greetings from Syncfusion. We have added in our badgeview control in Xamarin.Forms Shell container and the sample was downloaded from the link given by you. We have included badgeview control in home page and login page. Please find the sample from below link.  
 
 
Output: 
 
 
 
 
 
 
To add the BadgeView in Shell bottom tab, you need to add the bottom tab content in to badgeview control. Please refer the below help document link for more details. 
 
To customize the badgeview control, please refer online help document link below here. 
 
Regards, 
Bharathi. 



YN Yousuf Nizamuddin February 22, 2019 08:41 AM UTC

Hi Bharathi,

Thank you for your prompt response, and for the code sample. This was helpful.

Unfortunately, this still does not resolve my particular issue. I want to add the Syncfusion SfBadgeView to one of the bottom tab icons. Trust me, I have tried a lot of things to make this work. Adding your Badge to an image (as depicted in your example is straight forward). However, I cannot make it work with the bottom tab icon within the Xamarin Shell framework.

If you can point me in the right direction, that would really save my day. Thanks

To aid you, I am providing my Shell XAML file. I would like to add SfBadgeView  to one of the items within the ShellItem section:

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:AcmeCompany.Views"
       xmlns:syncfusion="clr-namespace:Syncfusion.XForms.BadgeView;assembly=Syncfusion.SfBadgeView.XForms"
       x:Class="AcmeCompany.AppShell" x:Name="AppShellSelf" RouteScheme="app" RouteHost="AcmeCompany.com"
       Route="AcmeCompany" Title="AcmeCompany" BackgroundColor="White">
    <Shell.FlyoutHeader>
        <views:FlyoutHeader/>
    </Shell.FlyoutHeader>
    <ShellItem x:Name="_mainTabbedItem" Route="bottomtabs" FlyoutDisplayOptions="AsMultipleItems">
        <ShellSection Route="menu" Title="" Icon="baseline_menu_black_24.png">
            <ShellContent Route="menuItem" Style="{StaticResource BrandShell}">
                <views:Menu Title="Menu Page" BackgroundColor="White"/>
            </ShellContent>
        </ShellSection>
        <ShellSection Route="home" Title="Home" Icon="baseline_dashboard_black_24.png">
            <ShellContent Route="home" Style="{StaticResource BrandShell}">
                <views:Home Title="Home Page" BackgroundColor="White"/>
            </ShellContent>
        </ShellSection>
        <ShellSection Route="camera" Title="Camera" Icon="baseline_photo_camera_black_24.png">
            <ShellContent Route="cameraItem" Style="{StaticResource PinkShadeShell}" Title="Camera Page"
                          ContentTemplate="{DataTemplate views:Camera}">
            </ShellContent>
        </ShellSection>
        <ShellSection Route="alerts" Title="Alerts" Icon="baseline_alert_black_24.png"
                      x:Name="AlertTab">
            <ShellContent Route="alertsItem" Style="{StaticResource PurpleShell}" Title="Alerts Page"
                          ContentTemplate="{DataTemplate views:Alerts}">
            </ShellContent>
        </ShellSection>
    </ShellItem>
    <ShellContent Route="settings" Title="Settings" Icon="outline_settings_black_24.png"
                  ContentTemplate="{DataTemplate views:Settings}"/>
    <ShellContent Route="about" Title="About" Icon="outline_info_black_24.png" ContentTemplate="{DataTemplate views:About}"/>
    <Shell.MenuItems>
        <MenuItem Text="Log Out" Icon="outline_exit_to_app_black_24.png" Command="{Binding LogOutCommand}" BindingContext="{x:Reference AppShellSelf}"/>
    </Shell.MenuItems>
</Shell>



BK Bharathiraja K Syncfusion Team February 25, 2019 11:50 AM UTC

Hi Yousuf,  
 
We have checked the ShellSection in Xamarin.Forms Shells. They get the input as Title and Icon from ShellSection and rendered in their source. So, we are not able to find any options to place the BadgeView in ShellSection like TabView HeaderTemplate concept. If they provided Template concept in ShellSection to add a CustomView, we can add a BadgeView as a CustomView in bottom tabs. Otherwise, it is not possible to add BadgeView in bottom tabs of Shell. 
 
Regards, 
Bharathi. 



YN Yousuf Nizamuddin February 25, 2019 11:54 AM UTC

That is what I suspected too.

Thank you Bharathi (and Syncfusion) for all your support. It is appreciated.


Yousuf



BK Bharathiraja K Syncfusion Team February 25, 2019 01:20 PM UTC

Hi Yousuf, 
  
Thanks for your feedback. 
  
Bharathi. 



ND NICK DESUPRIS November 26, 2019 12:38 PM UTC

Hi Support,

Do we have any news on that?

Can we somehow use the sfbadge to the Shell as described my above friend?

Thanks
Nick


RA Rachel A Syncfusion Team November 27, 2019 07:11 AM UTC

Hi Nick, 
 
Greetings from Syncfusion. 
 
If the support is provided in Xamarin Forms shell tab view to have custom view like button, then you can add the badge view. 
 
Thanks, 
Rachel. 



ND NICK DESUPRIS November 27, 2019 07:23 AM UTC

Hi team,

Appreciate your swift response. You mean that there is now available and i can use it? 
Can you please send me more details? Do i need any updates?

Nick


RA Rachel A Syncfusion Team November 28, 2019 01:11 PM UTC

Hi Nick, 
 
As we have mentioned earlier in this forum, the bottom tab has support to add Title and Icon from ShellSection. So, we are not able to find any options to place the BadgeView in the ShellSection like the TabView HeaderTemplate concept. If they provided templating concept in ShellSection to customize its view, we can add a BadgeView as a custom view in bottom tabs. Otherwise, it is not possible to add BadgeView in bottom tabs of Shell.  
 
Thanks, 
Rachel. 



ND NICK DESUPRIS November 29, 2019 07:07 AM UTC

Hi team,

I got you. Thanks for the info. 
Have you contact them to require such an enhancement?

Nick


RA Rachel A Syncfusion Team December 2, 2019 11:40 AM UTC

Hi Nick, 
 
We have considered your suggestion and logged enhancement report for the template support in tab bar in Xamarin Forms Shell platform. 
 
 
Thanks, 
Rachel. 



PP Paul Parkins January 16, 2023 05:18 PM UTC

Hi,

Have the Xamarin devs changed anything in the 4 years since the original post that now allows for badges in shell tabs?

I followed your enhancement request, but it seems you incorrectly raised it in the Xamarin Essentials area. Your request was closed and you were requested to raise a similar item in the Xamarin area instead. I had a look, but didn't find one there.  

So did you re-raise it, and did the Xamarin team ever implement your feature request?


Thanks

Paul







AK Arunachalam Kandasamy Raja Syncfusion Team January 18, 2023 10:01 AM UTC

Hi Paul, 

 

Thanks for contacting Syncfusion support. 

 

Query 1: Have the Xamarin devs changed anything in the 4 years since the original post that now allows for badges in shell tabs? 

 

The Custom view support is not provided in the Shell tab view of Xamarin.Forms. So currently not possible to add SfBadgeView in Shell content. 

 

Query 2: I followed your enhancement request, but it seems you incorrectly raised it in the Xamarin Essentials area. Your request was closed and you were requested to raise a similar item in the Xamarin area instead. 

 

Thanks for updating us with your query. We have created a new enhancement request in the Xamarin area. 

 

https://github.com/xamarin/Xamarin.Forms/issues/15662 

 

Query 3: Did the Xamarin team ever implement your feature request? 

 

Already the Xamarin team is fixed some issues reported by our team.  Hope they consider and add their details to the ticket.

 

Thanks,

Arunachalam K


Loader.
Live Chat Icon For mobile
Up arrow icon