Skip to content

Commit 5d38733

Browse files
Karthickmani97Karthickmani97
authored
Merge pull request #2034 from syncfusion-content/997111-Kanban-Tooltip-support
997111 - Added UG content for Kanban Tooltip support
2 parents 29a1890 + a3b6609 commit 5d38733

File tree

1 file changed

+217
-1
lines changed

1 file changed

+217
-1
lines changed

‎wpf/Kanban-Board/Cards.md‎

Lines changed: 217 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,4 +184,220 @@ You can replace the entire card template with your own design using [`SfKanban.C
184184
{% endhighlight %}
185185

186186

187-
![Template support for cards in WPF SfKanban](SfKanban_images/CardTemplate.png)
187+
![Template support for cards in WPF SfKanban](SfKanban_images/CardTemplate.png)
188+
189+
## Cards tooltip
190+
191+
An interactive tooltip provides additional details about the cards on hovering the mouse over them.
192+
193+
### Enable tooltip for cards
194+
195+
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.`
196+
197+
{% tabs %}
198+
{% highlight XAML hl_lines="2" %}
199+
200+
<kanban:SfKanban x:Name="kanban"
201+
IsToolTipEnabled="True"
202+
ItemsSource="{Binding Tasks}">
203+
<kanban:SfKanban.DataContext>
204+
<local:ViewModel/>
205+
</kanban:SfKanban.DataContext>
206+
</kanban:SfKanban>
207+
208+
{% endhighlight %}
209+
{% highlight C# %}
210+
211+
this.kanban.IsToolTipEnabled = true;
212+
213+
{% endhighlight %}
214+
{% highlight C# tabtitle="ViewModel.cs" %}
215+
216+
public class ViewModel
217+
{
218+
/// <summary>
219+
/// Gets or sets the collection of <see cref="KanbanModel"/> objects representing tasks in various stages.
220+
/// </summary>
221+
public ObservableCollection<KanbanModel> Tasks { get; set; }
222+
223+
/// <summary>
224+
/// Initializes a new instance of the <see cref="ViewModel"/> class.
225+
/// </summary>
226+
public ViewModel()
227+
{
228+
Tasks = new ObservableCollection<KanbanModel>();
229+
230+
KanbanModel task = new KanbanModel();
231+
task.Title = "UWP Issue";
232+
task.Description = "Sorting is not working properly in DateTimeAxis";
233+
task.Category = "Open";
234+
task.Tags = new string[] { "Bug Fixing" };
235+
Tasks.Add(task);
236+
237+
task = new KanbanModel();
238+
task.Title = "New Feature";
239+
task.Description = "Need to create code base for Gantt control";
240+
task.Category = "Open";
241+
task.Tags = new string[] { "GanttControl UWP" };
242+
Tasks.Add(task);
243+
244+
task = new KanbanModel();
245+
task.Title = "UG";
246+
task.Description = "Need to do post processing work for closed incidents";
247+
task.Category = "In Progress";
248+
task.Tags = new string[] { "Post processing" };
249+
Tasks.Add(task);
250+
251+
task = new KanbanModel();
252+
task.Title = "UWP Issue";
253+
task.Description = "Crosshair label template not visible in UWP.";
254+
task.Category = "In Progress";
255+
task.Tags = new string[] { "Bug Fixing" };
256+
Tasks.Add(task);
257+
258+
task = new KanbanModel();
259+
task.Title = "WPF Issue";
260+
task.Description = "Need to implement tooltip support for histogram series.";
261+
task.Category = "Closed";
262+
task.Tags = new string[] { "Bug Fixing" };
263+
Tasks.Add(task);
264+
265+
task = new KanbanModel();
266+
task.Title = "WF Issue";
267+
task.Description = "HorizontalAlignment for tooltip is not working";
268+
task.Category = "Closed";
269+
task.Tags = new string[] { "Bug fixing" };
270+
Tasks.Add(task);
271+
}
272+
}
273+
274+
{% endhighlight %}
275+
{% endtabs %}
276+
277+
### Customize tooltip appearance
278+
279+
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).
280+
281+
The following code example shows the usage of DataTemplate.
282+
283+
{% tabs %}
284+
{% highlight XAML hl_lines="2" %}
285+
286+
<kanban:SfKanban x:Name="kanban"
287+
IsToolTipEnabled="True"
288+
ItemsSource="{Binding Tasks}">
289+
<kanban:SfKanban.ToolTipTemplate>
290+
<DataTemplate>
291+
<Border CornerRadius="4" Padding="10" Background="Black">
292+
<Grid>
293+
<Grid.ColumnDefinitions>
294+
<ColumnDefinition Width="Auto" />
295+
<ColumnDefinition Width="*" />
296+
</Grid.ColumnDefinitions>
297+
<Rectangle Fill="{Binding ColorKey}" Grid.Column="0" VerticalAlignment="Stretch"
298+
HorizontalAlignment="Left" Width="8" Margin="0,0,5,0" />
299+
<Grid Grid.Column="1">
300+
<Grid.ColumnDefinitions>
301+
<ColumnDefinition Width="5*"/>
302+
<ColumnDefinition Width="5*"/>
303+
</Grid.ColumnDefinitions>
304+
<Grid.RowDefinitions >
305+
<RowDefinition Height="3.5*"/>
306+
<RowDefinition Height="3.5*"/>
307+
<RowDefinition Height="3*"/>
308+
</Grid.RowDefinitions>
309+
<TextBlock Text="Title : " FontSize="10.5" Grid.Row="0" Grid.Column="0"
310+
Margin="0,0,0,8" Foreground="White" />
311+
<TextBlock Text="{Binding Title}" Grid.Row="0" Grid.Column="1"
312+
FontSize="10.5" Margin="5,0,0,8" Foreground="White" />
313+
<TextBlock Text="Status : " Margin="0,0,0,8" Grid.Row="1" Grid.Column="0"
314+
FontSize="10.5" Foreground="White" />
315+
<TextBlock Text="{Binding Category}" Grid.Row="1" Grid.Column="1"
316+
FontSize="10.5" Margin="5,0,0,8" Foreground="White" />
317+
<TextBlock Text="Description : " Grid.Row="2" Grid.Column="0"
318+
FontSize="10.5" Foreground="White" />
319+
<TextBlock Text="{Binding Description}" Margin="5,0,0,0" Width="150"
320+
TextWrapping="Wrap" TextTrimming="CharacterEllipsis"
321+
FontSize="10.5" Grid.Row="2" Grid.Column="1" Foreground="White" />
322+
</Grid>
323+
</Grid>
324+
</Border>
325+
</DataTemplate>
326+
</kanban:SfKanban.ToolTipTemplate>
327+
<kanban:SfKanban.DataContext>
328+
<local:ViewModel/>
329+
</kanban:SfKanban.DataContext>
330+
</kanban:SfKanban>
331+
332+
{% endhighlight %}
333+
{% highlight C# tabtitle="ViewModel.cs" %}
334+
335+
public class ViewModel
336+
{
337+
/// <summary>
338+
/// Gets or sets the collection of <see cref="KanbanModel"/> objects representing tasks in various stages.
339+
/// </summary>
340+
public ObservableCollection<KanbanModel> Tasks { get; set; }
341+
342+
/// <summary>
343+
/// Initializes a new instance of the <see cref="ViewModel"/> class.
344+
/// </summary>
345+
public ViewModel()
346+
{
347+
Tasks = new ObservableCollection<KanbanModel>();
348+
349+
KanbanModel task = new KanbanModel();
350+
task.Title = "UWP Issue";
351+
task.Description = "Sorting is not working properly in DateTimeAxis";
352+
task.Category = "Open";
353+
task.ColorKey = "#FF5187C6";
354+
task.Tags = new string[] { "Bug Fixing" };
355+
Tasks.Add(task);
356+
357+
task = new KanbanModel();
358+
task.Title = "New Feature";
359+
task.Description = "Need to create code base for Gantt control";
360+
task.Category = "Open";
361+
task.ColorKey = "#FF57B94C";
362+
task.Tags = new string[] { "GanttControl UWP" };
363+
Tasks.Add(task);
364+
365+
task = new KanbanModel();
366+
task.Title = "UG";
367+
task.Description = "Need to do post processing work for closed incidents";
368+
task.Category = "In Progress";
369+
task.ColorKey = "#FF57B94C";
370+
task.Tags = new string[] { "Post processing" };
371+
Tasks.Add(task);
372+
373+
task = new KanbanModel();
374+
task.Title = "UWP Issue";
375+
task.Description = "Crosshair label template not visible in UWP.";
376+
task.Category = "In Progress";
377+
task.ColorKey = "#FFECB93C";
378+
task.Tags = new string[] { "Bug Fixing" };
379+
Tasks.Add(task);
380+
381+
task = new KanbanModel();
382+
task.Title = "WPF Issue";
383+
task.Description = "Need to implement tooltip support for histogram series.";
384+
task.Category = "Closed";
385+
task.ColorKey = "#FF5187C6";
386+
task.Tags = new string[] { "Bug Fixing" };
387+
Tasks.Add(task);
388+
389+
task = new KanbanModel();
390+
task.Title = "WF Issue";
391+
task.Description = "HorizontalAlignment for tooltip is not working";
392+
task.Category = "Closed";
393+
task.ColorKey = "#FFECB93C";
394+
task.Tags = new string[] { "Bug fixing" };
395+
Tasks.Add(task);
396+
}
397+
}
398+
399+
{% endhighlight %}
400+
{% endtabs %}
401+
402+
N>
403+
* This property will only be applicable when `IsToolTipEnabled` is set to `true.`

0 commit comments

Comments
 (0)