From 26945dd547b29ff9f445570288594c2650c86953 Mon Sep 17 00:00:00 2001 From: Vishal Omprasad Date: Wed, 27 Aug 2025 00:15:21 +0530 Subject: [PATCH 01/10] 977013 - WPF Kanban UG Getting Started - custom mapping feature --- wpf/Kanban-Board/Getting-started.md | 583 +++++++++++++++++++++------- 1 file changed, 432 insertions(+), 151 deletions(-) diff --git a/wpf/Kanban-Board/Getting-started.md b/wpf/Kanban-Board/Getting-started.md index 0e884d5a17..f92cb68bfe 100644 --- a/wpf/Kanban-Board/Getting-started.md +++ b/wpf/Kanban-Board/Getting-started.md @@ -21,16 +21,7 @@ N> This window differs for the Visual Basic project. ## Create a simple Kanban -In this walk through, you will create a new application that contains the SfKanban which includes the below topics. - -* Adding SfKanban -* Create data model -* Binding data -* Defining columns -* Working with Workflows -* Work In-Progress Limit - -#### Adding SfKanban +### Adding SfKanban 1. Add the required assembly references to the project as discussed in the Reference Essential Studio Components in your Solution section. @@ -71,7 +62,7 @@ SfKanban kanban = new SfKanban(); {% endcapture %} {{ codesnippet2 | OrderList_Indent_Level_1 }} -#### Adding SfKanban from toolbox +### Adding SfKanban from toolbox Drag and drop the Kanban control from the toolbox to your application. @@ -85,225 +76,515 @@ Now the Syncfusion.SfKanban.WPF reference is added to the application references ![Adding SfKanban from toolbox Xaml Reference](sfkanban_images/wpf-kanban-board-xaml-reference.png) +## Populate WPF Kanban item source -#### Create data model - -You need to create a collection of KanbanModel objects for populating SfKanban. - -{% highlight c# %} - - public class TaskDetails - { - public TaskDetails() - { - - Tasks = new ObservableCollection(); - - Tasks.Add(new KanbanModel() - { - - Title = "Universal App", - - ID = "27654", +### Creating the default model tasks - Description = "Incorporate feedback into functional specifications", +* **Define the View Model:** Create a view model class to set values for the properties listed in the [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) instance. Each [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) instance represents a card in the Kanban control. +* **Bind item source for Kanban:** To populate the kanban card items, utilize the [`ItemsSource`]() property of [`SfKanban`](https://help.syncfusion.com/cr/wpf/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/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html#Syncfusion_UI_Xaml_Kanban_KanbanModel_Category) in the [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) class from the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/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/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) property to `false` and adding [`KanbanColumn`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html) instances to the [`Columns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) property of [`SfKanban`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html). You can define the column categories using the [`Categories`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html#Syncfusion_UI_Xaml_Kanban_KanbanColumn_Categories) property of [`KanbanColumn`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html), and the cards will be added to their respective columns. - Category = "Open", +The following sample code demonstrates this process in action: - ColorKey = "Low", - - Tags = new string[] { "Deployment" }, - - ImageURL = new Uri("/images/icon.jpg", UriKind.RelativeOrAbsolute ) - }); - - - Tasks.Add(new KanbanModel() - { - - Title = "Universal App", - - ID = "29477", - - Description = "Design functional specifications", - - Category = "In Progress", +{% tabs %} - ColorKey = "Normal", +{% highlight XAML %} + + + + + + + + + + + + + + + + + - Tags = new string[] { "Design" }, +{% endhighlight %} - ImageURL = new Uri("/images/icon.jpg", UriKind.RelativeOrAbsolute ) - }); +{% highlight C# %} +SfKanban kanban = new SfKanban() +{ + AutoGenerateColumns = false, + ItemsSource = new TaskDetails().Tasks +}; - Tasks.Add(new KanbanModel() - { - Title = "Universal App", +kanban.Columns.Add(new KanbanColumn() +{ + Categories = "Open", + Title = "To Do", + MinimumLimit = 1, + MaximumLimit = 2, +}); - ID = "25678", +kanban.Columns.Add(new KanbanColumn() +{ + Categories = "In Progress", + Title = "Progress", + MinimumLimit = 1, + MaximumLimit = 2 +}); - Description = "Review preliminary software specifications", +kanban.Columns.Add(new KanbanColumn() +{ + Categories = "Review,Done", + Title = "Done", + MinimumLimit = 1, + MaximumLimit = 2 +}); - Category = "Done", +this.grid.Children.Add(kanban); - ColorKey = "Low", +{% endhighlight %} - Tags = new string[] { "Analysis" }, +{% highlight C# tabtitle="KanbanViewModel" %} - ImageURL = new Uri("/images/icon.jpg", UriKind.RelativeOrAbsolute ) - }); +using Syncfusion.UI.Xaml.Kanban; +public class KanbanViewModel +{ + public ObservableCollection Tasks { get; set; } + public KanbanViewModel() + { - Tasks.Add(new KanbanModel() - { - Title = "Universal App", + Tasks = new ObservableCollection(); - ID = "6593", + Tasks.Add(new KanbanModel() + { + Title = "Universal App", + ID = "27654", + Description = "Incorporate feedback into functional specifications", + Category = "Open", + ColorKey = "Low", + Tags = new string[] { "Deployment" }, + ImageURL = new Uri("/images/People_Circle1.png", UriKind.RelativeOrAbsolute) + }); - Description = "Draft preliminary software specifications", - Category = "Review", + Tasks.Add(new KanbanModel() + { + Title = "Universal App", + ID = "29477", + Description = "Design functional specifications", + Category = "In Progress", + ColorKey = "Normal", + Tags = new string[] { "Design" }, + ImageURL = new Uri("/images/People_Circle2.png", UriKind.RelativeOrAbsolute) + }); - ColorKey = "High", - Tags = new string[] { "Analysis" }, + Tasks.Add(new KanbanModel() + { + Title = "Universal App", + ID = "25678", + Description = "Review preliminary software specifications", + Category = "Done", + ColorKey = "Low", + Tags = new string[] { "Analysis" }, + ImageURL = new Uri("/images/People_Circle3.png", UriKind.RelativeOrAbsolute) + }); - ImageURL = new Uri("/images/icon.jpg", UriKind.RelativeOrAbsolute ) - }); - } - public ObservableCollection Tasks { get; set; } + Tasks.Add(new KanbanModel() + { + Title = "Universal App", + ID = "6593", + Description = "Draft preliminary software specifications", + Category = "Review", + ColorKey = "High", + Tags = new string[] { "Analysis" }, + ImageURL = new Uri("/images/People_Circle4.png", UriKind.RelativeOrAbsolute) + }); } +} {% endhighlight %} -#### Binding data - -In order to bind the data source of the SfKanban, set ItemsSource property as shown below. - -{% tabs %} - -{% highlight xaml %} - - - -{% endhighlight %} - -{% highlight c# %} - -SfKanban kanban = new SfKanban() -{ - ItemsSource = new TaskDetails().Tasks -}; - -{% endhighlight %} - - {% endtabs %} -#### Defining columns +![Defining columns for SfKanban](sfkanban_images/wpf-kanban-board-column.png) -By default, we need to define the columns manually by adding the KanbanColumn object to the [`Columns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) collection property in SfKanban. +You can find the complete getting started sample from this [`link`](https://github.com/SyncfusionExamples/Getting-started-in-SfKanban-WPF). -ItemsSource which was bound to the Kanban will be added to the respective columns using ColumnMappingPath property in SfKanban and Categories property in KanbanColumn. +### Creating the custom model tasks with data mapping -We need to set the required property name to ColumnMappingPath which will be essential to add the data to the respective columns. +You can also map custom model data to our Kanban. Here are the steps to render tasks using the [WPF Kanban](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html) control with respective custom data properties. -In this example, the data whose Category property’s value is set as Open will be added to the ‘To Do’ Column and other data will be added to the respective columns. +* **Define the the Custom Model:** Create a custom class `TaskDetails` with mandatory fields `Subject`, `Details`, and `Status` similar to the [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) fields `Title`, `Description`, and `Category`. +* **Define the the Custom View Model:** Create a `ViewModel` class with a collection property to hold instances of your custom model. Each custom model instance should represent a card in the Kanban control, similar to the [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) instance provided by Syncfusion. +* **Bind the ViewModel:** Set the `ViewModel` instance as the `BindingContext` of your Page; this is done to bind properties of `ViewModel` to [`SfKanban`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html). +* **Bind Data to the Kanban Board:** Assign the custom data collection to the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource) property of [`SfKanban`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html). Specify the property in your custom model that represents the column field (such as "Status") by setting the [`ColumnMappingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ColumnMappingPath) property. +* **Defining columns in the Kanban Board:** The [`Columns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) are mapped based on the values of your specified column property (e.g., "Status") from the custom model, not [`Category`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html#Syncfusion_UI_Xaml_Kanban_KanbanModel_Category). You can allow columns to be generated automatically, or set [`AutoGenerateColumns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) to `false` and manually define columns using the required values from your custom data (for example, `Open`, `In Progress`, `Done`, etc.) in the [`Categories`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html#Syncfusion_UI_Xaml_Kanban_KanbanColumn_Categories) property. -The following code example illustrates how this can be done. +Let’s look at the practical code example: {% tabs %} -{% highlight xaml %} - - +{% highlight XAML %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - +{% endhighlight %} - +{% highlight C# %} - +this.kanban.AutoGenerateColumns = false; +this.kanban.ItemsSource = new KanbanViewModel().TaskDetails; +this.kanban.ColumnMappingPath="Status" +this.kanban.Columns.Add(new KanbanColumn() { Title = "To Do", Categories = "Open", "Postponed" }); +this.kanban.Columns.Add(new KanbanColumn() { Title = "In Progress", Categories = "In Progress" }); +this.kanban.Columns.Add(new KanbanColumn() { Title = "For Review", Categories = "Code Review" }); +this.kanban.Columns.Add(new KanbanColumn() { Title = "Done", Categories = "Closed", "Closed No Changes", "Won't Fix" }); {% endhighlight %} -{% highlight c# %} - -SfKanban kanban = new SfKanban() +{% highlight C# tabtitle="TaskDetails.cs" %} +public class TaskDetails : INotifyPropertyChanged { + private string subject; - AutoGenerateColumns = false, + private string details; - ItemsSource = new TaskDetails().Tasks + private object status; -}; + private string owner; -kanban.Columns.Add(new KanbanColumn() + public TaskDetails() + { + subject = string.Empty; + details = string.Empty; + status = string.Empty; + owner = string.Empty; + Avatar = new Image(); + PriorityColor = string.Empty; + ReferenceNumber = string.Empty; + Labels = new List(); + } -{ + public string Subject + { + get + { + return this.subject; + } - Categories = "Open", + set + { + this.subject = value; + this.NotifyPropertyChanged("Subject"); + } + } - Title = "To Do", + public string Details + { + get + { + return this.details; + } - MinimumLimit = 1, + set + { + this.details = value; + this.NotifyPropertyChanged("Details"); + } + } - MaximumLimit = 2, + public object Status + { + get + { + return this.status; + } -}); + set + { + this.status = value; + this.NotifyPropertyChanged("Status"); + } + } -kanban.Columns.Add(new KanbanColumn() + public string Owner + { + get + { + return this.owner; + } -{ + set + { + this.owner = value; + this.NotifyPropertyChanged("Owner"); + } + } - Categories = "In Progress", + public Image Avatar + { + get; set; + } - Title = "Progress", + public object PriorityColor + { + get; set; + } - MinimumLimit = 1, + public object ReferenceNumber + { + get; set; + } - MaximumLimit = 2 + public List Labels + { + get; set; + } -}); + public event PropertyChangedEventHandler? PropertyChanged; -kanban.Columns.Add(new KanbanColumn() + internal void NotifyPropertyChanged(string propertyName) + { + if (this.PropertyChanged != null) + { + this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); + } + } +} -{ +{% endhighlight %} - Categories = "Review,Done", +{% highlight C# tabtitle="KanbanViewModel.cs" %} - Title = "Done", +public class KanbanViewModel +{ + public ObservableCollection TaskDetails { get; set; } - MinimumLimit = 1, + public KanbanViewModel() + { + this.TaskDetails = this.GetTaskDetails(); + } - MaximumLimit = 2 + private ObservableCollection GetTaskDetails() + { + var taskDetails = new ObservableCollection(); + string path = @"ms-appx:///"; + + TaskDetails taskDetail = new TaskDetails(); + taskDetail.Subject = "UWP Issue"; + taskDetail.Details = "Sorting is not working properly in DateTimeAxis"; + taskDetail.Status = "Postponed"; + taskDetail.ReferenceNumber = "6593"; + taskDetail.PriorityColor = "High"; + taskDetail.Labels = new List() { "Bug Fixing" }; + taskDetail.Avatar = new Image + { + Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle1.png")) + }; + + taskDetails.Add(taskDetail); + + taskDetail = new TaskDetails(); + taskDetail.Subject = "WPF Issue"; + taskDetail.Details = "Crosshair label template not visible in UWP"; + taskDetail.Status = "Open"; + taskDetail.ReferenceNumber = "6593"; + taskDetail.PriorityColor = "High"; + taskDetail.Labels = new List() { "Bug GanttControl" }; + taskDetail.Avatar = new Image + { + Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle2.png")) + }; + + taskDetails.Add(taskDetail); + + taskDetail = new TaskDetails(); + taskDetail.Subject = "WinUI Issue"; + taskDetail.Details = "AxisLabel cropped when rotating the axis label"; + taskDetail.Status = "In Progress"; + taskDetail.ReferenceNumber = "6593"; + taskDetail.PriorityColor = "High"; + taskDetail.Labels = new List() { "Bug processing" }; + taskDetail.Avatar = new Image + { + Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle3.png")) + }; + + taskDetails.Add(taskDetail); + + taskDetail = new TaskDetails(); + taskDetail.Subject = "UWP Issue"; + taskDetail.ReferenceNumber = "651"; + taskDetail.Details = "Crosshair label template not visible in UWP"; + taskDetail.Status = "Open"; + taskDetail.PriorityColor = "High"; + taskDetail.Labels = new List() { "Bug Fixing" }; + taskDetail.Avatar = new Image + { + Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle4.png")) + }; + + taskDetails.Add(taskDetail); + + taskDetail = new TaskDetails(); + taskDetail.Subject = "Kanban Feature"; + taskDetail.ReferenceNumber = "25678"; + taskDetail.Details = "Provide drag and drop support"; + taskDetail.Status = "In Progress"; + taskDetail.PriorityColor = "Low"; + taskDetail.Labels = new List() { "New control" }; + taskDetail.Avatar = new Image + { + Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle5.png")) + }; + + taskDetails.Add(taskDetail); + + taskDetail = new TaskDetails(); + taskDetail.Subject = "WF Issue"; + taskDetail.ReferenceNumber = "1254"; + taskDetail.Details = "HorizontalAlignment for tooltip is not working"; + taskDetail.Status = "In Progress"; + taskDetail.PriorityColor = "High"; + taskDetail.Labels = new List() { "Bug fixing" }; + taskDetail.Avatar = new Image + { + Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle1.png")) + }; + + taskDetails.Add(taskDetail); + + taskDetail = new TaskDetails(); + taskDetail.Subject = "WPF Issue"; + taskDetail.ReferenceNumber = "28066"; + taskDetail.Details = "In minimized state, first and last segments have incorrect spacing"; + taskDetail.Status = "Code Review"; + taskDetail.PriorityColor = "Normal"; + taskDetail.Labels = new List() { "Bug Fixing" }; + taskDetail.Avatar = new Image + { + Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle2.png")) + }; + + taskDetails.Add(taskDetail); + + taskDetail = new TaskDetails(); + taskDetail.Subject = "WPF Issue"; + taskDetail.ReferenceNumber = "28066"; + taskDetail.Details = "In minimized state, first and last segments have incorrect spacing"; + taskDetail.Status = "Code Review"; + taskDetail.PriorityColor = "Normal"; + taskDetail.Labels = new List() { "Bug Fixing" }; + taskDetail.Avatar = new Image + { + Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle3.png")) + }; + + taskDetails.Add(taskDetail); + + taskDetail = new TaskDetails(); + taskDetail.Subject = "New Feature"; + taskDetail.ReferenceNumber = "29574"; + taskDetail.Details = "Dragging events support for Kanban"; + taskDetail.Status = "Closed"; + taskDetail.PriorityColor = "Normal"; + taskDetail.Labels = new List() { "New Control" }; + taskDetail.Avatar = new Image + { + Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle4.png")) + }; -}); + taskDetails.Add(taskDetail); -grid.Children.Add(kanban); + return taskDetails; + } +} {% endhighlight %} {% endtabs %} -![Defining columns for SfKanban](sfkanban_images/wpf-kanban-board-column.png) - - You can also set [`AutoGenerateColumns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) property to true in which you don’t need to define the columns as mentioned in the above example. This will create columns depending on the ColumnMappingPath property for all the distinct values in ItemsSource. -You can find the complete getting started sample from this [`link`](https://github.com/SyncfusionExamples/Getting-started-in-SfKanban-WPF). - N> When the columns are auto-generated, you can handle the ColumnsGenerated event to customize the columns. ## Theme From b11a19a8e776374e70fc753a5b89095d216dc328 Mon Sep 17 00:00:00 2001 From: Vishal Omprasad Date: Tue, 2 Sep 2025 14:11:06 +0530 Subject: [PATCH 02/10] 977013 - Kanban Getting-Started.md file review corrections addressed --- wpf/Kanban-Board/Getting-started.md | 453 +++++++--------------------- 1 file changed, 106 insertions(+), 347 deletions(-) diff --git a/wpf/Kanban-Board/Getting-started.md b/wpf/Kanban-Board/Getting-started.md index f92cb68bfe..7154f383d8 100644 --- a/wpf/Kanban-Board/Getting-started.md +++ b/wpf/Kanban-Board/Getting-started.md @@ -80,56 +80,46 @@ Now the Syncfusion.SfKanban.WPF reference is added to the application references ### Creating the default model tasks -* **Define the View Model:** Create a view model class to set values for the properties listed in the [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) instance. Each [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) instance represents a card in the Kanban control. -* **Bind item source for Kanban:** To populate the kanban card items, utilize the [`ItemsSource`]() property of [`SfKanban`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html). +* **Define the View Model:** + +Create a view model class to set values for the properties listed in the [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) class as shown in the following example code. Each [`KanbanModel`](https://help.syncfusion.com/cr/wpf/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/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource) property of [`SfKanban`](https://help.syncfusion.com/cr/wpf/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/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html#Syncfusion_UI_Xaml_Kanban_KanbanModel_Category) in the [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) class from the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/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/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) property to `false` and adding [`KanbanColumn`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html) instances to the [`Columns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) property of [`SfKanban`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html). You can define the column categories using the [`Categories`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html#Syncfusion_UI_Xaml_Kanban_KanbanColumn_Categories) property of [`KanbanColumn`](https://help.syncfusion.com/cr/wpf/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 %} - - - - - - - - - - - - - - - - - +{% highlight XAML hl_lines="3, 4, 5, 6, 7, 8, 91, 11, 12, 13" %} + + + + + + + + + + + {% endhighlight %} -{% highlight C# %} +{% highlight C# hl_lines="1, 3, 4, 7, 9, 10, 11, 12, 15, 17, 18, 19, 20, 23, 25, 26, 27, 28, 31"%} SfKanban kanban = new SfKanban() { AutoGenerateColumns = false, - ItemsSource = new TaskDetails().Tasks + ItemsSource = new KanbanViewModel().Tasks }; kanban.Columns.Add(new KanbanColumn() @@ -231,204 +221,76 @@ You can find the complete getting started sample from this [`link`](https://gith ### Creating the custom model tasks with data mapping -You can also map custom model data to our Kanban. Here are the steps to render tasks using the [WPF Kanban](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html) control with respective custom data properties. +You can also map custom data model to our Kanban control. The following steps demonstrate how to render tasks using the [WPF Kanban](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html) control with respective custom data properties. -* **Define the the Custom Model:** Create a custom class `TaskDetails` with mandatory fields `Subject`, `Details`, and `Status` similar to the [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) fields `Title`, `Description`, and `Category`. -* **Define the the Custom View Model:** Create a `ViewModel` class with a collection property to hold instances of your custom model. Each custom model instance should represent a card in the Kanban control, similar to the [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) instance provided by Syncfusion. -* **Bind the ViewModel:** Set the `ViewModel` instance as the `BindingContext` of your Page; this is done to bind properties of `ViewModel` to [`SfKanban`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html). -* **Bind Data to the Kanban Board:** Assign the custom data collection to the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource) property of [`SfKanban`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html). Specify the property in your custom model that represents the column field (such as "Status") by setting the [`ColumnMappingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ColumnMappingPath) property. -* **Defining columns in the Kanban Board:** The [`Columns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) are mapped based on the values of your specified column property (e.g., "Status") from the custom model, not [`Category`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html#Syncfusion_UI_Xaml_Kanban_KanbanModel_Category). You can allow columns to be generated automatically, or set [`AutoGenerateColumns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) to `false` and manually define columns using the required values from your custom data (for example, `Open`, `In Progress`, `Done`, etc.) in the [`Categories`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html#Syncfusion_UI_Xaml_Kanban_KanbanColumn_Categories) property. -Let’s look at the practical code example: +* **Create a data model for kanban:** Create a simple data model in a new class file as shown in the following example code. -{% tabs %} +* **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. -{% highlight XAML %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +* **Bind item source for Kanban:** -{% endhighlight %} - -{% highlight C# %} +To populate the Kanban card items, utilize the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource) property of [`SfKanban`](https://help.syncfusion.com/cr/wpf/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.AutoGenerateColumns = false; -this.kanban.ItemsSource = new KanbanViewModel().TaskDetails; -this.kanban.ColumnMappingPath="Status" +The [ColumnMappingPath](https://help.syncfusion.com/cr/wpf/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/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) is set to `true`. -this.kanban.Columns.Add(new KanbanColumn() { Title = "To Do", Categories = "Open", "Postponed" }); -this.kanban.Columns.Add(new KanbanColumn() { Title = "In Progress", Categories = "In Progress" }); -this.kanban.Columns.Add(new KanbanColumn() { Title = "For Review", Categories = "Code Review" }); -this.kanban.Columns.Add(new KanbanColumn() { Title = "Done", Categories = "Closed", "Closed No Changes", "Won't Fix" }); +* **Defining columns in the Kanban Board:** -{% endhighlight %} - -{% highlight C# tabtitle="TaskDetails.cs" %} +The [`Columns`](https://help.syncfusion.com/cr/wpf/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/wpf/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/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) is set to `true`. -public class TaskDetails : INotifyPropertyChanged -{ - private string subject; - - private string details; - - private object status; - - private string owner; - - public TaskDetails() - { - subject = string.Empty; - details = string.Empty; - status = string.Empty; - owner = string.Empty; - Avatar = new Image(); - PriorityColor = string.Empty; - ReferenceNumber = string.Empty; - Labels = new List(); - } - - public string Subject - { - get - { - return this.subject; - } +Alternatively, you can manually define columns by setting [`AutoGenerateColumns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) to `false` and adding instances of [`KanbanColumn`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html) to the [`Columns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) collection of the [`SfKanban`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html) control. Based on the property specified in [ColumnMappingPath](https://help.syncfusion.com/cr/wpf/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. - set - { - this.subject = value; - this.NotifyPropertyChanged("Subject"); - } - } - - public string Details - { - get - { - return this.details; - } - - set - { - this.details = value; - this.NotifyPropertyChanged("Details"); - } - } - - public object Status - { - get - { - return this.status; - } - - set - { - this.status = value; - this.NotifyPropertyChanged("Status"); - } - } +Let’s look at the practical code example: - public string Owner - { - get - { - return this.owner; - } +{% tabs %} - set - { - this.owner = value; - this.NotifyPropertyChanged("Owner"); - } - } +{% 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" %} + + + + + + + + + + + + + + + + + + + - public Image Avatar - { - get; set; - } +{% endhighlight %} - public object PriorityColor - { - get; set; - } +{% highlight C# hl_lines="1, 2" %} - public object ReferenceNumber - { - get; set; - } +this.kanban.ItemsSource = new KanbanViewModel().Tasks; +this.kanban.ColumnMappingPath = "Status"; - public List Labels - { - get; set; - } +{% endhighlight %} - public event PropertyChangedEventHandler? PropertyChanged; +{% highlight C# tabtitle="TaskDetails.cs" %} - internal void NotifyPropertyChanged(string propertyName) - { - if (this.PropertyChanged != null) - { - this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); - } - } +public class TaskDetails +{ + public string Title { get; set; } + public string Description { get; set; } + public object Status { get; set; } } {% endhighlight %} @@ -437,145 +299,42 @@ public class TaskDetails : INotifyPropertyChanged public class KanbanViewModel { - public ObservableCollection TaskDetails { get; set; } + public ObservableCollection Tasks { get; set; } public KanbanViewModel() { - this.TaskDetails = this.GetTaskDetails(); - } + Tasks = new ObservableCollection(); - private ObservableCollection GetTaskDetails() - { - var taskDetails = new ObservableCollection(); - string path = @"ms-appx:///"; - - TaskDetails taskDetail = new TaskDetails(); - taskDetail.Subject = "UWP Issue"; - taskDetail.Details = "Sorting is not working properly in DateTimeAxis"; - taskDetail.Status = "Postponed"; - taskDetail.ReferenceNumber = "6593"; - taskDetail.PriorityColor = "High"; - taskDetail.Labels = new List() { "Bug Fixing" }; - taskDetail.Avatar = new Image - { - Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle1.png")) - }; - - taskDetails.Add(taskDetail); - - taskDetail = new TaskDetails(); - taskDetail.Subject = "WPF Issue"; - taskDetail.Details = "Crosshair label template not visible in UWP"; - taskDetail.Status = "Open"; - taskDetail.ReferenceNumber = "6593"; - taskDetail.PriorityColor = "High"; - taskDetail.Labels = new List() { "Bug GanttControl" }; - taskDetail.Avatar = new Image - { - Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle2.png")) - }; - - taskDetails.Add(taskDetail); - - taskDetail = new TaskDetails(); - taskDetail.Subject = "WinUI Issue"; - taskDetail.Details = "AxisLabel cropped when rotating the axis label"; - taskDetail.Status = "In Progress"; - taskDetail.ReferenceNumber = "6593"; - taskDetail.PriorityColor = "High"; - taskDetail.Labels = new List() { "Bug processing" }; - taskDetail.Avatar = new Image - { - Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle3.png")) - }; - - taskDetails.Add(taskDetail); - - taskDetail = new TaskDetails(); - taskDetail.Subject = "UWP Issue"; - taskDetail.ReferenceNumber = "651"; - taskDetail.Details = "Crosshair label template not visible in UWP"; - taskDetail.Status = "Open"; - taskDetail.PriorityColor = "High"; - taskDetail.Labels = new List() { "Bug Fixing" }; - taskDetail.Avatar = new Image + Tasks.Add(new TaskDetails() { - Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle4.png")) - }; - - taskDetails.Add(taskDetail); - - taskDetail = new TaskDetails(); - taskDetail.Subject = "Kanban Feature"; - taskDetail.ReferenceNumber = "25678"; - taskDetail.Details = "Provide drag and drop support"; - taskDetail.Status = "In Progress"; - taskDetail.PriorityColor = "Low"; - taskDetail.Labels = new List() { "New control" }; - taskDetail.Avatar = new Image - { - Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle5.png")) - }; - - taskDetails.Add(taskDetail); - - taskDetail = new TaskDetails(); - taskDetail.Subject = "WF Issue"; - taskDetail.ReferenceNumber = "1254"; - taskDetail.Details = "HorizontalAlignment for tooltip is not working"; - taskDetail.Status = "In Progress"; - taskDetail.PriorityColor = "High"; - taskDetail.Labels = new List() { "Bug fixing" }; - taskDetail.Avatar = new Image - { - Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle1.png")) - }; - - taskDetails.Add(taskDetail); - - taskDetail = new TaskDetails(); - taskDetail.Subject = "WPF Issue"; - taskDetail.ReferenceNumber = "28066"; - taskDetail.Details = "In minimized state, first and last segments have incorrect spacing"; - taskDetail.Status = "Code Review"; - taskDetail.PriorityColor = "Normal"; - taskDetail.Labels = new List() { "Bug Fixing" }; - taskDetail.Avatar = new Image - { - Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle2.png")) - }; - - taskDetails.Add(taskDetail); - - taskDetail = new TaskDetails(); - taskDetail.Subject = "WPF Issue"; - taskDetail.ReferenceNumber = "28066"; - taskDetail.Details = "In minimized state, first and last segments have incorrect spacing"; - taskDetail.Status = "Code Review"; - taskDetail.PriorityColor = "Normal"; - taskDetail.Labels = new List() { "Bug Fixing" }; - taskDetail.Avatar = new Image + Title = "Universal App", + Description = "Incorporate feedback into functional specifications", + Status = "Open", + }); + + + Tasks.Add(new TaskDetails() { - Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle3.png")) - }; - - taskDetails.Add(taskDetail); - - taskDetail = new TaskDetails(); - taskDetail.Subject = "New Feature"; - taskDetail.ReferenceNumber = "29574"; - taskDetail.Details = "Dragging events support for Kanban"; - taskDetail.Status = "Closed"; - taskDetail.PriorityColor = "Normal"; - taskDetail.Labels = new List() { "New Control" }; - taskDetail.Avatar = new Image + Title = "Universal App", + Description = "Design functional specifications", + Status = "In Progress", + }); + + + Tasks.Add(new TaskDetails() { - Source = new BitmapImage(new Uri(path + "Assets/Kanban/People_Circle4.png")) - }; + Title = "Universal App", + Description = "Review preliminary software specifications", + Status = "Done", + }); - taskDetails.Add(taskDetail); - return taskDetails; + Tasks.Add(new TaskDetails() + { + Title = "Universal App", + Description = "Draft preliminary software specifications", + Status = "Review", + }); } } From 4b4313223aac1305a6d786fb13ac4c55169bae5d Mon Sep 17 00:00:00 2001 From: Vishal Omprasad Date: Tue, 2 Sep 2025 14:15:25 +0530 Subject: [PATCH 03/10] 977013 - Content added --- wpf/Kanban-Board/Getting-started.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/wpf/Kanban-Board/Getting-started.md b/wpf/Kanban-Board/Getting-started.md index 7154f383d8..dc7c645a29 100644 --- a/wpf/Kanban-Board/Getting-started.md +++ b/wpf/Kanban-Board/Getting-started.md @@ -78,6 +78,8 @@ Now the Syncfusion.SfKanban.WPF reference is added to the application references ## Populate WPF Kanban item source +This section explains how to populate the .NET MAUI Kanban control's `ItemSource` by creating and binding both default and custom task data models. + ### Creating the default model tasks * **Define the View Model:** From 83e1743df11e29909c77313e3a04c23666b54dbb Mon Sep 17 00:00:00 2001 From: Vishal Omprasad Date: Tue, 2 Sep 2025 14:25:43 +0530 Subject: [PATCH 04/10] 977013 - Kanban Getting-Started corrections addressed --- wpf/Kanban-Board/Getting-started.md | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/wpf/Kanban-Board/Getting-started.md b/wpf/Kanban-Board/Getting-started.md index dc7c645a29..3d519f8ad0 100644 --- a/wpf/Kanban-Board/Getting-started.md +++ b/wpf/Kanban-Board/Getting-started.md @@ -95,7 +95,6 @@ To populate the kanban card items, utilize the [`ItemsSource`](https://help.sync The following sample code demonstrates this process in action: {% tabs %} - {% highlight XAML hl_lines="3, 4, 5, 6, 7, 8, 91, 11, 12, 13" %} @@ -103,7 +102,7 @@ The following sample code demonstrates this process in action: ItemsSource="{Binding Tasks}" AutoGenerateColumns="False"> - + @@ -115,13 +114,12 @@ The following sample code demonstrates this process in action: {% endhighlight %} - {% highlight C# hl_lines="1, 3, 4, 7, 9, 10, 11, 12, 15, 17, 18, 19, 20, 23, 25, 26, 27, 28, 31"%} SfKanban kanban = new SfKanban() { AutoGenerateColumns = false, - ItemsSource = new KanbanViewModel().Tasks + ItemsSource = new ViewModel().Tasks }; kanban.Columns.Add(new KanbanColumn() @@ -151,15 +149,14 @@ kanban.Columns.Add(new KanbanColumn() this.grid.Children.Add(kanban); {% endhighlight %} - -{% highlight C# tabtitle="KanbanViewModel" %} +{% highlight C# tabtitle="ViewModel" %} using Syncfusion.UI.Xaml.Kanban; -public class KanbanViewModel +public class ViewModel { public ObservableCollection Tasks { get; set; } - public KanbanViewModel() + public ViewModel() { Tasks = new ObservableCollection(); @@ -214,7 +211,6 @@ public class KanbanViewModel } {% endhighlight %} - {% endtabs %} ![Defining columns for SfKanban](sfkanban_images/wpf-kanban-board-column.png) @@ -245,7 +241,6 @@ Alternatively, you can manually define columns by setting [`AutoGenerateColumns` Let’s look at the practical code example: {% tabs %} - {% 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" %} {% endhighlight %} - {% highlight C# hl_lines="1, 2" %} this.kanban.ItemsSource = new KanbanViewModel().Tasks; this.kanban.ColumnMappingPath = "Status"; {% endhighlight %} - {% highlight C# tabtitle="TaskDetails.cs" %} public class TaskDetails @@ -297,13 +290,13 @@ public class TaskDetails {% endhighlight %} -{% highlight C# tabtitle="KanbanViewModel.cs" %} +{% highlight C# tabtitle="ViewModel.cs" %} -public class KanbanViewModel +public class ViewModel { public ObservableCollection Tasks { get; set; } - public KanbanViewModel() + public ViewModel() { Tasks = new ObservableCollection(); @@ -341,7 +334,6 @@ public class KanbanViewModel } {% endhighlight %} - {% endtabs %} You can also set [`AutoGenerateColumns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) property to true in which you don’t need to define the columns as mentioned in the above example. This will create columns depending on the ColumnMappingPath property for all the distinct values in ItemsSource. From 30bd025bddc735bb2fbc9a7e2a2b036354a93f92 Mon Sep 17 00:00:00 2001 From: Vishal Omprasad Date: Tue, 2 Sep 2025 14:54:12 +0530 Subject: [PATCH 05/10] 977013 - Kanban Getting-Started CI issue resolved --- wpf/Kanban-Board/Getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wpf/Kanban-Board/Getting-started.md b/wpf/Kanban-Board/Getting-started.md index 3d519f8ad0..8c584b3345 100644 --- a/wpf/Kanban-Board/Getting-started.md +++ b/wpf/Kanban-Board/Getting-started.md @@ -114,7 +114,7 @@ The following sample code demonstrates this process in action: {% endhighlight %} -{% highlight C# hl_lines="1, 3, 4, 7, 9, 10, 11, 12, 15, 17, 18, 19, 20, 23, 25, 26, 27, 28, 31"%} +{% highlight C# hl_lines="1, 3, 4, 7, 9, 10, 11, 12, 15, 17, 18, 19, 20, 23, 25, 26, 27, 28, 31" %} SfKanban kanban = new SfKanban() { From 44444560a6a5582a89453dedec4c367394b3437e Mon Sep 17 00:00:00 2001 From: Vishal Omprasad Date: Tue, 2 Sep 2025 15:12:50 +0530 Subject: [PATCH 06/10] 977013 - Kanban view model name space added --- wpf/Kanban-Board/Getting-started.md | 1 + 1 file changed, 1 insertion(+) diff --git a/wpf/Kanban-Board/Getting-started.md b/wpf/Kanban-Board/Getting-started.md index 8c584b3345..ced18a5f73 100644 --- a/wpf/Kanban-Board/Getting-started.md +++ b/wpf/Kanban-Board/Getting-started.md @@ -152,6 +152,7 @@ this.grid.Children.Add(kanban); {% highlight C# tabtitle="ViewModel" %} using Syncfusion.UI.Xaml.Kanban; + public class ViewModel { public ObservableCollection Tasks { get; set; } From 4d349f328874bbbdb303e6f27b3aea49b3905e2a Mon Sep 17 00:00:00 2001 From: Vishal Omprasad Date: Tue, 2 Sep 2025 16:09:55 +0530 Subject: [PATCH 07/10] 977013 - Kanban UG review corrections addressed --- wpf/Kanban-Board/Getting-started.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/wpf/Kanban-Board/Getting-started.md b/wpf/Kanban-Board/Getting-started.md index ced18a5f73..98d70ef865 100644 --- a/wpf/Kanban-Board/Getting-started.md +++ b/wpf/Kanban-Board/Getting-started.md @@ -21,8 +21,9 @@ N> This window differs for the Visual Basic project. ## Create a simple Kanban -### Adding SfKanban +In this walkthrough, we will demonstrate how to create a new application that integrates the SfKanban control. +### Adding SfKanban 1. Add the required assembly references to the project as discussed in the Reference Essential Studio Components in your Solution section. 2. Add the “Syncfusion.UI.Xaml.Kanban” namespace to the application as shown below. @@ -78,7 +79,7 @@ Now the Syncfusion.SfKanban.WPF reference is added to the application references ## Populate WPF Kanban item source -This section explains how to populate the .NET MAUI Kanban control's `ItemSource` by creating and binding both default and custom task data models. +This section explains how to populate the WPF Kanban control's `ItemSource` by creating and binding both default and custom task data models. ### Creating the default model tasks @@ -173,7 +174,6 @@ public class ViewModel ImageURL = new Uri("/images/People_Circle1.png", UriKind.RelativeOrAbsolute) }); - Tasks.Add(new KanbanModel() { Title = "Universal App", @@ -185,7 +185,6 @@ public class ViewModel ImageURL = new Uri("/images/People_Circle2.png", UriKind.RelativeOrAbsolute) }); - Tasks.Add(new KanbanModel() { Title = "Universal App", @@ -197,7 +196,6 @@ public class ViewModel ImageURL = new Uri("/images/People_Circle3.png", UriKind.RelativeOrAbsolute) }); - Tasks.Add(new KanbanModel() { Title = "Universal App", From 89806271315713caa358acba499fe85d99c07e94 Mon Sep 17 00:00:00 2001 From: Vishal Omprasad Date: Tue, 2 Sep 2025 16:24:27 +0530 Subject: [PATCH 08/10] 977013 - Kanban Getting Started UG default model output image removed --- wpf/Kanban-Board/Getting-started.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/wpf/Kanban-Board/Getting-started.md b/wpf/Kanban-Board/Getting-started.md index 98d70ef865..329fe66be7 100644 --- a/wpf/Kanban-Board/Getting-started.md +++ b/wpf/Kanban-Board/Getting-started.md @@ -212,9 +212,7 @@ public class ViewModel {% endhighlight %} {% endtabs %} -![Defining columns for SfKanban](sfkanban_images/wpf-kanban-board-column.png) - -You can find the complete getting started sample from this [`link`](https://github.com/SyncfusionExamples/Getting-started-in-SfKanban-WPF). +View the sample in [`GitHub`](https://github.com/SyncfusionExamples/Getting-started-in-SfKanban-WPF). ### Creating the custom model tasks with data mapping From 85eee4be508522aefac524db4cbe4085e403f52d Mon Sep 17 00:00:00 2001 From: Vishal Omprasad Date: Tue, 2 Sep 2025 16:32:05 +0530 Subject: [PATCH 09/10] 977013 - Kanban UG, empty lines removed --- wpf/Kanban-Board/Getting-started.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/wpf/Kanban-Board/Getting-started.md b/wpf/Kanban-Board/Getting-started.md index 329fe66be7..0bc75c8eb2 100644 --- a/wpf/Kanban-Board/Getting-started.md +++ b/wpf/Kanban-Board/Getting-started.md @@ -160,7 +160,6 @@ public class ViewModel public ViewModel() { - Tasks = new ObservableCollection(); Tasks.Add(new KanbanModel() @@ -304,7 +303,6 @@ public class ViewModel Status = "Open", }); - Tasks.Add(new TaskDetails() { Title = "Universal App", @@ -312,7 +310,6 @@ public class ViewModel Status = "In Progress", }); - Tasks.Add(new TaskDetails() { Title = "Universal App", @@ -320,7 +317,6 @@ public class ViewModel Status = "Done", }); - Tasks.Add(new TaskDetails() { Title = "Universal App", From 5dac1a8c1daa86f55fc8dcf20e387087928a7c33 Mon Sep 17 00:00:00 2001 From: Karthick M Date: Wed, 3 Sep 2025 07:56:51 +0530 Subject: [PATCH 10/10] Updated review correction --- wpf/Kanban-Board/Getting-started.md | 43 +++++++++-------------------- 1 file changed, 13 insertions(+), 30 deletions(-) diff --git a/wpf/Kanban-Board/Getting-started.md b/wpf/Kanban-Board/Getting-started.md index 0bc75c8eb2..3df898eb5e 100644 --- a/wpf/Kanban-Board/Getting-started.md +++ b/wpf/Kanban-Board/Getting-started.md @@ -19,9 +19,9 @@ The following section provides an assistance to create a simple Kanban applicati N> This window differs for the Visual Basic project. -## Create a simple Kanban +## Create a simple Kanban Board -In this walkthrough, we will demonstrate how to create a new application that integrates the SfKanban control. +In this section, we'll demonstrate how to build a new WPF application that integrates the `SfKanban` control. ### Adding SfKanban @@ -69,19 +69,17 @@ Drag and drop the Kanban control from the toolbox to your application. ![Adding SfKanban from toolbox](sfkanban_images/wpf-kanban-board-toolbox.png) - Now the Syncfusion.SfKanban.WPF reference is added to the application references and the xmlns namespace code is generated in MainWindow.xaml as below. ![Adding SfKanban from toolbox Assembly Included](sfkanban_images/wpf-kanban-board-assembly-included.png) - ![Adding SfKanban from toolbox Xaml Reference](sfkanban_images/wpf-kanban-board-xaml-reference.png) -## Populate WPF Kanban item source +### Populate WPF Kanban item source This section explains how to populate the WPF Kanban control's `ItemSource` by creating and binding both default and custom task data models. -### Creating the default model tasks +#### Creating the default model tasks * **Define the View Model:** @@ -106,11 +104,11 @@ The following sample code demonstrates this process in action: + Title="To Do"/> + Title="Progress"/> + Title="Done"/> @@ -126,25 +124,19 @@ SfKanban kanban = new SfKanban() kanban.Columns.Add(new KanbanColumn() { Categories = "Open", - Title = "To Do", - MinimumLimit = 1, - MaximumLimit = 2, + Title = "To Do" }); kanban.Columns.Add(new KanbanColumn() { Categories = "In Progress", - Title = "Progress", - MinimumLimit = 1, - MaximumLimit = 2 + Title = "Progress" }); kanban.Columns.Add(new KanbanColumn() { Categories = "Review,Done", - Title = "Done", - MinimumLimit = 1, - MaximumLimit = 2 + Title = "Done" }); this.grid.Children.Add(kanban); @@ -157,11 +149,9 @@ using Syncfusion.UI.Xaml.Kanban; public class ViewModel { public ObservableCollection Tasks { get; set; } - public ViewModel() { Tasks = new ObservableCollection(); - Tasks.Add(new KanbanModel() { Title = "Universal App", @@ -170,7 +160,6 @@ public class ViewModel Category = "Open", ColorKey = "Low", Tags = new string[] { "Deployment" }, - ImageURL = new Uri("/images/People_Circle1.png", UriKind.RelativeOrAbsolute) }); Tasks.Add(new KanbanModel() @@ -181,7 +170,6 @@ public class ViewModel Category = "In Progress", ColorKey = "Normal", Tags = new string[] { "Design" }, - ImageURL = new Uri("/images/People_Circle2.png", UriKind.RelativeOrAbsolute) }); Tasks.Add(new KanbanModel() @@ -192,7 +180,6 @@ public class ViewModel Category = "Done", ColorKey = "Low", Tags = new string[] { "Analysis" }, - ImageURL = new Uri("/images/People_Circle3.png", UriKind.RelativeOrAbsolute) }); Tasks.Add(new KanbanModel() @@ -203,7 +190,6 @@ public class ViewModel Category = "Review", ColorKey = "High", Tags = new string[] { "Analysis" }, - ImageURL = new Uri("/images/People_Circle4.png", UriKind.RelativeOrAbsolute) }); } } @@ -213,11 +199,10 @@ public class ViewModel View the sample in [`GitHub`](https://github.com/SyncfusionExamples/Getting-started-in-SfKanban-WPF). -### Creating the custom model tasks with data mapping +#### Creating the custom model tasks with data mapping You can also map custom data model to our Kanban control. The following steps demonstrate how to render tasks using the [WPF Kanban](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html) control with respective custom data properties. - * **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. @@ -243,7 +228,7 @@ Let’s look at the practical code example: ColumnMappingPath="Status" ItemsSource="{Binding Tasks}"> - + @@ -271,7 +256,7 @@ Let’s look at the practical code example: {% endhighlight %} {% highlight C# hl_lines="1, 2" %} -this.kanban.ItemsSource = new KanbanViewModel().Tasks; +this.kanban.ItemsSource = new ViewModel().Tasks; this.kanban.ColumnMappingPath = "Status"; {% endhighlight %} @@ -291,11 +276,9 @@ public class TaskDetails public class ViewModel { public ObservableCollection Tasks { get; set; } - public ViewModel() { Tasks = new ObservableCollection(); - Tasks.Add(new TaskDetails() { Title = "Universal App",