From 018e9f3fd6c224a82a23311bf75cd7d1589a62e2 Mon Sep 17 00:00:00 2001 From: Kishore Date: Tue, 23 Sep 2025 17:02:21 +0530 Subject: [PATCH 1/3] Added the BadgeAlignment behavior with detailed explanation. --- MAUI/Badge-View/Badge-customization.md | 134 ++++++++++++++++++ .../WidthForBadgeView.png | Bin 0 -> 2730 bytes .../WidthForContent.png | Bin 0 -> 4210 bytes .../WithoutWidth.png | Bin 0 -> 2628 bytes 4 files changed, 134 insertions(+) create mode 100644 MAUI/Badge-View/badge-customization_images/WidthForBadgeView.png create mode 100644 MAUI/Badge-View/badge-customization_images/WidthForContent.png create mode 100644 MAUI/Badge-View/badge-customization_images/WithoutWidth.png diff --git a/MAUI/Badge-View/Badge-customization.md b/MAUI/Badge-View/Badge-customization.md index 14c267eb12..883795edb9 100644 --- a/MAUI/Badge-View/Badge-customization.md +++ b/MAUI/Badge-View/Badge-customization.md @@ -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 %} + + + + + + + + + + {% 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 %} + + + + + + + + + + {% 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 %} + + + + + + + + + + {% 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) + + ## 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`. diff --git a/MAUI/Badge-View/badge-customization_images/WidthForBadgeView.png b/MAUI/Badge-View/badge-customization_images/WidthForBadgeView.png new file mode 100644 index 0000000000000000000000000000000000000000..eef907b0e68db493218d05974e9ff99aa0a5725b GIT binary patch literal 2730 zcmd5;XH=7E7XBzhkzo-m0fB&`jG}Y}ktWiIUPd&OVCWKv44n`Gftdv%5f$k$z(~<0 zbR>l!3W*YWXrW7y-VFgl!e;jGoZYiOcF&m~_rC9Q&VBEBpL_4Q=Si`*H5WZ`?gRh; zqLvmWjsU>3#=R4T1h^hgD^TDbJfV)}cK~dU%rY17`x)670YEKAaxJ4v&4%7@{;xzYDta_&nzkeDwkX{pZn*+lFk*Uw|K&m z4zDv@H&8JeIXPY4J>ET$Uzv&B9xRPeUO%5>CVoxd_+!x(;5L+Xr(OU!%ziHr&(E&~ zT$Hcjk>^Pe1%!p*fW>W3zT3RK(tyOtQQ%qpUp~ase_zu^N+sLIaAN4CO1^CCfrC>C zw5u%U(f-z#vUZE{IL=~O*cWdi*#E)5C58!CS5Vx!+51)bZD$F>!;vb-nVZ|$vU}`G zEoO~wGUb$!5uD0bl(||gM>B6Ffr2M%Wl->LVhuIRUUEf82zoUkon4YM z^LXdWbmk`Zz9UmJdywx*j6654b?lH*=G-}rDY^#5&6hwtnr2rQ#8?~%brXD0GZpmi zI9f_?g~v$$E82h8{NJ7G^l5jWYP--RIQ4K6|HJNk+Vy>uQ2J+_&A^ z!%`}e8UmU`-(MdkkZ8(h9}^FB!zWRK2Isu8*nS$-zdMTwjKJRrIu$3|K%aiT=yHv- zB6Z3-8#T!H0bVW0n@3_i4KlnOr@OaV$M6%()h}Yr&)HF#c*R%O?%iya(GM%3!=9O7 za51;-#rU;QN*umI1IBU%#*fI#ihG4Xu~H!%@_-f96olGNQ@DdTl{HOyCjOte3Q{Z z2RjQk0b7-VE!r7}G?Y)?{8egsa!emo!y~bwCL!VU`AHQuq5tpf#}|$_1UN(pd4iMDsZWZLGsp!Q5ylmB~&^P1;t{g1V zUtoZkB0|a{xi9?EA3#I9Z**rkV(}|)%EFqMQ^;zpDq*b-A8h)G=E^JmJVm`@JeW{L zlSutJ%(RIz#-6kqhoqVZ!P07xN3}zR+QXavS=&9!ocs;8_H=A0Tk7Xjm0;h(_rI9H zV7&=^f}QS>lS5K=X*-!N9&|26dCUkT*D&rez0Sv~KD=qE2OhU^uvk>hGGnk7@cz;#BWn)WFEK zT0Aw;RF#h!BQb%(9u&s#ov+!@r4q7DG!T?xP!gyL0iaD4E4r>-kWKdXudC z?7OL$!1`Ywi?_(F_n9&WNH;GHD?m#m#`|fs)Vxm=xi})nZSW~!lSG(09U+#X7S5}i zQ)-Th@UTB=W&L#-3`(p05HZ{9Y{GnNc}FK*t4S}n`8P5%mc&?aE81;8Wf!&*5Ifuy zG=9td;QhStn)hr^#PY!F@FR7VXX1TNL8@3v2~v}+i2O3smdGU(aUc! zRc_P5>0+?*c9SU>)OR=k6lSJf^fuDAVFnt#kZCJoX+Z=LLx z%Qs9Yuy)%jjNSQsSeGWWk>XaN&^&(j;Q1x16+Ci6LuD|ezp$&+$SrDHmTXcKr95AX zF@PWqVRU?WpiaoFN$Bv>i#D=!IeJqcjLTi~y7_{g-|UbkP0r|D92&!rh ztZs=IgN#tKR1rTWB5tj=!82<)6@u(bUa|upY?Z*&l;L3mCq6idfi;vJ zx~T#*Zp}cN?G$NbT5H9rYAoD1`j#&rpBkG#;)41f=tcTiU-~+VwKpUTt4bCDz4D@< zZ@3n<-d|bBf?^l;aVezB3gjCY8Jz(*j~b0XLZer2*BW(Tl4km@niB{Wkp#zXwcWa+ zjHdkFpu0(|C$jg(!;$PmhR;H0rXT;&JuUcX-vKVFOC&zWXMlcPU>fpW5p8qM|om>;0Fh)vo7nv*Cam^*^YBzn~&oLcTr{ YQ)Fs5pQjW4P@;gPsjUh2j^~qq0%2Rm(EtDd literal 0 HcmV?d00001 diff --git a/MAUI/Badge-View/badge-customization_images/WidthForContent.png b/MAUI/Badge-View/badge-customization_images/WidthForContent.png new file mode 100644 index 0000000000000000000000000000000000000000..ee04f2c6783a397c087b9f591ff4b594bd6f7e18 GIT binary patch literal 4210 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 literal 0 HcmV?d00001 From f42ed40508c77c59705590c2b63cf5f31793837f Mon Sep 17 00:00:00 2001 From: Kishore Date: Wed, 24 Sep 2025 17:18:09 +0530 Subject: [PATCH 2/3] updated the badge alignment inside layouts. --- MAUI/Badge-View/Badge-customization.md | 87 ++++++++++++++++++ .../badgeview_alignment.png | Bin 0 -> 6307 bytes 2 files changed, 87 insertions(+) create mode 100644 MAUI/Badge-View/badge-customization_images/badgeview_alignment.png diff --git a/MAUI/Badge-View/Badge-customization.md b/MAUI/Badge-View/Badge-customization.md index 883795edb9..77d6a9aac1 100644 --- a/MAUI/Badge-View/Badge-customization.md +++ b/MAUI/Badge-View/Badge-customization.md @@ -478,6 +478,93 @@ Content = sfBadgeView; ![BadgeAlignment](badge-customization_images\WithoutWidth.png) +## Keeping multiple badges aligned uniformly + +When placing several SfBadgeViews in the same row or grid, you can keep the visual alignment consistent across items whether a badge is present or not by using AutoHide. When BadgeText is 0 and AutoHide=True, the badge is not rendered. The content area remains uniformly aligned, so layouts stay consistent for items with and without badges. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + + + + ... + + +{% endhighlight %} + +{% highlight c# %} + + +HorizontalStackLayout horizontalStack = new HorizontalStackLayout(); +horizontalStack.Spacing = 20; +horizontalStack.HorizontalOptions = LayoutOptions.Center; +horizontalStack.VerticalOptions = LayoutOptions.Center; + +SfAvatarView avatar1 = new SfAvatarView(); +avatar1.ContentType = ContentType.AvatarCharacter; +avatar1.AvatarCharacter = AvatarCharacter.Avatar1; +avatar1.CornerRadius = 25; +avatar1.WidthRequest = 50; +avatar1.HeightRequest = 50; + +BadgeSettings badgeSettings1 = new BadgeSettings(); +badgeSettings1.BadgeAlignment = BadgeAlignment.Center; +badgeSettings1.AutoHide = true; +badgeSettings1.Type = BadgeType.None; +badgeSettings1.Background = Colors.Red; + +SfBadgeView badgeView1 = new SfBadgeView(); +badgeView1.BadgeText = "0"; +badgeView1.Content = avatar1; +badgeView1.BadgeSettings = badgeSettings1; + +SfAvatarView avatar2 = new SfAvatarView(); +avatar2.ContentType = ContentType.AvatarCharacter; +avatar2.AvatarCharacter = AvatarCharacter.Avatar2; +avatar2.CornerRadius = 25; +avatar2.WidthRequest = 50; +avatar2.HeightRequest = 50; + +BadgeSettings badgeSettings2 = new BadgeSettings(); +badgeSettings2.BadgeAlignment = BadgeAlignment.Center; +badgeSettings2.AutoHide = true; +badgeSettings2.Type = BadgeType.None; +badgeSettings2.Background = Colors.Red; + +SfBadgeView badgeView2 = new SfBadgeView(); +badgeView2.BadgeText = "10"; +badgeView2.Content = avatar2; +badgeView2.BadgeSettings = badgeSettings2; + +horizontalStack.Children.Add(badgeView1); +horizontalStack.Children.Add(badgeView2); + +Content = horizontalStack; + +{% endhighlight %} + +{% endtabs %} + +![BadgeAlignment](badge-customization_images\badgeview_alignment.png) ## FontAutoScalingEnabled diff --git a/MAUI/Badge-View/badge-customization_images/badgeview_alignment.png b/MAUI/Badge-View/badge-customization_images/badgeview_alignment.png new file mode 100644 index 0000000000000000000000000000000000000000..93f9276de63012b471a249bd90e0b8fc3148f75c GIT binary patch literal 6307 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 Date: Wed, 24 Sep 2025 17:43:47 +0530 Subject: [PATCH 3/3] updated the content. --- MAUI/Badge-View/Badge-customization.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/MAUI/Badge-View/Badge-customization.md b/MAUI/Badge-View/Badge-customization.md index 77d6a9aac1..399852c730 100644 --- a/MAUI/Badge-View/Badge-customization.md +++ b/MAUI/Badge-View/Badge-customization.md @@ -347,11 +347,11 @@ Content = sfBadgeView; ## 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. +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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) 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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) 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. +When an explicit WidthRequest and HeightRequest are set directly on the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1), 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 %} @@ -396,7 +396,7 @@ Content = sfBadgeView; ### 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. +When the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) has no explicit size, but its Content does, the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) 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 %} @@ -439,7 +439,7 @@ Content = sfBadgeView; ### 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. +When neither the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) nor its Content has an explicit size, both controls size themselves automatically based on their content. The [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) wraps its Content, and the badge is then aligned relative to the final calculated bounds of that Content. {% tabs %} @@ -480,7 +480,7 @@ Content = sfBadgeView; ## Keeping multiple badges aligned uniformly -When placing several SfBadgeViews in the same row or grid, you can keep the visual alignment consistent across items whether a badge is present or not by using AutoHide. When BadgeText is 0 and AutoHide=True, the badge is not rendered. The content area remains uniformly aligned, so layouts stay consistent for items with and without badges. +When placing several [SfBadgeView's](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) in the same row or grid, you can keep the visual alignment consistent across items whether a badge is present or not by using AutoHide. When [BadgeText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_BadgeText) is 0 and AutoHide=True, the badge is not rendered. The content area remains uniformly aligned, so layouts stay consistent for items with and without badges. {% tabs %}