Skip to content

Commit e9ac2f7

Browse files
aarthisf3966aarthisf3966
committed
997111 - Added UG content for Kanban Tooltip support
1 parent ddf354a commit e9ac2f7

File tree

1 file changed

+229
-1
lines changed

1 file changed

+229
-1
lines changed

‎wpf/Kanban-Board/Cards.md‎

Lines changed: 229 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,4 +184,232 @@ 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 the `IsToolTipEnabled` property of [SfKanban](https://help.syncfusion.com/cr/winui/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 %}
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+
task.ImageURL = new Uri(@"D:\Win\WPFToolTipKanban\WPFToolTipKanban\Assets\People\People_Circle1.png", UriKind.RelativeOrAbsolute);
236+
Tasks.Add(task);
237+
238+
task = new KanbanModel();
239+
task.Title = "New Feature";
240+
task.Description = "Need to create code base for Gantt control";
241+
task.Category = "Open";
242+
task.Tags = new string[] { "GanttControl UWP" };
243+
task.ImageURL = new Uri("/Assets/People/People_Circle2.png", UriKind.RelativeOrAbsolute);
244+
Tasks.Add(task);
245+
246+
task = new KanbanModel();
247+
task.Title = "UG";
248+
task.Description = "Need to do post processing work for closed incidents";
249+
task.Category = "In Progress";
250+
task.Tags = new string[] { "Post processing" };
251+
task.ImageURL = new Uri("/Assets/People/People_Circle3.png", UriKind.RelativeOrAbsolute);
252+
Tasks.Add(task);
253+
254+
task = new KanbanModel();
255+
task.Title = "UWP Issue";
256+
task.Description = "Crosshair label template not visible in UWP.";
257+
task.Category = "In Progress";
258+
task.Tags = new string[] { "Bug Fixing" };
259+
task.ImageURL = new Uri("/Assets/People/People_Circle4.png", UriKind.RelativeOrAbsolute);
260+
Tasks.Add(task);
261+
262+
task = new KanbanModel();
263+
task.Title = "WPF Issue";
264+
task.Description = "Need to implement tooltip support for histogram series.";
265+
task.Category = "Closed";
266+
task.Tags = new string[] { "Bug Fixing" };
267+
task.ImageURL = new Uri("/Assets/People/People\People_Circle6.png", UriKind.RelativeOrAbsolute);
268+
Tasks.Add(task);
269+
270+
task = new KanbanModel();
271+
task.Title = "WF Issue";
272+
task.Description = "HorizontalAlignment for tooltip is not working";
273+
task.Category = "Closed";
274+
task.Tags = new string[] { "Bug fixing" };
275+
task.ImageURL = new Uri("/Assets/People/People_Circle8.png", UriKind.RelativeOrAbsolute);
276+
Tasks.Add(task);
277+
}
278+
}
279+
280+
{% endhighlight %}
281+
{% endtabs %}
282+
283+
### Customize tooltip appearance
284+
285+
You can customize the tooltip appearance by using the `ToolTipTemplate` property in the [SfKanban](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Kanban.SfKanban.html).
286+
287+
The following code example shows the usage of DataTemplate.
288+
289+
{% tabs %}
290+
{% highlight xaml %}
291+
292+
<kanban:SfKanban x:Name="kanban"
293+
IsToolTipEnabled="True"
294+
ItemsSource="{Binding Tasks}">
295+
<kanban:SfKanban.ToolTipTemplate>
296+
<DataTemplate>
297+
<Border CornerRadius="4" Padding="10" Background="Black">
298+
<Grid>
299+
<Grid.ColumnDefinitions>
300+
<ColumnDefinition Width="Auto" />
301+
<ColumnDefinition Width="*" />
302+
</Grid.ColumnDefinitions>
303+
<Rectangle Fill="{Binding ColorKey}" Grid.Column="0" VerticalAlignment="Stretch"
304+
HorizontalAlignment="Left" Width="8" Margin="0,0,5,0" />
305+
<Grid Grid.Column="1">
306+
<Grid.ColumnDefinitions>
307+
<ColumnDefinition Width="5*"/>
308+
<ColumnDefinition Width="5*"/>
309+
</Grid.ColumnDefinitions>
310+
<Grid.RowDefinitions >
311+
<RowDefinition Height="3.5*"/>
312+
<RowDefinition Height="3.5*"/>
313+
<RowDefinition Height="3*"/>
314+
</Grid.RowDefinitions>
315+
<TextBlock Text="Title : " FontSize="10.5" Grid.Row="0" Grid.Column="0"
316+
Margin="0,0,0,8" Foreground="White" />
317+
<TextBlock Text="{Binding Title}" Grid.Row="0" Grid.Column="1"
318+
FontSize="10.5" Margin="5,0,0,8" Foreground="White" />
319+
<TextBlock Text="Status : " Margin="0,0,0,8" Grid.Row="1" Grid.Column="0"
320+
FontSize="10.5" Foreground="White" />
321+
<TextBlock Text="{Binding Category}" Grid.Row="1" Grid.Column="1"
322+
FontSize="10.5" Margin="5,0,0,8" Foreground="White" />
323+
<TextBlock Text="Description : " Grid.Row="2" Grid.Column="0"
324+
FontSize="10.5" Foreground="White" />
325+
<TextBlock Text="{Binding Description}" Margin="5,0,0,0" Width="150"
326+
TextWrapping="Wrap" TextTrimming="CharacterEllipsis"
327+
FontSize="10.5" Grid.Row="2" Grid.Column="1" Foreground="White" />
328+
</Grid>
329+
</Grid>
330+
</Border>
331+
</DataTemplate>
332+
</kanban:SfKanban.ToolTipTemplate>
333+
<kanban:SfKanban.DataContext>
334+
<local:ViewModel/>
335+
</kanban:SfKanban.DataContext>
336+
</kanban:SfKanban>
337+
338+
{% endhighlight %}
339+
{% highlight C# tabtitle="ViewModel.cs" %}
340+
341+
public class ViewModel
342+
{
343+
/// <summary>
344+
/// Gets or sets the collection of <see cref="KanbanModel"/> objects representing tasks in various stages.
345+
/// </summary>
346+
public ObservableCollection<KanbanModel> Tasks { get; set; }
347+
348+
/// <summary>
349+
/// Initializes a new instance of the <see cref="ViewModel"/> class.
350+
/// </summary>
351+
public ViewModel()
352+
{
353+
Tasks = new ObservableCollection<KanbanModel>();
354+
355+
KanbanModel task = new KanbanModel();
356+
task.Title = "UWP Issue";
357+
task.Description = "Sorting is not working properly in DateTimeAxis";
358+
task.Category = "Open";
359+
task.ColorKey = "#FF5187C6";
360+
task.Tags = new string[] { "Bug Fixing" };
361+
task.ImageURL = new Uri("/Assets/People/People_Circle1.png", UriKind.RelativeOrAbsolute);
362+
Tasks.Add(task);
363+
364+
task = new KanbanModel();
365+
task.Title = "New Feature";
366+
task.Description = "Need to create code base for Gantt control";
367+
task.Category = "Open";
368+
task.ColorKey = "#FF57B94C";
369+
task.Tags = new string[] { "GanttControl UWP" };
370+
task.ImageURL = new Uri("/Assets/People/People_Circle2.png", UriKind.RelativeOrAbsolute);
371+
Tasks.Add(task);
372+
373+
task = new KanbanModel();
374+
task.Title = "UG";
375+
task.Description = "Need to do post processing work for closed incidents";
376+
task.Category = "In Progress";
377+
task.ColorKey = "#FF57B94C";
378+
task.Tags = new string[] { "Post processing" };
379+
task.ImageURL = new Uri("/Assets/People/People_Circle3.png", UriKind.RelativeOrAbsolute);
380+
Tasks.Add(task);
381+
382+
task = new KanbanModel();
383+
task.Title = "UWP Issue";
384+
task.Description = "Crosshair label template not visible in UWP.";
385+
task.Category = "In Progress";
386+
task.ColorKey = "#FFECB93C";
387+
task.Tags = new string[] { "Bug Fixing" };
388+
task.ImageURL = new Uri("/Assets/People/People_Circle4.png", UriKind.RelativeOrAbsolute);
389+
Tasks.Add(task);
390+
391+
task = new KanbanModel();
392+
task.Title = "WPF Issue";
393+
task.Description = "Need to implement tooltip support for histogram series.";
394+
task.Category = "Closed";
395+
task.ColorKey = "#FF5187C6";
396+
task.Tags = new string[] { "Bug Fixing" };
397+
task.ImageURL = new Uri("/Assets/People/People_Circle6.png", UriKind.RelativeOrAbsolute);
398+
Tasks.Add(task);
399+
400+
task = new KanbanModel();
401+
task.Title = "WF Issue";
402+
task.Description = "HorizontalAlignment for tooltip is not working";
403+
task.Category = "Closed";
404+
task.ColorKey = "#FFECB93C";
405+
task.Tags = new string[] { "Bug fixing" };
406+
task.ImageURL = new Uri("/Assets/People/People_Circle8.png", UriKind.RelativeOrAbsolute);
407+
Tasks.Add(task);
408+
}
409+
}
410+
411+
{% endhighlight %}
412+
{% endtabs %}
413+
414+
N>
415+
* This property will only be applicable when `EnableToolTip` is set to true.

0 commit comments

Comments
 (0)