Cards in WPF Kanban (SfKanban) Control

15 Jul 202624 minutes to read

The default elements of a card can be customized using the following properties of KanbanModel.

• Title - Used to set the title of a card.
• ImageURL - Used to set the image URL of a card. The image will be displayed at the right side in the default card template.
• Category - Used to set the category of a card. Based on the category, the Cards will be added to the respective columns.
• Description - Used to set the description text of a card.
• ColorKey - Used to specify the indicator ColorKey. The Color value of the corresponding Key should be added to the IndicatorColorPalette collection of SfKanban.
• Tags - Used to specify the tags of a card. The tags will be displayed at the bottom in the default card template.
• ID - Used to set the ID of a card.

The following example shows how to set the values for these properties in a KanbanModel instance:

C#

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/icon.jpg", UriKind.RelativeOrAbsolute)
};

The following code snippet defines the colors for each indicator key.

XAML

<kanban:SfKanban.IndicatorColorPalette>
    <kanban:ColorMapping Key="Low" Color="Blue" />
    <kanban:ColorMapping Key="Normal" Color="Green" />
    <kanban:ColorMapping Key="High" Color="Red" />
</kanban:SfKanban.IndicatorColorPalette>

C#

using Syncfusion.UI.Xaml.Kanban;
using System.Windows.Media;

IndicatorColorPalette indicatorColorPalette = new IndicatorColorPalette();
indicatorColorPalette.Add(new ColorMapping() { Key = "Low", Color = Colors.Blue });
indicatorColorPalette.Add(new ColorMapping() { Key = "High", Color = Colors.Red });
indicatorColorPalette.Add(new ColorMapping() { Key = "Normal", Color = Colors.Green });
sfKanban.IndicatorColorPalette = indicatorColorPalette;

Customizing Kanban Cards

The CardStyle property customizes the Kanban cards. The following properties of CardStyle are used to customize its appearance:

• Background - Changes the background color of a card.
• BorderBrush - Changes the border brush of a card.
• BorderThickness - Changes the border thickness of a card.
• CornerRadius - Adds rounded corners to a card.
• IconVisibility - Changes the icon visibility of a card.
• IndicatorVisibility - Changes the indicator visibility of a card.
• TagVisibility - Changes the tag panel visibility of a card.
• TitleColor - Changes the header color of a Kanban card item.
• TitleFontSize - Changes the font size of a card title.
• TitleHorizontalAlignment - Changes the horizontal alignment of a card title.
• FontSize - Changes the font size of a card description.
• Foreground - Changes the foreground color of a card description.
• TagBackground - Changes the background color of a tag.
• TagForeground - Changes the foreground color of a tag.

The following example shows how to apply these CardStyle properties in XAML:

XAML

<kanban:SfKanban.CardStyle>
    <kanban:KanbanCardStyle Background="LightYellow"
                             BorderBrush="DarkGray"
                             BorderThickness="1"
                             CornerRadius="5"
                             Foreground="Black"
                             FontSize="12"
                             TitleColor="DarkSlateGray"
                             TitleFontSize="14"
                             TagBackground="SteelBlue"
                             TagForeground="White" />
</kanban:SfKanban.CardStyle>

Template

You can replace the entire card template with your own design using the CardTemplate property of SfKanban. The following code snippet and screenshot illustrate this.

XAML

<kanban:SfKanban.CardTemplate>
    <DataTemplate>
        <Border BorderBrush="Black"
                BorderThickness="0.75"
                CornerRadius="10"
                Background="AliceBlue"
                Margin="0,5,0,5">
            <Grid Margin="10,5,5,10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="7*" />
                    <ColumnDefinition Width="3*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding Path=Title}"
                           FontWeight="Bold"
                           FontSize="16" />
                <TextBlock Grid.Row="1"
                           FontSize="14"
                           HorizontalAlignment="Left"
                           Text="{Binding Description}"
                           TextWrapping="Wrap" />
                <Border Grid.Row="1"
                        Grid.Column="1"
                        Height="50"
                        CornerRadius="50"
                        Width="50"
                        BorderBrush="Silver"
                        BorderThickness=".75">
                    <Border.Background>
                        <ImageBrush ImageSource="{Binding ImageURL}" />
                    </Border.Background>
                </Border>
            </Grid>
        </Border>
    </DataTemplate>
</kanban:SfKanban.CardTemplate>

Cards Tooltip

An interactive tooltip provides additional details about the cards when hovering the mouse over them.

Enable Tooltip for Cards

To enable the tooltip for the Kanban cards, use the IsToolTipEnabled property of SfKanban. By default, IsToolTipEnabled is set to false. To provide users with additional information or context about cards, set this property to true.

XAML

<kanban:SfKanban x:Name="kanban"
                 IsToolTipEnabled="True"
                 ItemsSource="{Binding Tasks}">
    <kanban:SfKanban.DataContext>
        <local:ViewModel />
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>

