Badge is shown behind control when encapsulating a Frame

[Michael]

I wanted to add a batch to an existing Control which is structured like this.

Frame->StackLayout->Image+Label

When adding the badge the badge is rendered in the background instead on top.

<badge:SfBadgeView HorizontalOptions="Center" VerticalOptions="Center"  >

            <badge:SfBadgeView.Content>

                <Frame Padding="10,10,10,5" CornerRadius="10" HasShadow="true" Margin="5" 

               BackgroundColor="{Binding Background, Source={x:Reference This} }" BorderColor="AliceBlue" 

               MinimumWidthRequest="100" MinimumHeightRequest="100">

            

                    <StackLayout>

                <ffimageloading:CachedImage HorizontalOptions="CenterAndExpand" VerticalOptions="Center"

        WidthRequest="90" HeightRequest="90"

        DownsampleToViewSize="true"

                    CacheDuration="14" CacheType="All"

        Source = "{Binding ImageUrl, Source={x:Reference This}">

                </ffimageloading:CachedImage>

                <Label Text="{Binding Name, Source={x:Reference This} }"

                           FontAttributes="None"

                           LineBreakMode="WordWrap"

                           Style="{DynamicResource ListItemTextStyle}"

                           FontSize="Small"

                           HorizontalOptions="StartAndExpand"

                           HorizontalTextAlignment="Start"

                            />

            </StackLayout>

                </Frame>

            </badge:SfBadgeView.Content>

                <badge:SfBadgeView.BadgeSettings>

                <badge:BadgeSetting BadgeType="{Binding BadgeType, Source={x:Reference This} }"  

                                    BadgeIcon="{Binding BadgeIcon, Source={x:Reference This} }"

                                    Offset="-8, -8" BadgePosition="BottomRight"

                                    Stroke="Black" StrokeWidth="3"

                                    

                                    />

                </badge:SfBadgeView.BadgeSettings>

            </badge:SfBadgeView>

Is that a bug or am I missing something?

[Rachel A]

Hi Michael, 

 

Greetings from Syncfusion. 

 

We can resolve the problem by adding the badge view content inside the Grid layout as given in the below code snippet. 

 

[XAML] 

<badge:SfBadgeView.Content>            

                <Grid> 

                    <Frame Padding="10,10,10,5" CornerRadius="10" HasShadow="true" Margin="5"  

                BorderColor="AliceBlue" BackgroundColor="Blue" 

               MinimumWidthRequest="100" MinimumHeightRequest="100"> 

                        <StackLayout> 

                            <Label Text="Content" 

                           FontAttributes="None" 

                           LineBreakMode="WordWrap" 

                           FontSize="Small" 

                           HorizontalOptions="StartAndExpand" 

                           HorizontalTextAlignment="Start" 

                            /> 

                    </StackLayout> 

                </Frame> 

            </Grid> 

</badge:SfBadgeView.Content> 

 

Please let us know if you have any concerns. 

 

Thanks, 

Rachel.