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
close icon

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.
Live Chat Icon For mobile
Up arrow icon