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

badgeview on sfbutton shows behind button when binding BadgeIcon.

I want a badge icon to popup on button when selected, so I bind the badgeicon.

This works "almost".  The problem is, the badge shows up behind the button and you can only see part of it.

<badge:SfBadgeView  x:DataType="cos:EmailAddress" HorizontalOptions="Center" VerticalOptions="Center" Margin="3">
                                                                            <badge:SfBadgeView.BadgeSettings>
                                                                                <badge:BadgeSetting BadgeType="Success"   Offset="0, -10" 
                                                                                                    BadgePosition="BottomRight" 
                                                                                                    BadgeIcon="{Binding IsPrimary, Converter={StaticResource badgeIconConverter}}">
                                                                                </badge:BadgeSetting>
                                                                            </badge:SfBadgeView.BadgeSettings>
                                                                            <badge:SfBadgeView.Content>
                                                                                    <Frame CornerRadius="30"  Padding="3" BackgroundColor="White">
                                                                                          ...
                                                                                     </Frame>
                                                                            </badge:SfBadgeView.Content>
                                                                        </badge:SfBadgeView>

3 Replies

RS Ramya Soundar Rajan Syncfusion Team January 28, 2020 08:30 AM UTC

Hi David, 
 
Thanks for contacting Syncfusion support. 
 
We can resolve the problem by adding the badge view content inside the grid layout as like in below code. 
 
    <badge:SfBadgeView  x:DataType="cos:EmailAddress" HorizontalOptions="Center" VerticalOptions="Center" Margin="3"> 
        <badge:SfBadgeView.BadgeSettings> 
            <badge:BadgeSetting BadgeType="Success"   Offset="0, -10"  
             BadgePosition="BottomRight"  
           BadgeIcon="Available"> 
            </badge:BadgeSetting> 
        </badge:SfBadgeView.BadgeSettings> 
        <badge:SfBadgeView.Content> 
            <Grid> 
            <Frame CornerRadius="30" WidthRequest="50" HeightRequest="50"  Padding="3" BackgroundColor="White"> 
                
            </Frame> 
            </Grid> 
        </badge:SfBadgeView.Content> 
    </badge:SfBadgeView> 
 
 
Please let us know if you have any concerns. 
 
Regards, 
Ramya. 



DB David Brenchley January 28, 2020 09:42 PM UTC

Thank you, this has fixed the issue


RS Ramya Soundar Rajan Syncfusion Team January 29, 2020 11:34 AM UTC

Hi David, 
 
Thanks for the update. Please let us know if you need any further assistance. 
 
Regards, 
Ramya 


Loader.
Live Chat Icon For mobile
Up arrow icon