Cards in WPF Kanban (SfKanban) control

31 May 20219 minutes to read

The default elements of a card can be customized using the below 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 right side in 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 in IndicatorColorPalette collection of SfKanban.
• Tags - Used to specify the tags of a card. The tags will be displayed at bottom in default card template.
• ID - Used to set the ID of a card.

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 )
};

Following code snippet is used to define the colors for each 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#

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 tag’s background color.
• TagForeground - Changes the tag’s foreground color.

Template

You can replace the entire card template with your own design using SfKanban.CardTemplate property. The following code snippet and screenshot illustrates 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="WrapWholeWords" />
                
                <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>