Badge is shown behind control when encapsulating a Frame

Thread ID:	Created:	Updated:	Platform:	Replies:
148382	Oct 17,2019 09:10 AM UTC	Oct 17,2019 11:29 AM UTC	Xamarin.Forms	1

Subscribe to this post

Tags: SfBadgeView

Michael

Asked On October 17, 2019 09:10 AM UTC

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">

<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?

Reply | Reply with quote

Rachel A [Syncfusion]

Replied On 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">

<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.

Reply | Reply with quote

Badge is shown behind control when encapsulating a Frame

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US