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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SfBadgeView got an default offset related to BadgeText

Thread ID:

Created:

Updated:

Platform:

Replies:

148927 Nov 8,2019 01:57 AM UTC Nov 11,2019 05:03 AM UTC Xamarin.Forms 3
loading
Tags: SfBadgeView
Shaw Yu
Asked On November 8, 2019 01:57 AM UTC

Hi,
I was trying to put 4 buttons inside a grid, however there is some offset for the button position.
Based on the length of the BadgeText, the position is changing, check the image and code below.

Any suggestion,
Shaw


Image link: https://ibb.co/1LWZZ5y
Codes: 
 <Grid>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>

                                <badge:SfBadgeView
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    BadgeText="1"
                                    HorizontalOptions="Center"
                                    VerticalOptions="Center">
                                    <badge:SfBadgeView.Content>
                                        <Grid>
                                            <Button
                                                HeightRequest="60"
                                                HorizontalOptions="Center"
                                                ImageSource="icon.png"
                                                Text="Invoices"
                                                VerticalOptions="Center"
                                                WidthRequest="120" />
                                        </Grid>
                                    </badge:SfBadgeView.Content>
                                </badge:SfBadgeView>
                                <badge:SfBadgeView
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    BadgeText="22"
                                    HorizontalOptions="Center"
                                    VerticalOptions="Center">
                                    <badge:SfBadgeView.Content>
                                        <Button
                                            HeightRequest="60"
                                            Text="Stop Lines"
                                            WidthRequest="120" />
                                    </badge:SfBadgeView.Content>
                                </badge:SfBadgeView>
                                <badge:SfBadgeView
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    HorizontalOptions="Center"
                                    VerticalOptions="Center">
                                    <badge:SfBadgeView.Content>
                                        <Button
                                            HeightRequest="60"
                                            Text="Contact"
                                            WidthRequest="120" />
                                    </badge:SfBadgeView.Content>
                                </badge:SfBadgeView>
                                <badge:SfBadgeView
                                    Grid.Row="1"
                                    Grid.Column="1"
                                    BadgeText="22222"
                                    HorizontalOptions="Center"
                                    VerticalOptions="Center">
                                    <badge:SfBadgeView.Content>
                                        <Button
                                            HeightRequest="60"
                                            HorizontalOptions="Center"
                                            Text="More ..."
                                            VerticalOptions="Center"
                                            WidthRequest="120" />
                                    </badge:SfBadgeView.Content>
                                </badge:SfBadgeView>
                            </Grid>

Vignesh Ramesh [Syncfusion]
Replied On November 8, 2019 05:45 PM UTC

Hi Shaw, 

Greetings from Syncfusion. 

In the provided snippet, you have defined size, Horizontal & VerticalOptions as Center for SfBadgeView’s content, BadgePosition as TopRight(default value) and BadgeAlignment as Center (default value). But you didn’t define any size for SfBadgeView control. So, based on its behavior, SfBadgeView’s container rendered as its content size. Also, while placing the Badge with outdent effect (BadgeAlignment = Center/Start), we have arranged the Badge and BadgeContent with in the container size by decreasing the size of BadgeContent according to Badge size and BadgeAlignment in order to avoid Badge get cropping. So, only the problem occurs while BadgeText size is varied. You can overcome this problem by defining size for SfBadgeView which is little greater than its content and defining Horizontal as Start and VerticalOptions options as End (Just opposite corner of BadgeText position) as like the below snippet. 

[C#]: 
… 
<badge:SfBadgeView  HeightRequest="80"   
                    WidthRequest="140" 
                    HorizontalOptions="Center" 
                    VerticalOptions="Center" 
                    Grid.Row="0" 
                    Grid.Column="0" 
                    BadgeText="1" > 
    <badge:SfBadgeView.Content> 
            <Button  HeightRequest="60"  
                     WidthRequest="120" 
                     HorizontalOptions="Start" 
                     VerticalOptions="End" 
                     ImageSource="icon.png" 
                     Text="Invoices" 
                     /> 
    </badge:SfBadgeView.Content> 
</badge:SfBadgeView> 
 

Please find the sample from the below location. 

Output: 
 

Please let us know if you have any other queries. 

Regards, 
Vignesh.

Shaw Yu
Replied On November 10, 2019 06:58 PM UTC

Thx your reply and example. That solved my problem.

Rachel A [Syncfusion]
Replied On November 11, 2019 05:03 AM UTC

Hi Shaw, 
 
Thank you for the confirmation. 
 
Regards, 
Rachel. 


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

Live Chat Icon For mobile
Live Chat Icon