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

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


11 Replies

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

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 03:41 AM

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 06:50 AM

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 06:54 AM

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 08:20 AM

Hi Yousuf, 
  
Thanks for your feedback. 
  
Bharathi. 



ND NICK DESUPRIS November 26, 2019 07:38 AM

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 02:11 AM

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 02:23 AM

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 08:11 AM

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 02:07 AM

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 06:40 AM

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon