Badge is shown behind control when encapsulating a Frame

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?

1 Reply

RA Rachel A Syncfusion Team October 17, 2019 11:29 AM UTC

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. 


Loader.
Up arrow icon