Cards in WPF Kanban Board (SfKanban)

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.

    <kanban:SfKanban.IndicatorColorPalette>
    
        <kanban:ColorMapping Key="Low" Color="Blue"/>
    
        <kanban:ColorMapping Key="Normal" Color="Green" />
    
        <kanban:ColorMapping Key="High" Color="Red" />
    
    </kanban:SfKanban.IndicatorColorPalette>
    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;

    Customization of cards in WPF SfKanban

    Customizing kanban cards

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

    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>

    Template support for cards in WPF SfKanban