Skip to content

Commit 943a786

Browse files
RasikaPalanisamyRasikaPalanisamy
committed
Merge branch 'hotfix/hotfix-v31.1.17' of https://github.com/syncfusion-content/maui-docs into exporting_api_links
2 parents d515917 + f1ef03c commit 943a786

File tree

120 files changed

+1826
-962
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+1826
-962
lines changed

‎MAUI/AIAssistView/items.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -430,7 +430,7 @@ The `SfAIAssistView` control includes a built-in event called [CardTapped](https
430430

431431
## Show error response
432432

433-
The `SfAIAssistView` allows to display error responses by setting the error text to the `AssistItem.ErrorMessage` property, ensuring clear notification when an error occurs during AI interactions.
433+
The `SfAIAssistView` allows to display error responses by setting the error text to the [AssistItem.ErrorMessage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.AIAssistView.IAssistItem.html#Syncfusion_Maui_AIAssistView_IAssistItem_ErrorMessage) property, ensuring clear notification when an error occurs during AI interactions.
434434

435435
{% tabs %}
436436
{% highlight c# tabtitle="ViewModel.cs" hl_lines="36" %}

‎MAUI/Backdrop/header-configuration.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
3-
title: Header Configuration with Syncfusion<sup>&reg;</sup> Backdrop Page | Syncfusion<sup>&reg;</sup>
4-
description: Learn how to configure and customize the header in the Syncfusion<sup>&reg;</sup> backdrop page control in the .NET MAUI platform.
3+
title: Header Configuration with Syncfusion<sup>&reg;</sup> Backdrop Page | Syncfusion
4+
description: Learn how to configure and customize the header in the Syncfusion backdrop page control in the .NET MAUI platform.
55
platform: MAUI
66
control: SfBackdropPage
77
documentation: ug

‎MAUI/Backdrop/migration.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
3-
title: Migrate from Xamarin to .NET MAUI Backdrop page | Syncfusion<sup>&reg;</sup>
4-
description: Learn about Migrating from the Syncfusion<sup>&reg;</sup> Xamarin backdrop page to Syncfusion<sup>&reg;</sup> .NET MAUI backdrop page control and more.
3+
title: Migrate from Xamarin to .NET MAUI Backdrop page | Syncfusion
4+
description: Learn about Migrating from the Syncfusion Xamarin backdrop page to Syncfusion<sup>&reg;</sup> .NET MAUI backdrop page control and more.
55
platform: MAUI
66
control: SfBackdropPage
77
documentation: ug

‎MAUI/Badge-View/Badge-customization.md‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -345,6 +345,227 @@ Content = sfBadgeView;
345345

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

348+
## Badge Alignment and Sizing
349+
350+
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.
351+
352+
### 1. Alignment with a Fixed Size on SfBadgeView
353+
354+
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.
355+
356+
{% tabs %}
357+
358+
{% highlight xaml %}
359+
360+
<badge:SfBadgeView BadgeText="20" WidthRequest="100" HeightRequest="100" HorizontalOptions="Center" VerticalOptions="Center" >
361+
<badge:SfBadgeView.Content>
362+
<Label Text="Start" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="Black" />
363+
</badge:SfBadgeView.Content>
364+
<badge:SfBadgeView.BadgeSettings>
365+
<badge:BadgeSettings BadgeAlignment="Start" CornerRadius="0"/>
366+
</badge:SfBadgeView.BadgeSettings>
367+
</badge:SfBadgeView>
368+
369+
{% endhighlight %}
370+
371+
{% highlight c# %}
372+
373+
SfBadgeView sfBadgeView = new SfBadgeView();
374+
sfBadgeView.HorizontalOptions = LayoutOptions.Center;
375+
sfBadgeView.VerticalOptions = LayoutOptions.Center;
376+
sfBadgeView.WidthRequest = 100;
377+
sfBadgeView.HeightRequest = 100;
378+
sfBadgeView.BadgeText = "20";
379+
Label label = new Label();
380+
label.Text = "Start";
381+
label.BackgroundColor = Colors.LightGray;
382+
label.HorizontalTextAlignment = TextAlignment.Center;
383+
label.VerticalTextAlignment = TextAlignment.Center;
384+
label.TextColor = Colors.Black;
385+
sfBadgeView.Content = label;
386+
BadgeSettings badgeSetting = new BadgeSettings();
387+
badgeSetting.BadgeAlignment = BadgeAlignment.Start;
388+
sfBadgeView.BadgeSettings = badgeSetting;
389+
Content = sfBadgeView;
390+
391+
{% endhighlight %}
392+
393+
{% endtabs %}
394+
395+
![BadgeAlignment](badge-customization_images\WidthForBadgeView.png)
396+
397+
### 2. Alignment with a Fixed Size on the Content
398+
399+
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.
400+
401+
{% tabs %}
402+
403+
{% highlight xaml %}
404+
405+
<badge:SfBadgeView BadgeText="20" >
406+
<badge:SfBadgeView.Content>
407+
<Label Text="Start" Background="LightGray" HeightRequest="100" WidthRequest="100" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
408+
</badge:SfBadgeView.Content>
409+
<badge:SfBadgeView.BadgeSettings>
410+
<badge:BadgeSettings BadgeAlignment="Start" />
411+
</badge:SfBadgeView.BadgeSettings>
412+
</badge:SfBadgeView>
413+
414+
{% endhighlight %}
415+
416+
{% highlight c# %}
417+
418+
SfBadgeView sfBadgeView = new SfBadgeView();
419+
sfBadgeView.BadgeText = "20";
420+
Label label = new Label();
421+
label.Text = "Start";
422+
label.BackgroundColor = Colors.LightGray;
423+
label.HorizontalTextAlignment = TextAlignment.Center;
424+
label.VerticalTextAlignment = TextAlignment.Center;
425+
label.TextColor = Colors.Black;
426+
label.WidthRequest = 100;
427+
label.HeightRequest = 100;
428+
sfBadgeView.Content = label;
429+
BadgeSettings badgeSetting = new BadgeSettings();
430+
badgeSetting.BadgeAlignment = BadgeAlignment.Start;
431+
sfBadgeView.BadgeSettings = badgeSetting;
432+
Content = sfBadgeView;
433+
434+
{% endhighlight %}
435+
436+
{% endtabs %}
437+
438+
![BadgeAlignment](badge-customization_images\WidthForContent.png)
439+
440+
### 3. Alignment with Automatic Sizing
441+
442+
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.
443+
444+
{% tabs %}
445+
446+
{% highlight xaml %}
447+
448+
<badge:SfBadgeView BadgeText="20" >
449+
<badge:SfBadgeView.Content>
450+
<Label Text="Start" Background="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
451+
</badge:SfBadgeView.Content>
452+
<badge:SfBadgeView.BadgeSettings>
453+
<badge:BadgeSettings BadgeAlignment="Start" />
454+
</badge:SfBadgeView.BadgeSettings>
455+
</badge:SfBadgeView>
456+
457+
{% endhighlight %}
458+
459+
{% highlight c# %}
460+
461+
SfBadgeView sfBadgeView = new SfBadgeView();
462+
sfBadgeView.BadgeText = "20";
463+
Label label = new Label();
464+
label.Text = "Start";
465+
label.BackgroundColor = Colors.LightGray;
466+
label.HorizontalTextAlignment = TextAlignment.Center;
467+
label.VerticalTextAlignment = TextAlignment.Center;
468+
label.TextColor = Colors.Black;
469+
sfBadgeView.Content = label;
470+
BadgeSettings badgeSetting = new BadgeSettings();
471+
badgeSetting.BadgeAlignment = BadgeAlignment.Start;
472+
sfBadgeView.BadgeSettings = badgeSetting;
473+
Content = sfBadgeView;
474+
475+
{% endhighlight %}
476+
477+
{% endtabs %}
478+
479+
![BadgeAlignment](badge-customization_images\WithoutWidth.png)
480+
481+
## Keeping multiple badges aligned uniformly
482+
483+
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.
484+
485+
{% tabs %}
486+
487+
{% highlight xaml %}
488+
489+
<HorizontalStackLayout Spacing="20" HorizontalOptions="Center" VerticalOptions="Center">
490+
<core:SfBadgeView BadgeText="0" >
491+
<core:SfBadgeView.Content>
492+
<core:SfAvatarView ContentType="AvatarCharacter" AvatarCharacter="Avatar1" CornerRadius="25" WidthRequest="50" HeightRequest="50"/>
493+
</core:SfBadgeView.Content>
494+
<core:SfBadgeView.BadgeSettings>
495+
<core:BadgeSettings BadgeAlignment="Center" AutoHide="True" Type="None" Background="Red"/>
496+
</core:SfBadgeView.BadgeSettings>
497+
</core:SfBadgeView>
498+
499+
500+
<core:SfBadgeView BadgeText="10" >
501+
<core:SfBadgeView.Content>
502+
<core:SfAvatarView ContentType="AvatarCharacter" CornerRadius="25" WidthRequest="50" HeightRequest="50" AvatarCharacter="Avatar2"/>
503+
</core:SfBadgeView.Content>
504+
<core:SfBadgeView.BadgeSettings>
505+
<core:BadgeSettings BadgeAlignment="Center" Type="None" Background="Red" AutoHide="True" />
506+
</core:SfBadgeView.BadgeSettings>
507+
</core:SfBadgeView>
508+
509+
...
510+
</HorizontalStackLayout >
511+
512+
{% endhighlight %}
513+
514+
{% highlight c# %}
515+
516+
517+
HorizontalStackLayout horizontalStack = new HorizontalStackLayout();
518+
horizontalStack.Spacing = 20;
519+
horizontalStack.HorizontalOptions = LayoutOptions.Center;
520+
horizontalStack.VerticalOptions = LayoutOptions.Center;
521+
522+
SfAvatarView avatar1 = new SfAvatarView();
523+
avatar1.ContentType = ContentType.AvatarCharacter;
524+
avatar1.AvatarCharacter = AvatarCharacter.Avatar1;
525+
avatar1.CornerRadius = 25;
526+
avatar1.WidthRequest = 50;
527+
avatar1.HeightRequest = 50;
528+
529+
BadgeSettings badgeSettings1 = new BadgeSettings();
530+
badgeSettings1.BadgeAlignment = BadgeAlignment.Center;
531+
badgeSettings1.AutoHide = true;
532+
badgeSettings1.Type = BadgeType.None;
533+
badgeSettings1.Background = Colors.Red;
534+
535+
SfBadgeView badgeView1 = new SfBadgeView();
536+
badgeView1.BadgeText = "0";
537+
badgeView1.Content = avatar1;
538+
badgeView1.BadgeSettings = badgeSettings1;
539+
540+
SfAvatarView avatar2 = new SfAvatarView();
541+
avatar2.ContentType = ContentType.AvatarCharacter;
542+
avatar2.AvatarCharacter = AvatarCharacter.Avatar2;
543+
avatar2.CornerRadius = 25;
544+
avatar2.WidthRequest = 50;
545+
avatar2.HeightRequest = 50;
546+
547+
BadgeSettings badgeSettings2 = new BadgeSettings();
548+
badgeSettings2.BadgeAlignment = BadgeAlignment.Center;
549+
badgeSettings2.AutoHide = true;
550+
badgeSettings2.Type = BadgeType.None;
551+
badgeSettings2.Background = Colors.Red;
552+
553+
SfBadgeView badgeView2 = new SfBadgeView();
554+
badgeView2.BadgeText = "10";
555+
badgeView2.Content = avatar2;
556+
badgeView2.BadgeSettings = badgeSettings2;
557+
558+
horizontalStack.Children.Add(badgeView1);
559+
horizontalStack.Children.Add(badgeView2);
560+
561+
Content = horizontalStack;
562+
563+
{% endhighlight %}
564+
565+
{% endtabs %}
566+
567+
![BadgeAlignment](badge-customization_images\badgeview_alignment.png)
568+
348569
## FontAutoScalingEnabled
349570

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

‎MAUI/Badge-View/badge-customization_images/WidthForBadgeView.png‎

2.67 KB
Loading

‎MAUI/Badge-View/badge-customization_images/WidthForContent.png‎

4.11 KB
Loading

‎MAUI/Badge-View/badge-customization_images/WithoutWidth.png‎

2.57 KB
Loading

‎MAUI/Badge-View/badge-customization_images/badgeview_alignment.png‎

6.16 KB
Loading

‎MAUI/Barcode-Generator/overview.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
3-
title: About .NET MAUI Barcode Generator control | Syncfusion<sup>&reg;</sup>
4-
description: Learn here all about introduction of Syncfusion<sup>&reg;</sup> .NET MAUI Barcodes(SfBarcodeGenerator) control with key features and more.
3+
title: About .NET MAUI Barcode Generator control | Syncfusion
4+
description: Learn here all about introduction of Syncfusion .NET MAUI Barcodes(SfBarcodeGenerator) control with key features and more.
55
platform: maui
66
control: SfBarcodeGenerator
77
documentation: ug

‎MAUI/Calendar/date-restrictions.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
3-
title: Date Restrictions in .NET MAUI Calendar control | Syncfusion<sup>&reg;</sup>
4-
description: Learn here all about Date restrictions feature of Syncfusion<sup>&reg;</sup> .NET MAUI Calendar (SfCalendar) control and more.
3+
title: Date Restrictions in .NET MAUI Calendar control | Syncfusion
4+
description: Learn here all about Date restrictions feature of Syncfusion .NET MAUI Calendar (SfCalendar) control and more.
55
platform: maui
66
control: SfCalendar
77
documentation: ug

0 commit comments

Comments
 (0)