Skip to content

Commit 99c68e9

Browse files
Jeyasri-MuruganJeyasri-Murugan
authored
Merge pull request #3334 from syncfusion-content/New_Release_UG_Dev
New release UG
2 parents a9e9111 + 83ab7bf commit 99c68e9

File tree

4 files changed

+278
-11
lines changed

4 files changed

+278
-11
lines changed

‎MAUI/DataForm/Validation.md

Lines changed: 60 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
3-
title: Data validation in .NET MAUI DataForm control | Syncfusion<sup>&reg;</sup>
4-
description: Learn about the validation feature in Syncfusion<sup>&reg;</sup> .NET MAUI DataForm (SfDataForm) control in mobile and desktop applications from a single shared codebase.
3+
title: Data validation in .NET MAUI DataForm control | Syncfusion®
4+
description: Learn about the validation feature in Syncfusion® .NET MAUI DataForm (SfDataForm) control in mobile and desktop applications from a single shared codebase.
55
platform: maui
66
control: SfDataForm
77
documentation: ug
@@ -62,11 +62,11 @@ The supported validation modes are as follows:
6262
{% tabs %}
6363
{% highlight XAML %}
6464

65-
<ContentPage
65+
<ContentPage
6666
...
6767
xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
6868
<dataForm:SfDataForm
69-
x:Name="dataForm"
69+
x:Name="dataForm"
7070
ValidationMode="LostFocus">
7171
</dataForm:SfDataForm>
7272
</ContentPage>
@@ -193,6 +193,60 @@ private void OnDataFormValidateProperty(object sender, DataFormValidatePropertyE
193193
{% endhighlight %}
194194
{% endtabs %}
195195

196+
## Show or Hide Validation Label
197+
198+
#### Show or Hide Error Message Label
199+
200+
The `ShowErrorLabel` property of a [DataformItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.DataFormItem.html?tabs=tabid-53%2Ctabid-58%2Ctabid-100%2Ctabid-33%2Ctabid-38%2Ctabid-6%2Ctabid-1%2Ctabid-28%2Ctabid-63%2Ctabid-8%2Ctabid-48%2Ctabid-96%2Ctabid-68%2Ctabid-76%2Ctabid-18%2Ctabid-13%2Ctabid-23%2Ctabid-72%2Ctabid-84%2Ctabid-92%2Ctabid-80%2Ctabid-88%2Ctabid-43) controls whether the error label is displayed. When set to true, the error label appears during validation failures. When set to false, the label remains hidden.
201+
202+
{% tabs %}
203+
{% highlight XAML %}
204+
205+
<ContentPage
206+
...
207+
xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
208+
<dataForm:SfDataForm x:Name="dataForm" AutoGenerateItems="False">
209+
<dataForm:SfDataForm.Items>
210+
<dataForm:DataFormTextItem x:Name="TextItem" ShowErrorLabel="false"/>
211+
</dataForm:SfDataForm.Items>
212+
</dataForm:SfDataForm>
213+
</ContentPage>
214+
215+
{% endhighlight %}
216+
{% highlight C# %}
217+
218+
this.dataForm.AutoGenerateItems = false;
219+
this.TextItem.ShowErrorLabel = false;
220+
221+
{% endhighlight %}
222+
{% endtabs %}
223+
224+
#### Show or Hide Valid Message Label
225+
226+
The `ShowValidMessageLabel` property of a [DataformItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.DataFormItem.html?tabs=tabid-53%2Ctabid-58%2Ctabid-100%2Ctabid-33%2Ctabid-38%2Ctabid-6%2Ctabid-1%2Ctabid-28%2Ctabid-63%2Ctabid-8%2Ctabid-48%2Ctabid-96%2Ctabid-68%2Ctabid-76%2Ctabid-18%2Ctabid-13%2Ctabid-23%2Ctabid-72%2Ctabid-84%2Ctabid-92%2Ctabid-80%2Ctabid-88%2Ctabid-43) controls the visibility of the valid message label. Setting this property to true displays the label when the input is valid, while setting it to false hides the label.
227+
228+
{% tabs %}
229+
{% highlight XAML %}
230+
231+
<ContentPage
232+
...
233+
xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
234+
<dataForm:SfDataForm x:Name="dataForm" AutoGenerateItems="False">
235+
<dataForm:SfDataForm.Items>
236+
<dataForm:DataFormTextItem x:Name="TextItem" ShowValidMessageLabel="false"/>
237+
</dataForm:SfDataForm.Items>
238+
</dataForm:SfDataForm>
239+
</ContentPage>
240+
241+
{% endhighlight %}
242+
{% highlight C# %}
243+
244+
this.dataForm.AutoGenerateItems = false;
245+
this.TextItem.ShowErrorLabel = false;
246+
247+
{% endhighlight %}
248+
{% endtabs %}
249+
196250
## Validation label appearance customization
197251

198252
The data form supports customizing the style of both error and valid message label style easily.
@@ -203,7 +257,7 @@ The error label style can be customized by changing the [ErrorLabelTextStyle](ht
203257

204258
{% tabs %}
205259
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="3 6 7" %}
206-
<ContentPage
260+
<ContentPage
207261
...
208262
xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
209263
<dataForm:SfDataForm
@@ -255,7 +309,7 @@ The valid message label style can be customized by changing the [ValidMessageLab
255309
{% tabs %}
256310
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="3 6 7" %}
257311

258-
<ContentPage
312+
<ContentPage
259313
...
260314
xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
261315
<dataForm:SfDataForm

‎MAUI/Scheduler/agenda-view.md

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Agenda view in .NET MAUI Scheduler control | Syncfusion<sup>&reg;</sup>
3+
title: Agenda view in .NET MAUI Scheduler control | Syncfusion®
44
description: Learn here all about the Agenda view feature of Syncfusion<sup>&reg;</sup> .NET MAUI Scheduler (SfScheduler) control and more.
55
platform: maui
66
control: SfScheduler
@@ -308,6 +308,44 @@ this.Scheduler.AppointmentTextStyle = appointmentTextStyle;
308308

309309
![appointment-text-appearence-customization-in-maui-scheduler](images/agenda-view/appointment-text-appearence-customization-in-maui-scheduler.png)
310310

311+
## Customize "No Events" Text Appearance
312+
313+
The appearance of the "No events" text in the Agenda view can be customized using the `NoEventsTextStyle` property of the [SfScheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html). This allows modification of font size, color, and other text attributes.
314+
315+
{% tabs %}
316+
{% highlight XAML hl_lines="6 7 8 9" %}
317+
318+
<scheduler:SfScheduler x:Name="scheduler"
319+
View="Agenda"
320+
AllowedViews="Day, Agenda">
321+
<scheduler:SfScheduler.AgendaView>
322+
<scheduler:SchedulerAgendaView>
323+
<scheduler:SchedulerAgendaView.NoEventsTextStyle>
324+
<scheduler:SchedulerTextStyle TextColor="DarkSlateGrey" FontAttributes="Italic" FontSize="15"/>
325+
</scheduler:SchedulerAgendaView.NoEventsTextStyle>
326+
</scheduler:SchedulerAgendaView>
327+
</scheduler:SfScheduler.AgendaView>
328+
</scheduler:SfScheduler>
329+
330+
{% endhighlight %}
331+
{% highlight C# hl_lines="10" %}
332+
333+
// Customizing the No events text style in agenda view
334+
var textStyle = new SchedulerTextStyle()
335+
{
336+
TextColor = Colors.DarkSlateGrey,
337+
FontAttributes = FontAttributes.Italic,
338+
FontSize = 15,
339+
FontAutoScalingEnabled = true
340+
};
341+
// Setting the TextStyle for the NoEvets text.
342+
this.scheduler.AgendaView.NoEventsTextStyle = textStyle;
343+
344+
{% endhighlight %}
345+
{% endtabs %}
346+
347+
N> The "No Events" message is displayed when there are no appointments for the current date or for the date specified using the [DisplayDate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html#Syncfusion_Maui_Scheduler_SfScheduler_DisplayDate) property.
348+
311349
## Change the appointment time format
312350

313351
You can customize the appointment time format of the scheduler by using the [AppointmentTimeFormat](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerAgendaView.html#Syncfusion_Maui_Scheduler_SchedulerAgendaView_AppointmentTimeFormat) property of [AgendaView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerAgendaView.html).

‎MAUI/Segmented-Control/selection.md

Lines changed: 58 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Segment item selection in .NET MAUI Segmented control | Syncfusion<sup>&reg;</sup>
3+
title: Segment item selection in .NET MAUI Segmented control | Syncfusion®
44
description: Learn about the segment item selection in Syncfusion<sup>&reg;</sup> .NET MAUI Segmented Control (SfSegmentedControl).
55
platform: maui
66
control: SfSegmentedControl
@@ -268,7 +268,7 @@ N> The `Background` property of `SelectionIndicatorSettings` is applicable only
268268
Customize the selected segment background of each segment item using the [SelectedSegmentBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentItem.html#Syncfusion_Maui_Buttons_SfSegmentItem_SelectedSegmentBackground) property of [SfSegmentItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentItem.html).
269269

270270
{% tabs %}
271-
{% highlight C# tabtitle="MainPage.xaml.cs"%}
271+
{% highlight C# tabtitle="MainPage.xaml.cs" %}
272272

273273
using Syncfusion.Maui.Buttons;
274274
. . .
@@ -344,7 +344,7 @@ public partial class MainPage : ContentPage
344344
Customize the selected segment text color of each segment item using the [SelectedSegmentTextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentItem.html#Syncfusion_Maui_Buttons_SfSegmentItem_SelectedSegmentTextColor) property of [SfSegmentItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentItem.html).
345345

346346
{% tabs %}
347-
{% highlight C# tabtitle="MainPage.xaml.cs"%}
347+
{% highlight C# tabtitle="MainPage.xaml.cs" %}
348348

349349
using Syncfusion.Maui.Buttons;
350350
. . .
@@ -460,6 +460,61 @@ public partial class MainPage : ContentPage
460460

461461
![Selected segment border thickness customization in .NET MAUI Segmented control.](images/selection/border-stroke-thickness.png)
462462

463+
## Enable or Disable Ripple Animation
464+
465+
The [SfSegmentedControl](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.html) provides a ripple animation that visually highlights a segment when it is tapped. This effect applies to both default segment items and items defined using custom data templates. You can enable or disable this animation using the `EnableRippleEffect` property. Set `EnableRippleEffect` to true to display the ripple effect when a segment is selected. Set it to false to disable the ripple animation.
466+
467+
468+
{% tabs %}
469+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="4" %}
470+
471+
<ContentPage xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons">
472+
473+
<buttons:SfSegmentedControl x:Name="segmentedControl"
474+
EnableRippleEffect="False">
475+
<buttons:SfSegmentedControl.ItemsSource>
476+
<x:Array Type="{x:Type x:String}">
477+
<x:String>Day</x:String>
478+
<x:String>Week</x:String>
479+
<x:String>Month</x:String>
480+
<x:String>Year</x:String>
481+
</x:Array>
482+
</buttons:SfSegmentedControl.ItemsSource>
483+
</buttons:SfSegmentedControl>
484+
485+
</ContentPage>
486+
487+
{% endhighlight %}
488+
{% endtabs %}
489+
490+
{% tabs %}
491+
{% highlight xaml tabtitle="MainPage.xaml.cs" hl_lines="17" %}
492+
493+
using Syncfusion.Maui.Buttons;
494+
. . .
495+
496+
public partial class MainPage : ContentPage
497+
{
498+
public MainPage()
499+
{
500+
InitializeComponent();
501+
SfSegmentedControl segmentedControl = new SfSegmentedControl();
502+
List<SfSegmentItem> itemList = new List<SfSegmentItem>
503+
{
504+
new SfSegmentItem() {Text = "Day"},
505+
new SfSegmentItem() {Text = "Week"},
506+
new SfSegmentItem() {Text = "Month"},
507+
new SfSegmentItem() {Text = "Year"},
508+
};
509+
segmentedControl.ItemsSource = itemList;
510+
segmentedControl.EnableRippleEffect = false;
511+
this.Content = segmentedControl;
512+
}
513+
}
514+
515+
{% endhighlight %}
516+
{% endtabs %}
517+
463518
## Notifying segment selection changes
464519
The [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.html#Syncfusion_Maui_Buttons_SfSegmentedControl_SelectionChanged) event is triggered once the segment is selected in the segmented control. The [SelectionChangedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SelectionChangedEventArgs.html) has the following values, which provide information for the `SelectionChanged` event.
465520

‎MAUI/Toolbar/customization.md

Lines changed: 121 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ The toolbar control supports customization of toolbar items using properties [Is
1818
* **IsEnabled** : This property is used to enable or disable the toolbar item.
1919
* **TextStyle** : This property is used to customize the text style of the toolbar item.
2020
* **Color** : This property is used to set color for the icon in the toolbar.
21+
* **SelectionHighlightColor** : This property is used to set the color for the selected toolbar item.
2122

2223
The following code sample demonstrates how to create a toolbar control with toolbar Items customization.
2324

@@ -210,11 +211,130 @@ The following code sample demonstrates how to create a toolbar control with tool
210211

211212
![toolbar-items-customization](images/toolbaritem-customization.png)
212213

214+
## Set Highlight Color for Selected Toolbar Item
215+
216+
The `SelectionHighlightColor` property of the [SfToolbarItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbarItem.html) is used to define the color that highlights a toolbar item when it is tapped. This makes the selected item visually distinct from the others in the toolbar.
217+
218+
{% tabs %}
219+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="5 9 13 21" %}
220+
221+
<ContentPage
222+
. . .
223+
xmlns:toolbar="clr-namespace:Syncfusion.Maui.Toolbar;assembly=Syncfusion.Maui.Toolbar">
224+
225+
<toolbar:SfToolbar x:Name="toolbar">
226+
<toolbar:SfToolbar.Items>
227+
<toolbar:SfToolbarItem Name="Bold"
228+
Text="Bold"
229+
SelectionHighlightColor="LightGreen"></toolbar:SfToolbarItem>
230+
<toolbar:SfToolbarItem Name="Underline"
231+
Text="Underline"
232+
SelectionHighlightColor="LightBlue"></toolbar:SfToolbarItem>
233+
<toolbar:SfToolbarItem Name="Italic"
234+
Text="Italic"
235+
SelectionHighlightColor="Violet">
236+
<toolbar:SfToolbarItem.Icon>
237+
<FontImageSource Glyph="&#xE771;"
238+
FontFamily="MauiMaterialAssets"/>
239+
</toolbar:SfToolbarItem.Icon>
240+
</toolbar:SfToolbarItem>
241+
<toolbar:SfToolbarItem Name="AlignLeft"
242+
Text="Align-Left"
243+
SelectionHighlightColor="Yellow">
244+
<toolbar:SfToolbarItem.Icon>
245+
<FontImageSource Glyph="&#xE751;"
246+
FontFamily="MauiMaterialAssets" />
247+
</toolbar:SfToolbarItem.Icon>
248+
</toolbar:SfToolbarItem>
249+
<toolbar:SfToolbarItem Name="AlignRight"
250+
ToolTipText="Align-Right"
251+
SelectionHighlightColor="Turquoise">
252+
<toolbar:SfToolbarItem.Icon>
253+
<FontImageSource Glyph="&#xE753;"
254+
FontFamily="MauiMaterialAssets" />
255+
</toolbar:SfToolbarItem.Icon>
256+
</toolbar:SfToolbarItem>
257+
<toolbar:SfToolbarItem Name="AlignCenter"
258+
ToolTipText="Align-Center"
259+
SelectionHighlightColor="LavenderBlush">
260+
<toolbar:SfToolbarItem.Icon>
261+
<FontImageSource Glyph="&#xE752;"
262+
FontFamily="MauiMaterialAssets" />
263+
</toolbar:SfToolbarItem.Icon>
264+
</toolbar:SfToolbarItem>
265+
</toolbar:SfToolbar.Items>
266+
</toolbar:SfToolbar>
267+
268+
</ContentPage>
269+
270+
{% endhighlight %}
271+
{% endtabs %}
272+
273+
{% tabs %}
274+
{% highlight c# tabtitle="MainPage.xaml.cs" %}
275+
276+
public partial class MainPage : ContentPage
277+
{
278+
public MainPage()
279+
{
280+
InitializeComponent();
281+
SfToolbar toolbar = new SfToolbar();
282+
ObservableCollection<BaseToolbarItem> itemCollection = new ObservableCollection<BaseToolbarItem>
283+
{
284+
new SfToolbarItem
285+
{
286+
Name = "Bold",
287+
Text = "Bold",
288+
SelectionHighlightColor = Colors.LightGreen
289+
},
290+
new SfToolbarItem
291+
{
292+
Name = "Underline",
293+
Text = "Underline",
294+
SelectionHighlightColor = Colors.LightBlue
295+
},
296+
new SfToolbarItem
297+
{
298+
Name = "Italic",
299+
Text = "Italic",
300+
Icon = new FontImageSource { Glyph = "\uE771", FontFamily="MauiMaterialAssets" },
301+
SelectionHighlightColor = Colors.Violet
302+
},
303+
new SfToolbarItem
304+
{
305+
Name = "AlignLeft",
306+
Text = "Align-Left",
307+
Icon = new FontImageSource { Glyph = "\uE751", FontFamily="MauiMaterialAssets" },
308+
SelectionHighlightColor = Colors.Yellow
309+
},
310+
new SfToolbarItem
311+
{
312+
Name = "AlignRight",
313+
ToolTipText = "Align-Right",
314+
Icon = new FontImageSource { Glyph = "\uE753", FontFamily="MauiMaterialAssets" },
315+
SelectionHighlightColor = Colors.Turquoise
316+
},
317+
new SfToolbarItem
318+
{
319+
Name = "AlignCenter",
320+
ToolTipText = "Align-Center",
321+
Icon = new FontImageSource { Glyph = "\uE752", FontFamily="MauiMaterialAssets" },
322+
SelectionHighlightColor = Colors.LavenderBlush
323+
}
324+
};
325+
326+
toolbar.Items = itemCollection;
327+
this.Content = toolbar;
328+
}
329+
}
330+
331+
{% endhighlight %}
332+
{% endtabs %}
333+
213334
## Separator Item Customization
214335

215336
The toolbar control supports customization of separator item using properties [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SeparatorToolbarItem.html#Syncfusion_Maui_Toolbar_SeparatorToolbarItem_Stroke) and [StrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SeparatorToolbarItem.html#Syncfusion_Maui_Toolbar_SeparatorToolbarItem_StrokeThickness).
216337

217-
218338
* **Stroke** : This property is used to customize the stroke color of the separator item.
219339
* **StrokeThickness** : This property is used to customize the stroke thickness of the separator item.
220340

0 commit comments

Comments
 (0)