Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 134 additions & 0 deletions MAUI/Badge-View/Badge-customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -345,6 +345,140 @@ Content = sfBadgeView;

![Alignment](badge-customization_images/badge_alignment.png)

## Badge Alignment and Sizing

The [BadgeAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_BadgeAlignment) property positions the badge text relative to the SfBadgeView's content. You can set this to Start, Center, or End. However, the final visual position of the badge is also dependent on how the SfBadgeView and its Content are sized. The following scenarios explain how alignment behaves based on different size configurations.

### 1. Alignment with a Fixed Size on SfBadgeView

When an explicit WidthRequest and HeightRequest are set directly on the SfBadgeView, the badge is aligned relative to these fixed dimensions. The size of the inner Content does not influence the badge's position. This approach is useful when you need the badge to appear at the edge of a specific, defined area, regardless of the content inside.

{% tabs %}

{% highlight xaml %}

<badge:SfBadgeView BadgeText="20" WidthRequest="100" HeightRequest="100" HorizontalOptions="Center" VerticalOptions="Center" >
<badge:SfBadgeView.Content>
<Label Text="Start" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="Black" />
</badge:SfBadgeView.Content>
<badge:SfBadgeView.BadgeSettings>
<badge:BadgeSettings BadgeAlignment="Start" CornerRadius="0"/>
</badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

{% endhighlight %}

{% highlight c# %}

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.HorizontalOptions = LayoutOptions.Center;
sfBadgeView.VerticalOptions = LayoutOptions.Center;
sfBadgeView.WidthRequest = 100;
sfBadgeView.HeightRequest = 100;
sfBadgeView.BadgeText = "20";
Label label = new Label();
label.Text = "Start";
label.BackgroundColor = Colors.LightGray;
label.HorizontalTextAlignment = TextAlignment.Center;
label.VerticalTextAlignment = TextAlignment.Center;
label.TextColor = Colors.Black;
sfBadgeView.Content = label;
BadgeSettings badgeSetting = new BadgeSettings();
badgeSetting.BadgeAlignment = BadgeAlignment.Start;
sfBadgeView.BadgeSettings = badgeSetting;
Content = sfBadgeView;

{% endhighlight %}

{% endtabs %}

![BadgeAlignment](badge-customization_images\WidthForBadgeView.png)

### 2. Alignment with a Fixed Size on the Content

When the SfBadgeView has no explicit size, but its Content does, the SfBadgeView wraps itself around the content. In this case, the badge is aligned relative to the bounds of the Content. This is a common scenario when you want to place a badge on a specific control like a Button or a larger Label.

{% tabs %}

{% highlight xaml %}

<badge:SfBadgeView BadgeText="20" >
<badge:SfBadgeView.Content>
<Label Text="Start" Background="LightGray" HeightRequest="100" WidthRequest="100" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</badge:SfBadgeView.Content>
<badge:SfBadgeView.BadgeSettings>
<badge:BadgeSettings BadgeAlignment="Start" />
</badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

{% endhighlight %}

{% highlight c# %}

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
Label label = new Label();
label.Text = "Start";
label.BackgroundColor = Colors.LightGray;
label.HorizontalTextAlignment = TextAlignment.Center;
label.VerticalTextAlignment = TextAlignment.Center;
label.TextColor = Colors.Black;
label.WidthRequest = 100;
label.HeightRequest = 100;
sfBadgeView.Content = label;
BadgeSettings badgeSetting = new BadgeSettings();
badgeSetting.BadgeAlignment = BadgeAlignment.Start;
sfBadgeView.BadgeSettings = badgeSetting;
Content = sfBadgeView;

{% endhighlight %}

{% endtabs %}

![BadgeAlignment](badge-customization_images\WidthForContent.png)

### 3. Alignment with Automatic Sizing

When neither the SfBadgeView nor its Content has an explicit size, both controls size themselves automatically based on their content. The SfBadgeView wraps its Content, and the badge is then aligned relative to the final calculated bounds of that Content.

{% tabs %}

{% highlight xaml %}

<badge:SfBadgeView BadgeText="20" >
<badge:SfBadgeView.Content>
<Label Text="Start" Background="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</badge:SfBadgeView.Content>
<badge:SfBadgeView.BadgeSettings>
<badge:BadgeSettings BadgeAlignment="Start" />
</badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

{% endhighlight %}

{% highlight c# %}

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
Label label = new Label();
label.Text = "Start";
label.BackgroundColor = Colors.LightGray;
label.HorizontalTextAlignment = TextAlignment.Center;
label.VerticalTextAlignment = TextAlignment.Center;
label.TextColor = Colors.Black;
sfBadgeView.Content = label;
BadgeSettings badgeSetting = new BadgeSettings();
badgeSetting.BadgeAlignment = BadgeAlignment.Start;
sfBadgeView.BadgeSettings = badgeSetting;
Content = sfBadgeView;

{% endhighlight %}

{% endtabs %}

![BadgeAlignment](badge-customization_images\WithoutWidth.png)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@KishoreJey Please just use a proper image; the attached image does not look good.



## FontAutoScalingEnabled

The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontAutoScalingEnabled) property automatically scales the badge text's font size based on the operating system's text size. The default value is `false`.
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions MAUI/Chat/scrolling.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ By default, the [SfChat](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Cha

## Scroll to bottom button

The `SfChat` control provides the option to display a scroll to bottom button by setting the [ShowScrollToBottomButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_ShowScrollToBottomButton) property to `true`. This button appears when scrolled up through older messages and allows quick navigation back to the latest message in the conversation.
The `SfChat` control provides the option to display a scroll to bottom button by setting the `ShowScrollToBottomButton` property to `true`. This button appears when scrolled up through older messages and allows quick navigation back to the latest message in the conversation.

{% tabs %}
{% highlight xaml hl_lines="4" %}
Expand All @@ -76,7 +76,7 @@ sfChat.ShowScrollToBottomButton = true;

### Scroll to bottom button customization

The `SfChat` control allows you to fully customize the scroll to bottom button appearance by using the [ScrollToBottomButtonTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_ScrollToBottomButtonTemplate) property. This property lets you define a custom view and style.
The `SfChat` control allows you to fully customize the scroll to bottom button appearance by using the `ScrollToBottomButtonTemplate` property. This property lets you define a custom view and style.

{% tabs %}
{% highlight xaml hl_lines="20" %}
Expand Down