SfBadgeView got an default offset related to BadgeText

[Shaw Yu]

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]

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. 

https://www.syncfusion.com/downloads/support/forum/148927/ze/badgeview-1520252479  

Output: 

 

Please let us know if you have any other queries. 

Regards, 

Vignesh.

[Shaw Yu]

Thx your reply and example. That solved my problem.

[Rachel A]

Hi Shaw, 

 

Thank you for the confirmation. 

 

Regards, 

Rachel.