diff --git a/winui/ComboBox/Searching.md b/winui/ComboBox/Searching.md index 2bf22fb54..eee0b562e 100644 --- a/winui/ComboBox/Searching.md +++ b/winui/ComboBox/Searching.md @@ -99,6 +99,32 @@ The `ComboBox` control provides support to auto append the text based on data so N> Auto appending of text is supported only in `Editable` mode and `TextSearchMode` property should be `StartsWith`. +## Diacritic aware search + +The `IgnoreDiacritic` option allows string comparison and search operations to treat characters with diacritical marks as equivalent to their base characters. This is useful for search indexing, and user-friendly matching across languages. By default, Diacritic is not considered. Enable or disable the diacritic sensitivity using the `IgnoreDiacritic` property. The following code example demonstrates how to enable the diacritic sensitivity. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +comboBox.IgnoreDiacritic = "false"; + +{% endhighlight %} +{% endtabs %} + +![WinUI ComboBox search the items based on Diacritic word/char in the edit field](Searching_images/winui-combobox-diacriticimage.png) + ## Search Mode The `TextSearchMode` property of the `ComboBox` can be used to regulate how the control behaves when it receives user input. The default text searching type is `StartsWith`, ignoring accent and it is case insensitive. The available text search modes are, diff --git a/winui/ComboBox/Searching_images/winui-combobox-diacriticimage.png b/winui/ComboBox/Searching_images/winui-combobox-diacriticimage.png new file mode 100644 index 000000000..ba88c97ca Binary files /dev/null and b/winui/ComboBox/Searching_images/winui-combobox-diacriticimage.png differ diff --git a/winui/ComboBox/Selection.md b/winui/ComboBox/Selection.md index a54db849a..518e50061 100644 --- a/winui/ComboBox/Selection.md +++ b/winui/ComboBox/Selection.md @@ -325,3 +325,38 @@ private async void OnComboBoxSelectionChanged(object sender, ComboBoxSelectionC {% endtabs %} ![WinUI ComboBox selection change notification](Selection_images/winui-combobox-selection-change-notification.png) + +## Selection changing notification + +The `SelectionChanging` event occurs before processing the selection. This is a cancelable event. This argument contains the following information: + + * `AddedItems` - Contains the items that are being selected. + * `RemovedItems` - Contains the items that are being unselected. + * `AllowDetachedSelection` - Gets or sets a value indicating whether the not in list item should be displayed or not. + * `Cancel` - Gets or sets a value that indicates whether the selection should be canceled or not. + + {% tabs %} + + {% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + +comboBox.SelectionChanging += OnComboBoxSelectionChanging; + +private void OnComboBoxSelectionChanging(object sender, Syncfusion.UI.Xaml.Editors.ComboBoxSelectionChangingEventArgs e) +{ + e.AllowDetachedSelection = true; +} + +{% endhighlight %} + + {% endtabs %} diff --git a/winui/Kanban/getting-started.md b/winui/Kanban/getting-started.md index 759989ac6..8d8658dad 100644 --- a/winui/Kanban/getting-started.md +++ b/winui/Kanban/getting-started.md @@ -57,17 +57,51 @@ public sealed partial class MainWindow : Window ## Populate WinUI Kanban item source -Here are the steps to render kanban card items using the WinUI Kanban control with the respective [KanbanModel](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) class. +This section explains how to populate the .NET MAUI Kanban control's `ItemSource` by creating and binding both default and custom task data models. -* Create view model. -* Bind the item source for Kanban. +### Creating the default model tasks -### Create view model +* **Define the View Model:** -Create a view model class to set values for the properties listed in the [KanbanModel](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) class as shown in the following example code. Each [KanbanModel](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) instance represents a card in the Kanban control. +Create a view model class to set values for the properties listed in the [`KanbanModel`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) class as shown in the following example code. Each [`KanbanModel`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) instance represent a card in Kanban control. +* **Bind item source for Kanban:** + +To populate the kanban card items, utilize the [`ItemsSource`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource) property of [`SfKanban`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html). + + +* **Defining columns in the Kanban Board:** The columns are generated automatically based on the different values of the [`Category`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanModel.html#Syncfusion_UI_Xaml_Kanban_KanbanModel_Category) in the [`KanbanModel`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) class from the [`ItemsSource`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource). However, you can manually define the columns by setting the [`AutoGenerateColumns`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) property to `false` and adding [`KanbanColumn`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html) instances to the [`Columns`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) property of [`SfKanban`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html). You can define the column categories using the [`Categories`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html#Syncfusion_UI_Xaml_Kanban_KanbanColumn_Categories) property of [`KanbanColumn`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html), and the cards will be added to their respective columns. + +The following sample code demonstrates this process in action: + +{% tabs %} +{% highlight XAML hl_lines="2, 4, 5, 6, 7, 8, 9" %} + + + + + + + + + + +{% endhighlight %} +{% highlight C# hl_lines="1, 2, 3, 4, 5" %} + +this.kanban.AutoGenerateColumns = false; +this.kanban.ItemsSource = new ViewModel().TaskDetails; +this.kanban.Columns.Add(new KanbanColumn() { HeaderText = "To Do", Categories = "Open" }); +this.kanban.Columns.Add(new KanbanColumn() { HeaderText = "In Progress", Categories = "In Progress" }); +this.kanban.Columns.Add(new KanbanColumn() { HeaderText = "Done", Categories = "Done" }); + +{% endhighlight %} {% highlight C# tabtitle="ViewModel.cs" %} +using Syncfusion.UI.Xaml.Kanban; + public class ViewModel { #region Properties @@ -148,7 +182,7 @@ public class ViewModel taskDetail.Title = "New Feature"; taskDetail.Id = "29574"; taskDetail.Description = "Dragging events support for Kanban"; - taskDetail.Category = "Closed"; + taskDetail.Category = "In Progress"; taskDetail.IndicatorColorKey = "Normal"; taskDetail.Tags = new List() { "New Control" }; taskDetail.Image = new Image @@ -162,7 +196,7 @@ public class ViewModel taskDetail.Title = "WF Issue"; taskDetail.Id = "1254"; taskDetail.Description = "HorizontalAlignment for tooltip is not working"; - taskDetail.Category = "Review"; + taskDetail.Category = "Done"; taskDetail.IndicatorColorKey = "High"; taskDetail.Tags = new List() { "Bug fixing" }; taskDetail.Image = new Image @@ -178,174 +212,129 @@ public class ViewModel } {% endhighlight %} +{% endtabs %} -### Bind item source for Kanban +![defining-columns-in-winui-kanban](images/getting-started/defining-columns-in-winui-kanban.png) -To populate the kanban card items, utilize the [ItemsSource](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource) property of [SfKanban](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html). +### Creating the custom model tasks with data mapping -{% tabs %} +You can also map custom data model to our Kanban control. The following steps demonstrate how to render tasks using the [WinUI Kanban](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html) control with respective custom data properties. -{% highlight XAML hl_lines="2" %} +* **Create a data model for kanban:** Create a simple data model in a new class file as shown in the following example code. - - - - - +* **Create view model:** Create a view model class to set values for the properties listed in the model class as shown in the following example code. -{% endhighlight %} +* **Bind item source for Kanban:** -{% highlight C# %} +To populate the Kanban card items, utilize the [`ItemsSource`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource) property of [`SfKanban`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html) control. Additionally, ensure that the following property of `SfKanban` are mapped from corresponding properties in the `ItemsSource` while initializing the kanban control. -this.kanban.ItemsSource = new ViewModel().TaskDetails; +The [ColumnMappingPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ColumnMappingPath) specifies the name of the property within the data object that is used to generate columns in the Kanban control when [`AutoGenerateColumns`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) is set to `true`. -{% endhighlight %} -{% endtabs %} +* **Defining columns in the Kanban Board:** -![binding-item-source-in-winui-kanban](images/getting-started/binding-item-source-in-winui-kanban.png) +The [`Columns`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) in the Kanban board are mapped based on the values of a specified property (e.g., "Status") from your custom data model. The [ColumnMappingPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ColumnMappingPath) specifies the name of the property within the data object that is used to generate columns in the Kanban control when [`AutoGenerateColumns`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) is set to `true`. -### Defining columns +Alternatively, you can manually define columns by setting [`AutoGenerateColumns`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) to `false` and adding instances of [`KanbanColumn`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.KanbanColumn.html) to the [`Columns`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) collection of the [`SfKanban`](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html) control. Based on the property specified in [ColumnMappingPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ColumnMappingPath), the Kanban control will generate the columns and render the corresponding cards accordingly. -The columns are generated automatically based on the different values of the [Category](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanModel.html#Syncfusion_UI_Xaml_Kanban_KanbanModel_Category) in the [KanbanModel](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) class from the [ItemsSource](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource). However, you can manually define the columns by setting the [AutoGenerateColumns](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) property to `false` and adding [KanbanColumn](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html) instances to the [Columns](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) property of [SfKanban](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html). You can define the column categories using the [Categories](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html#Syncfusion_UI_Xaml_Kanban_KanbanColumn_Categories) property of [KanbanColumn](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html), and the cards will be added to their respective columns. +Let’s look at the practical code example: {% tabs %} -{% highlight XAML hl_lines="2 4 5 6 7" %} +{% highlight XAML hl_lines="2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27" %} - - - + ItemsSource="{Binding TaskDetails}" + ColumnMappingPath="Status"> - + + + + + + + + + + + + + {% endhighlight %} +{% highlight C# hl_lines="1, 2" %} -{% highlight C# hl_lines="1 4 5 6 7" %} - -this.kanban.AutoGenerateColumns = false; this.kanban.ItemsSource = new ViewModel().TaskDetails; - -this.kanban.Columns.Add(new KanbanColumn() { HeaderText = "To Do", Categories = "Open" }); -this.kanban.Columns.Add(new KanbanColumn() { HeaderText = "In Progress", Categories = "In Progress" }); -this.kanban.Columns.Add(new KanbanColumn() { HeaderText = "Done", Categories = "Done" }); +this.kanban.ColumnMappingPath = "Status"; {% endhighlight %} +{% highlight C# tabtitle="TaskDetails.cs" %} -{% highlight C# tabtitle="ViewModel.cs" %} - -public class ViewModel +public class TaskDetails { - #region Properties - - /// - /// Gets or sets the collection of objects representing tasks in various stages. - /// - public ObservableCollection TaskDetails { get; set; } + public string Title { get; set; } + public string Description { get; set; } + public object Status { get; set; } +} - #endregion +{% endhighlight %} +{% highlight C# tabtitle="ViewModel.cs" %} - #region Constructor +public class ViewModel +{ + public ObservableCollection TaskDetails { get; set; } - /// - /// Initializes a new instance of the class. - /// public ViewModel() { this.TaskDetails = this.GetTaskDetails(); } - #endregion - - #region Private methods - - /// - /// Method to get the kanban model collections. - /// - /// The kanban model collections. - private ObservableCollection GetTaskDetails() + private ObservableCollection GetTaskDetails() { - var taskDetails = new ObservableCollection(); - string path = @"ms-appx:///"; + var taskDetails = new ObservableCollection(); - KanbanModel taskDetail = new KanbanModel(); + TaskDetails taskDetail = new TaskDetails(); taskDetail.Title = "UWP Issue"; - taskDetail.Id = "651"; taskDetail.Description = "Crosshair label template not visible in UWP"; - taskDetail.Category = "Open"; - taskDetail.IndicatorColorKey = "High"; - taskDetail.Tags = new List() { "Bug Fixing" }; - taskDetail.Image = new Image - { - Source = new BitmapImage(new Uri("ms-appx:///Assets/Kanban/People_Circle1.png")) - }; - + taskDetail.Status = "Open"; taskDetails.Add(taskDetail); - taskDetail = new KanbanModel(); + taskDetail = new TaskDetails(); taskDetail.Title = "WinUI Issue"; - taskDetail.Id = "646"; taskDetail.Description = "AxisLabel cropped when rotating the axis label"; - taskDetail.Category = "Open"; - taskDetail.IndicatorColorKey = "Low"; - taskDetail.Tags = new List() { "Bug Fixing" }; - taskDetail.Image = new Image - { - Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle2.png")) - }; - + taskDetail.Status = "Open"; taskDetails.Add(taskDetail); - taskDetail = new KanbanModel(); + taskDetail = new TaskDetails(); taskDetail.Title = "Kanban Feature"; - taskDetail.Id = "25678"; taskDetail.Description = "Provide drag and drop support"; - taskDetail.Category = "In Progress"; - taskDetail.IndicatorColorKey = "Low"; - taskDetail.Tags = new List() { "New control" }; - taskDetail.Image = new Image - { - Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle3.png")) - }; - + taskDetail.Status = "In Progress"; taskDetails.Add(taskDetail); - taskDetail = new KanbanModel(); + taskDetail = new TaskDetails(); taskDetail.Title = "New Feature"; - taskDetail.Id = "29574"; - taskDetail.Description = "Dragging events support for Kanban"; - taskDetail.Category = "In Progress"; - taskDetail.IndicatorColorKey = "Normal"; - taskDetail.Tags = new List() { "New Control" }; - taskDetail.Image = new Image - { - Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle4.png")) - }; - + taskDetail.Description = "ragging events support for Kanban"; + taskDetail.Status = "In Progress"; taskDetails.Add(taskDetail); - taskDetail = new KanbanModel(); + taskDetail = new TaskDetails(); taskDetail.Title = "WF Issue"; - taskDetail.Id = "1254"; taskDetail.Description = "HorizontalAlignment for tooltip is not working"; - taskDetail.Category = "Done"; - taskDetail.IndicatorColorKey = "High"; - taskDetail.Tags = new List() { "Bug fixing" }; - taskDetail.Image = new Image - { - Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle5.png")) - }; - + taskDetail.Status = "Done"; taskDetails.Add(taskDetail); + return taskDetails; } - - #endregion } {% endhighlight %} @@ -353,8 +342,6 @@ public class ViewModel N> When manually defining columns, ensure the [AutoGenerateColumns](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) property of [SfKanban](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html) is set to `false`. -![defining-columns-in-winui-kanban](images/getting-started/defining-columns-in-winui-kanban.png) - ## Theme The WinUI Kanban supports light and dark themes, automatically adjusting to the system's theme settings for a consistent and visually appealing experience in any environment. diff --git a/winui/Release-notes/v31.1.17.md b/winui/Release-notes/v31.1.17.md index 348df6551..53b56fe01 100644 --- a/winui/Release-notes/v31.1.17.md +++ b/winui/Release-notes/v31.1.17.md @@ -1,13 +1,13 @@ --- -title: Essential Studio for WinUI 2025 Volume 3 Main Release Release Notes - v31.1.17 -description: Essential Studio for WinUI 2025 Volume 3 Main Release Release Notes - v31.1.17 +title: Essential Studio® for WinUI Release Notes - v31.1.17 +description: Essential Studio® for WinUI 2025 Volume 3 Main Release Release Notes - v31.1.17 platform: winui documentation: ug --- -# Essential Studio for WinUI Release Notes - v31.1.17 +# Essential Studio® for WinUI Release Notes - v31.1.17 -{% include release-info.html date="September 01, 2025 " version="v31.1.17" passed="109301" failed="0" %} +{% include release-info.html date="September 01, 2025" version="v31.1.17" passed="109301" failed="0" %} {% directory path: _includes/release-notes/v31.1.17 %}