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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SfBadgeView control support for Xamarin.Forms Shell container/framework

Thread ID:

Created:

Updated:

Platform:

Replies:

142797 Feb 20,2019 09:28 AM UTC Feb 25,2019 01:20 PM UTC Xamarin.Forms 5
loading
Tags: SfBadgeView
Yousuf Nizamuddin
Asked On February 20, 2019 09:28 AM UTC

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


Bharathiraja K [Syncfusion]
Replied On 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. 


Yousuf Nizamuddin
Replied On 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>


Bharathiraja K [Syncfusion]
Replied On 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. 


Yousuf Nizamuddin
Replied On 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


Bharathiraja K [Syncfusion]
Replied On February 25, 2019 01:20 PM UTC

Hi Yousuf, 
  
Thanks for your feedback. 
  
Bharathi. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;