C#

this.kanban.IsToolTipEnabled = true;

ViewModel.cs

using System.Collections.ObjectModel;
using Syncfusion.UI.Xaml.Kanban;

namespace GettingStarted
{
    /// <summary>
    /// Provides sample data for the SfKanban control.
    /// </summary>
    public class ViewModel
    {
        /// <summary>
        /// Gets or sets the collection of <see cref="KanbanModel"/> objects representing tasks in various stages.
        /// </summary>
        public ObservableCollection<KanbanModel> Tasks { get; set; }

        /// <summary>
        /// Initializes a new instance of the <see cref="ViewModel"/> class.
        /// </summary>
        public ViewModel()
        {
            Tasks = new ObservableCollection<KanbanModel>();

            KanbanModel task = new KanbanModel();
            task.Title = "WPF 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" };
            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 = "WPF Issue";
            task.Description = "Crosshair label template not visible in WPF.";
            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 = "WPF Issue";
            task.Description = "HorizontalAlignment for tooltip is not working";
            task.Category = "Closed";
            task.Tags = new string[] { "Bug Fixing" };
            Tasks.Add(task);
        }
    }
}

Customize Tooltip Appearance

You can customize the tooltip appearance by using the ToolTipTemplate property of SfKanban.

The following code example shows the usage of DataTemplate:

XAML

<kanban:SfKanban x:Name="kanban"
                 IsToolTipEnabled="True"
                 ItemsSource="{Binding Tasks}"
                 ToolTipTemplate="{StaticResource KanbanToolTipTemplate}">
    <kanban:SfKanban.Resources>
        <DataTemplate x:Key="KanbanToolTipTemplate">
            <Border CornerRadius="4" Padding="10" Background="Black">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Rectangle Fill="DodgerBlue" Grid.Column="0" VerticalAlignment="Stretch"
                               HorizontalAlignment="Left" Width="8" Margin="0,0,5,0" />
                    <Grid Grid.Column="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBlock Text="Title: " FontSize="10.5" Grid.Row="0" Grid.Column="0"
                                   Margin="0,0,0,8" Foreground="White" />
                        <TextBlock Text="{Binding Title}" Grid.Row="0" Grid.Column="1"
                                   FontSize="10.5" Margin="5,0,0,8" Foreground="White" />
                        <TextBlock Text="Status: " Margin="0,0,0,8" Grid.Row="1" Grid.Column="0"
                                   FontSize="10.5" Foreground="White" />
                        <TextBlock Text="{Binding Category}" Grid.Row="1" Grid.Column="1"
                                   FontSize="10.5" Margin="5,0,0,8" Foreground="White" />
                        <TextBlock Text="Description: " Grid.Row="2" Grid.Column="0"
                                   FontSize="10.5" Foreground="White" />
                        <TextBlock Text="{Binding Description}" Margin="5,0,0,0" Width="150"
                                   TextWrapping="Wrap" TextTrimming="CharacterEllipsis"
                                   FontSize="10.5" Grid.Row="2" Grid.Column="1" Foreground="White" />
                    </Grid>
                </Grid>
            </Border>
        </DataTemplate>
    </kanban:SfKanban.Resources>
    <kanban:SfKanban.DataContext>
        <local:ViewModel />
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>

C#

this.kanban.IsToolTipEnabled = true;
this.kanban.ItemsSource = new ViewModel().Tasks;

ViewModel.cs

using System.Collections.ObjectModel;
using Syncfusion.UI.Xaml.Kanban;

namespace GettingStarted
{
    /// <summary>
    /// Provides sample data for the SfKanban control with custom tooltip styling.
    /// </summary>
    public class ViewModel
    {
        /// <summary>
        /// Gets or sets the collection of <see cref="KanbanModel"/> objects representing tasks in various stages.
        /// </summary>
        public ObservableCollection<KanbanModel> Tasks { get; set; }

        /// <summary>
        /// Initializes a new instance of the <see cref="ViewModel"/> class.
        /// </summary>
        public ViewModel()
        {
            Tasks = new ObservableCollection<KanbanModel>();

            KanbanModel task = new KanbanModel();
            task.Title = "WPF 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" };
            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 = "WPF Issue";
            task.Description = "Crosshair label template not visible in WPF.";
            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 = "WPF Issue";
            task.Description = "HorizontalAlignment for tooltip is not working";
            task.Category = "Closed";
            task.ColorKey = "#FFECB93C";
            task.Tags = new string[] { "Bug Fixing" };
            Tasks.Add(task);
        }
    }
}

NOTE

• The ToolTipTemplate property will only be applicable when IsToolTipEnabled is set to true.

See Also

• SfKanban API Reference
• KanbanModel API Reference
• KanbanCardStyle API Reference
• ColorMapping API Reference