diff --git a/wpf/Kanban-Board/Cards.md b/wpf/Kanban-Board/Cards.md index 4a6b55303..a1de2356c 100644 --- a/wpf/Kanban-Board/Cards.md +++ b/wpf/Kanban-Board/Cards.md @@ -184,4 +184,220 @@ You can replace the entire card template with your own design using [`SfKanban.C {% endhighlight %} -![Template support for cards in WPF SfKanban](SfKanban_images/CardTemplate.png) \ No newline at end of file +![Template support for cards in WPF SfKanban](SfKanban_images/CardTemplate.png) + +## Cards tooltip + +An interactive tooltip provides additional details about the cards on hovering the mouse over them. + +### Enable tooltip for cards + +To enable tooltip for the kanban cards, use `IsToolTipEnabled` property of [SfKanban](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html). By default, `IsToolTipEnabled` is set to `false.` To provide users with additional information or context about cards, simply set this property to `true.` + +{% tabs %} +{% highlight XAML hl_lines="2" %} + + + + + + + +{% endhighlight %} +{% highlight C# %} + +this.kanban.IsToolTipEnabled = true; + +{% endhighlight %} +{% highlight C# tabtitle="ViewModel.cs" %} + +public class ViewModel +{ + /// + /// Gets or sets the collection of objects representing tasks in various stages. + /// + public ObservableCollection Tasks { get; set; } + + /// + /// Initializes a new instance of the class. + /// + public ViewModel() + { + Tasks = new ObservableCollection(); + + KanbanModel task = new KanbanModel(); + task.Title = "UWP Issue"; + task.Description = "Sorting is not working properly in DateTimeAxis"; + task.Category = "Open"; + task.Tags = new string[] { "Bug Fixing" }; + Tasks.Add(task); + + task = new KanbanModel(); + task.Title = "New Feature"; + task.Description = "Need to create code base for Gantt control"; + task.Category = "Open"; + task.Tags = new string[] { "GanttControl UWP" }; + Tasks.Add(task); + + task = new KanbanModel(); + task.Title = "UG"; + task.Description = "Need to do post processing work for closed incidents"; + task.Category = "In Progress"; + task.Tags = new string[] { "Post processing" }; + Tasks.Add(task); + + task = new KanbanModel(); + task.Title = "UWP Issue"; + task.Description = "Crosshair label template not visible in UWP."; + task.Category = "In Progress"; + task.Tags = new string[] { "Bug Fixing" }; + Tasks.Add(task); + + task = new KanbanModel(); + task.Title = "WPF Issue"; + task.Description = "Need to implement tooltip support for histogram series."; + task.Category = "Closed"; + task.Tags = new string[] { "Bug Fixing" }; + Tasks.Add(task); + + task = new KanbanModel(); + task.Title = "WF Issue"; + task.Description = "HorizontalAlignment for tooltip is not working"; + task.Category = "Closed"; + task.Tags = new string[] { "Bug fixing" }; + Tasks.Add(task); + } +} + +{% endhighlight %} +{% endtabs %} + +### Customize tooltip appearance + +You can customize the tooltip appearance by using the `ToolTipTemplate` property in the [SfKanban](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html). + +The following code example shows the usage of DataTemplate. + +{% tabs %} +{% highlight XAML hl_lines="2" %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# tabtitle="ViewModel.cs" %} + +public class ViewModel +{ + /// + /// Gets or sets the collection of objects representing tasks in various stages. + /// + public ObservableCollection Tasks { get; set; } + + /// + /// Initializes a new instance of the class. + /// + public ViewModel() + { + Tasks = new ObservableCollection(); + + KanbanModel task = new KanbanModel(); + task.Title = "UWP Issue"; + task.Description = "Sorting is not working properly in DateTimeAxis"; + task.Category = "Open"; + task.ColorKey = "#FF5187C6"; + task.Tags = new string[] { "Bug Fixing" }; + Tasks.Add(task); + + task = new KanbanModel(); + task.Title = "New Feature"; + task.Description = "Need to create code base for Gantt control"; + task.Category = "Open"; + task.ColorKey = "#FF57B94C"; + task.Tags = new string[] { "GanttControl UWP" }; + Tasks.Add(task); + + task = new KanbanModel(); + task.Title = "UG"; + task.Description = "Need to do post processing work for closed incidents"; + task.Category = "In Progress"; + task.ColorKey = "#FF57B94C"; + task.Tags = new string[] { "Post processing" }; + Tasks.Add(task); + + task = new KanbanModel(); + task.Title = "UWP Issue"; + task.Description = "Crosshair label template not visible in UWP."; + task.Category = "In Progress"; + task.ColorKey = "#FFECB93C"; + task.Tags = new string[] { "Bug Fixing" }; + Tasks.Add(task); + + task = new KanbanModel(); + task.Title = "WPF Issue"; + task.Description = "Need to implement tooltip support for histogram series."; + task.Category = "Closed"; + task.ColorKey = "#FF5187C6"; + task.Tags = new string[] { "Bug Fixing" }; + Tasks.Add(task); + + task = new KanbanModel(); + task.Title = "WF Issue"; + task.Description = "HorizontalAlignment for tooltip is not working"; + task.Category = "Closed"; + task.ColorKey = "#FFECB93C"; + task.Tags = new string[] { "Bug fixing" }; + Tasks.Add(task); + } +} + +{% endhighlight %} +{% endtabs %} + +N> +* This property will only be applicable when `IsToolTipEnabled` is set to `true.`