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 got an default offset related to BadgeText

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>

3 Replies

VR Vignesh Ramesh Syncfusion Team 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.


SY Shaw Yu November 10, 2019 06:58 PM UTC

Thx your reply and example. That solved my problem.


RA Rachel A Syncfusion Team November 11, 2019 05:03 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon