Skip to content

[Dev]963238 - Need to prepare UG document for Volume 2 release #3336

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 16, 2025
Merged
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions MAUI/Autocomplete/Selection.md
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,52 @@ SfAutocomplete autoComplete = new SfAutocomplete
{% endtabs %}

![.NET MAUI Autocomplete with TokensWrapMode as none.](Images/Selection/net-maui-autocomplete-nonemode.png)

### Value change notification

When the value of Autocomplete changes, the `ValueChanged` event is triggered. This event is raised when the value changes due to user interaction, programmatic updates, or any other mechanism. It provides both `OldValue` and `NewValue`, allowing for responsive handling of changes. The ValueChanged event contains the following properties:

* `OldValue` – Contains the previous text value before the change.
* `NewValue` – Contains the new text value after the change.

{% tabs %}
{% highlight xaml %}

<editors:SfAutocomplete x:Name="autocomplete"
TextMemberPath="Name"
DisplayMemberPath="Name"
ItemsSource="{Binding SocialMedias}"
ValueChanged="OnValueChanged" />

{% endhighlight %}

{% highlight C# %}

SfAutoComplete autocomplete = new SfAutoComplete
{
ItemsSource = socialMediaViewModel.SocialMedias,
DisplayMemberPath = "Name",
TextMemberPath = "Name"
};
autocomplete.ValueChanged += OnValueChanged;

{% endhighlight %}

{% endtabs %}

The ValueChanged event can be handled as follows:

{% tabs %}
{% highlight C# %}

private async void OnValueChanged(object sender, AutocompleteValueChangedEventArgs e)
{
await DisplayAlert("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok");
}

{% endhighlight %}

{% endtabs %}

## Selection changing notification

Expand Down
33 changes: 33 additions & 0 deletions MAUI/Autocomplete/UI-Customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -547,6 +547,39 @@ SfAutocomplete autocomplete = new SfAutocomplete

![.NET MAUI Autocomplete DropDown Stroke Thickness](Images/UICustomization/DropDownStrokeThickness.png)

### Customize the visibility of Dropdown Shadow

The `IsDropDownShadowVisible` property is used to customize the visibility of the dropdown shadow.

{% tabs %}
{% highlight xaml %}

<editors:SfAutocomplete x:Name="autocomplete"
ItemsSource="{Binding SocialMedias}"
DisplayMemberPath="Name"
TextMemberPath="Name"
Placeholder="Enter Media"
IsDropDownShadowVisible="False" />

{% endhighlight %}

{% highlight C# %}

SfAutocomplete autocomplete = new SfAutocomplete
{
ItemsSource = socialMediaViewModel.SocialMedias,
DisplayMemberPath = "Name",
TextMemberPath = "Name",
Placeholder = "Enter Media",
IsDropDownShadowVisible = False
};


{% endhighlight %}
{% endtabs %}

![.NET MAUI Autocomplete Dropdown shadow visibility is false](Images/UICustomization/DropdownShadowVisible.png)

### Customize the DropDown Item Height

The [DropDownItemHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemHeight) property is used to modify the height of the dropdown items.
Expand Down
52 changes: 47 additions & 5 deletions MAUI/Carousel-View/UIVirtualization.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,43 +9,47 @@ documentation : ug

# UIVirtualization in .NET MAUI Carousel View (SfCarousel)

In the UI virtualization concept, only the number of items that can be adaptable to the viewport of our device are arranged. Even, if numerous items have been added to the collection, it only loads the viewport adaptable count of the carousel items. Items are added at the right of the view when swiping the countable items in the forward direction. At the same time, the same number of items are removed at the left of the view to maintain the same viewport items count. Similarly, items are added at the left of the view when swiping backward to maintain the same viewport items count. At the same time, the same number of items are removed at the right of the view. Using this mechanism, the virtualization concept is achieved in the carousel control.
UI virtualization in the `SfCarousel` control ensures that only the items visible in the viewport are rendered, significantly improving performance when working with large data sets. As users swipe through the carousel, new items are dynamically added to the visible area while off-screen items are removed, maintaining a consistent number of rendered items.

The following property has been used in UIVirtualization support:

* `EnableVirtualization`

## EnableVirtualization

The UI virtualization concept is implemented by enabling the [EnableVirtualization](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_EnableVirtualization) property in SfCarousel Linear mode.
The UI virtualization concept is implemented by enabling the [EnableVirtualization](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_EnableVirtualization) property in SfCarousel, supporting both Default and Linear view modes.

N> The default value of the [EnableVirtualization](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_EnableVirtualization) property is false.

### Default Mode

{% tabs %}

{% highlight xaml %}

<!-- Default View Mode -->
<carousel:SfCarousel x:Name="carousel"
ItemsSource="{Binding ImageCollection}"
ItemTemplate="{StaticResource itemTemplate}"
ItemHeight="200"
ItemWidth="200"
ItemSpacing="2"
ViewMode="Linear"
ViewMode="Default"
EnableVirtualization="true">
</carousel:SfCarousel>

{% endhighlight %}

{% highlight c# %}

// Default Mode Configuration
SfCarousel carousel = new SfCarousel()
{
ItemHeight= 200,
ItemHeight = 200,
ItemWidth = 200,
ItemSpacing = 2,
EnableVirtualization = true,
ViewMode = ViewMode.Linear
ViewMode = ViewMode.Default
};

carousel.ItemTemplate = itemTemplate;
Expand All @@ -55,6 +59,44 @@ carousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection");

{% endtabs %}

### Linear Mode

{% tabs %}

{% highlight xaml %}

<!-- Linear View Mode -->
<carousel:SfCarousel x:Name="linearCarousel"
ItemsSource="{Binding ImageCollection}"
ItemTemplate="{StaticResource itemTemplate}"
ItemHeight="200"
ItemWidth="200"
ItemSpacing="2"
ViewMode="Linear"
EnableVirtualization="true">
</carousel:SfCarousel>

{% endhighlight %}

{% highlight c# %}

// Linear Mode Configuration
SfCarousel linearCarousel = new SfCarousel()
{
ItemHeight = 200,
ItemWidth = 200,
ItemSpacing = 2,
EnableVirtualization = true,
ViewMode = ViewMode.Linear
};

linearCarousel.ItemTemplate = itemTemplate;
linearCarousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection");

{% endhighlight %}

{% endtabs %}

![UIVirtualization](images/UIVirtualization.png)

Find the complete UIVirtualization sample from this [link](https://github.com/SyncfusionExamples/maui-carousel-samples/tree/master/UIVirtualization/VirtualizationSample).
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions MAUI/ComboBox/Selection.md
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,52 @@ The following gif image illustrates the result of the above code:

![.NET MAUI ComboBox selection changing event notification.](Images/Selection/net-maui-combobox-selection-changing-notification.gif)


### Value change notification
When the value of comboBox changes, the `ValueChanged` event is triggered. This event is raised when the value changes due to user interaction, programmatic updates, or any other mechanism. It provides both `OldValue` and `NewValue`, allowing for responsive handling of changes. The ValueChanged event contains the following properties:

* `OldValue` – Contains the previous text value before the change.
* `NewValue` – Contains the new text value after the change.

{% tabs %}
{% highlight xaml %}

<editors:SfComboBox x:Name="comboBox"
TextMemberPath="Name"
DisplayMemberPath="Name"
ItemsSource="{Binding SocialMedias}"
ValueChanged="OnValueChanged" />

{% endhighlight %}

{% highlight C# %}

SfComboBox comboBox = new SfComboBox
{
ItemsSource = socialMediaViewModel.SocialMedias,
DisplayMemberPath = "Name",
TextMemberPath = "Name"
};
comboBox.ValueChanged += OnValueChanged;

{% endhighlight %}

{% endtabs %}

The ValueChanged event can be handled as follows:

{% tabs %}
{% highlight C# %}

private async void OnValueChanged(object sender, ComboBoxValueChangedEventArgs e)
{
await DisplayAlert("Alert", "Value has changed to: " + e.NewValue.ToString(), "Ok");
}

{% endhighlight %}

{% endtabs %}

## Selection changed notification

When an item is selected from the .NET MAUI drop-down list, the [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_SelectionChanged) event is triggered. The SelectionChanged event contains the newly selected and previously selected items in the `AddedItems` and `RemovedItems` properties. The SelectionChanged contains the following properties:
Expand Down
33 changes: 33 additions & 0 deletions MAUI/ComboBox/UI-Customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -616,6 +616,39 @@ SfComboBox comboBox = new SfComboBox()

![.NET MAUI ComboBox DropDown StrokeThickness](Images/UICustomization/DropDownStrokeThickness.png)

### Customize the visibility of Dropdown Shadow

The `IsDropDownShadowVisible` property is used to customize the visibility of the dropdown shadow.

{% tabs %}
{% highlight xaml %}

<editors:SfComboBox x:Name="comboBox"
ItemsSource="{Binding SocialMedias}"
DisplayMemberPath="Name"
TextMemberPath="Name"
Placeholder="Enter Media"
IsDropDownShadowVisible="False" />

{% endhighlight %}

{% highlight C# %}

SfComboBox comboBox = new SfComboBox()
{
ItemsSource = socialMediaViewModel.SocialMedias,
DisplayMemberPath = "Name",
TextMemberPath = "Name",
Placeholder = "Enter Media",
IsDropDownShadowVisible = False
};


{% endhighlight %}
{% endtabs %}

![.NET MAUI ComboBox Dropdown shadow visibility is false](Images/UICustomization/DropdownShadowVisible.png)

### Customize the DropDown Item Height

The [DropDownItemHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.DropDownControls.DropDownListBase.html#Syncfusion_Maui_Inputs_DropDownControls_DropDownListBase_DropDownItemHeight) property is used to modify the height of the dropdown items.
Expand Down
60 changes: 60 additions & 0 deletions MAUI/NumericEntry/UpDown-Button.md
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,66 @@ sfNumericEntry.UpDownButtonAlignment = UpDownButtonAlignment.Both;

![UpDown Alignment is Both in .NET MAUI NumericEntry](UpDownButton_images/UpDownButtonAlignmentBoth.png)


## UpDown button order

You can change the order of the UpDown buttons in the [NumericEntry](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfNumericEntry.html) control using the `UpDownOrder` property. Set its value to **UpThenDown** or **DownThenUp** to position the buttons on the entry field, respectively.

N> By default, the `UpDownOrder` property is set to **UpThenDown**.

### UpDown button order: UpThenDown

{% tabs %}
{% highlight XAML %}

<editors:SfNumericEntry Value="123"
WidthRequest="200"
UpDownOrder="UpThenDown"
UpDownPlacementMode="Inline"
UpDownButtonAlignment="Right"/>

{% endhighlight %}
{% highlight c# %}

SfNumericEntry sfNumericEntry = new SfNumericEntry();
sfNumericEntry.WidthRequest = 200;
sfNumericEntry.Value = 123;
sfNumericEntry.UpDownOrder = UpDownOrder.UpThenDown;
sfNumericEntry.UpDownPlacementMode = NumericEntryUpDownPlacementMode.Inline;
sfNumericEntry.UpDownButtonAlignment = UpDownButtonAlignment.Right;

{% endhighlight %}
{% endtabs %}

![UpDown Order is Up then down in .NET MAUI NumericEntry](UpDownButton_images/UpDownButtonOrderUpThenDown.png)

### UpDown button order: DownThenUP

{% tabs %}
{% highlight XAML %}

<editors:SfNumericEntry Value="123"
WidthRequest="200"
UpDownOrder="DownThenUp"
UpDownPlacementMode="Inline"
UpDownButtonAlignment="Right/>

{% endhighlight %}
{% highlight c# %}

SfNumericEntry sfNumericEntry = new SfNumericEntry();
sfNumericEntry.WidthRequest = 200;
sfNumericEntry.Value = 123;
sfNumericEntry.UpDownOrder = UpDownOrder.DownThenUp;
sfNumericEntry.UpDownPlacementMode = NumericEntryUpDownPlacementMode.Inline;
sfNumericEntry.UpDownButtonAlignment = UpDownButtonAlignment.Right;

{% endhighlight %}
{% endtabs %}

![UpDown order is DownThenUp in .NET MAUI NumericEntry](UpDownButton_images/UpDownButtonOrderDownThenUp.png)


## UpDown button customization

## UpDown button color
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.