Class SfKanban

The Kanban control offers an efficient way to visualize workflows at each stage of completion, aiding in planning and providing a clear view of task progression. It offers various features to effectively monitor task progress throughout the software development lifecycle, allowing users to control task transitions between categories (statuses). The control supports easy task binding through the ItemsSource property and enables grouping tasks using horizontal swimlanes to organize and display related tasks by categories, teams, or other groupings. You can customize the control's appearance using ColumnHeaderTemplate, CardTemplate, CardTemplateSelector, SwimlaneHeaderTemplate, and customizable placeholders. It includes a rich set of built-in functionalities such as data binding, swimlanes, card templating, scrolling, drag-and-drop, WIP validations, responsiveness, various built-in themes, and more.

Inheritance
System.Object
SfKanban
Implements
System.IDisposable
Namespace: Syncfusion.UI.Xaml.Kanban
Assembly: Syncfusion.Kanban.WinUI.dll
Syntax
public class SfKanban : Control, IDisposable
Examples

The following code demonstrates, how to bind ItemsSource and populate card items in the SfKanban.

# [C#](#tab/tabid-1) 
public class ViewModel
{
    public ObservableCollection<KanbanModel> TaskDetails { get; set; } 

public ViewModel()
{
    this.TaskDetails = this.GetTaskDetails();
}
private ObservableCollection&lt;KanbanModel> GetTaskDetails()
{
    var taskDetails = new ObservableCollection&lt;KanbanModel>();
    KanbanModel taskDetail = new KanbanModel
    {
        Title = &quot;UWP Issue&quot;,
        Id = &quot;6593&quot;,
        Description = &quot;Sorting is not working properly in DateTimeAxis&quot;,
        Category = &quot;Postponed&quot;,
        IndicatorColorKey = &quot;High&quot;,
        Tags = new List&lt;string>() { &quot;Bug Fixing&quot; },
    };
    taskDetails.Add(taskDetail);

    taskDetail = new KanbanModel
    {
        Title = &quot;New Feature&quot;,
        Id = &quot;6593&quot;,
        Description = &quot;Need to create code base for Gantt control&quot;,
        Category = &quot;Postponed&quot;,
        IndicatorColorKey = &quot;Low&quot;,
        Tags = new List&lt;string>() { &quot;GanttControl UWP&quot; },
    };
    taskDetails.Add(taskDetail);

    taskDetail = new KanbanModel
    {
        Title = &quot;New Feature&quot;,
        Id = &quot;6516&quot;,
        Description = &quot;Dragging events support for Kanban&quot;,
        Category = &quot;Closed&quot;,
        IndicatorColorKey = &quot;Normal&quot;,
        Tags = new List&lt;string>() { &quot;New Control&quot; },
    };
    taskDetails.Add(taskDetail);

    taskDetail = new KanbanModel
    {
        Title = &quot;UWP Issue&quot;,
        Id = &quot;651&quot;,
        Description = &quot;Crosshair label template not visible in UWP&quot;,
        Category = &quot;Open&quot;,
        IndicatorColorKey = &quot;High&quot;,
        Tags = new List&lt;string>() { &quot;Bug Fixing&quot; },
    };
    taskDetails.Add(taskDetail);

    taskDetail = new KanbanModel
    {
        Title = &quot;WinUI Issue&quot;,
        Id = &quot;28066&quot;,
        Description = &quot;In minimized state, first and last segments have incorrect spacing&quot;,
        Category = &quot;Review&quot;,
        IndicatorColorKey = &quot;Normal&quot;,
        Tags = new List&lt;string>() { &quot;Bug Fixing&quot; },
    };
    taskDetails.Add(taskDetail);

    taskDetail = new KanbanModel
    {
        Title = &quot;Kanban Feature&quot;,
        Id = &quot;23822&quot;,
        Description = &quot;Provide drag and drop support&quot;,
        Category = &quot;In Progress&quot;,
        IndicatorColorKey = &quot;Low&quot;,
        Tags = new List&lt;string>() { &quot;New control&quot; },
    };
    taskDetails.Add(taskDetail);

    return taskDetails;
}



}

<kanban:SfKanban x:Name="kanban" 
                 ItemsSource="{Binding TaskDetails}" 
                 AutoGenerateColumns="False">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
    <kanban:SfKanban.IndicatorColorPalette>
        <kanban:KanbanColorMapping Key="Low" Color="Green"/>
        <kanban:KanbanColorMapping Key="Normal" Color="Yellow"/>
        <kanban:KanbanColorMapping Key="High" Color="Red"/>
    </kanban:SfKanban.IndicatorColorPalette>

    <kanban:KanbanColumn HeaderText="To Do" Categories="Open,Postponed" />

    <kanban:KanbanColumn HeaderText="In Progress" 
                         Categories="In Progress" 
                         MinimumCount="2">
        <kanban:KanbanColumn.ErrorBarSettings>
            <kanban:KanbanErrorBarSettings MaximumValidationColor="Red" 
                                           MinimumValidationColor="Yellow" />
        </kanban:KanbanColumn.ErrorBarSettings>
    </kanban:KanbanColumn>

    <kanban:KanbanColumn HeaderText="For Review" 
                         Categories="Review" 
                         MaximumCount="5">
        <kanban:KanbanColumn.ErrorBarSettings>
            <kanban:KanbanErrorBarSettings MaximumValidationColor="Red" 
                                           MinimumValidationColor="Yellow" />
        </kanban:KanbanColumn.ErrorBarSettings>
    </kanban:KanbanColumn>

    <kanban:KanbanColumn HeaderText="Done" 
                         AllowDrag="False" 
                         Categories="Closed,Closed NoChanges,Won't Fix" 
                         MinimumCount="2" 
                         MaximumCount="10">
        <kanban:KanbanColumn.ErrorBarSettings>
            <kanban:KanbanErrorBarSettings MaximumValidationColor="Red" 
                                           MinimumValidationColor="Yellow" />
        </kanban:KanbanColumn.ErrorBarSettings>
    </kanban:KanbanColumn>
</kanban:SfKanban>

Constructors

SfKanban()

Initializes a new instance of the SfKanban class.

Declaration
public SfKanban()

Fields

ActualColumnWidthProperty

Identifies the ActualColumnWidth dependency property.

Declaration
public static readonly DependencyProperty ActualColumnWidthProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for ActualColumnWidth dependency property.

AutoGenerateColumnsProperty

Identifies the AutoGenerateColumns dependency property.

Declaration
public static readonly DependencyProperty AutoGenerateColumnsProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for AutoGenerateColumns dependency property.

CardTappedCommandProperty

Identifies the CardTappedCommand dependency property.

Declaration
public static readonly DependencyProperty CardTappedCommandProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for CardTappedCommand dependency property.

CardTemplateProperty

Identifies the CardTemplate dependency property.

Declaration
public static readonly DependencyProperty CardTemplateProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for CardTemplate dependency property.

CardTemplateSelectorProperty

Identifies the CardTemplateSelector dependency property.

Declaration
public static readonly DependencyProperty CardTemplateSelectorProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for CardTemplateSelector dependency property.

ColumnHeaderTemplateProperty

Identifies the ColumnHeaderTemplate dependency property.

Declaration
public static readonly DependencyProperty ColumnHeaderTemplateProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for ColumnHeaderTemplate dependency property.

ColumnsAnimationDurationProperty

Identifies the ColumnsAnimationDuration dependency property.

Declaration
public static readonly DependencyProperty ColumnsAnimationDurationProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for ColumnsAnimationDuration dependency property.

ColumnsProperty

Identifies the Columns dependency property.

Declaration
public static readonly DependencyProperty ColumnsProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for Columns dependency property.

ColumnWidthProperty

Identifies the ColumnWidth dependency property.

Declaration
public static readonly DependencyProperty ColumnWidthProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for ColumnWidth dependency property.

HeaderProperty

Identifies the Header dependency property.

Declaration
public static readonly DependencyProperty HeaderProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for Header dependency property.

IndicatorColorPaletteProperty

Identifies the IndicatorColorPalette dependency property.

Declaration
public static readonly DependencyProperty IndicatorColorPaletteProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for IndicatorColorPalette dependency property.

ItemsSourceProperty

Identifies the ItemsSource dependency property.

Declaration
public static readonly DependencyProperty ItemsSourceProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for ItemsSource dependency property.

MaximumColumnWidthProperty

Identifies the MaximumColumnWidth dependency property.

Declaration
public static readonly DependencyProperty MaximumColumnWidthProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for MaximumColumnWidth dependency property.

MinimumColumnWidthProperty

Identifies the MinimumColumnWidth dependency property.

Declaration
public static readonly DependencyProperty MinimumColumnWidthProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for MinimumColumnWidth dependency property.

SwimlaneHeaderTemplateProperty

Identifies the SwimlaneHeaderTemplate dependency property.

Declaration
public static readonly DependencyProperty SwimlaneHeaderTemplateProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for SwimlaneHeaderTemplate dependency property.

SwimlaneKeyProperty

Identifies the SwimlaneKey dependency property.

Declaration
public static readonly DependencyProperty SwimlaneKeyProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

The identifier for SwimlaneKey dependency property.

Properties

ActualColumnWidth

Gets the actual width of each KanbanColumn in the SfKanban control.

Declaration
public double ActualColumnWidth { get; }
Property Value
Type
System.Double

AutoGenerateColumns

Gets or sets a value indicating whether columns should be generated automatically based on the Category property.

Declaration
public bool AutoGenerateColumns { get; set; }
Property Value
Type Description
System.Boolean

The default value of AutoGenerateColumns is true.
Remarks

When set to true, columns will be generated automatically based on the Category property of the items.

Examples

The below examples shows, how to use AutoGenerateColumns property of SfKanban.

# [XAML](#tab/tabid-6) 
<kanban:SfKanban x:Name="kanban" 
                 ItemsSource="{Binding TaskDetails}"
                 AutoGenerateColumns="False">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
    <kanban:KanbanColumn Categories="Open" 
                         HeaderText="To Do" />
    <kanban:KanbanColumn Categories="In Progress" 
                         HeaderText="Progress" />
    <kanban:KanbanColumn Categories="Review,Done" 
                         HeaderText="Done" />
</kanban:SfKanban>
# [C#](#tab/tabid-7) 
public class ViewModel
{
    public ViewModel()
    {
        TaskDetails = new ObservableCollection<KanbanModel>();
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6593",
            Description = "Draft preliminary software specifications",
            Category = "Review",
            IndicatorColorKey = "High",
            Tags = new List<string> { "Analysis" },
        });
    }
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
}
# [C#](#tab/tabid-8) 
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.AutoGenerateColumns = false;
this.kanban.Columns.Add(new KanbanColumn()
{
    Categories = "Open",
    HeaderText = "To Do",
});
this.kanban.Columns.Add(new KanbanColumn()
{
    Categories = "In Progress",
    HeaderText = "Progress",
});
this.kanban.Columns.Add(new KanbanColumn()
{
    Categories = "Review,Done",
    HeaderText = "Done",
});
See Also

CardTappedCommand

Gets or sets a command that will be executed when a card is tapped.

Declaration
public ICommand CardTappedCommand { get; set; }
Property Value
Type
System.Windows.Input.ICommand
Remarks

The CardTappedCommand property allows you to bind a command that will be executed when a card is tapped.

CardTemplate

Gets or sets the data template to use for customizing the appearance of individual card items in the SfKanban.

Declaration
public DataTemplate CardTemplate { get; set; }
Property Value
Type
Microsoft.UI.Xaml.DataTemplate
Remarks

The KanbanModel will be set as binding context.

Examples

The below examples shows, how to use CardTemplate property of SfKanban.

# [XAML](#tab/tabid-9) 
<Grid>
  <Grid.Resources>
    <DataTemplate X:Key="cardTemplate">
       <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 Image}" />
                  </Border.Background>
              </Border>
          </Grid>
      </Border>
   </DataTemplate>
 </Grid.Resources>
<kanban:SfKanban x:Name="kanban" 
                 ItemsSource="{Binding TaskDetails}"
                 CardTemplate="{StaticResource cardTemplate}">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>
</Grid>
# [C#](#tab/tabid-10) 
public class ViewModel
{
    public ViewModel()
    {
        TaskDetails = new ObservableCollection<KanbanModel>();
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6593",
            Description = "Draft preliminary software specifications",
            Category = "Review",
            IndicatorColorKey = "High",
            Tags = new List<string> { "Analysis" },
            Image = new Image { Source = new BitmapImage(new Uri("ms-appx:///Images/People.png", UriKind.RelativeOrAbsolute)) },
        });
    }
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
}
See Also

CardTemplateSelector

Gets or sets the data template selector to use for customizing the appearance of individual card items in the SfKanban.

Declaration
public DataTemplateSelector CardTemplateSelector { get; set; }
Property Value
Type
Microsoft.UI.Xaml.Controls.DataTemplateSelector
Remarks

The KanbanModel will be set as binding context.

Examples

The below examples shows, how to use CardTemplateSelector property of SfKanban.

# [XAML](#tab/tabid-11) 
<Grid>
   <Grid.Resources>
    <DataTemplate x:Key="highPriorityTemplate">
        <Border BorderBrush="Red" BorderThickness="2" CornerRadius="10" Background="LightPink">
            <StackPanel Margin="10">
                <TextBlock Text="{Binding Title}" FontWeight="Bold" FontSize="16" />
                <TextBlock Text="{Binding Description}" FontSize="14" TextWrapping="Wrap" />
            </StackPanel>
        </Border>
    </DataTemplate>
    <DataTemplate x:Key="lowPriorityTemplate">
        <Border BorderBrush="Green" BorderThickness="1" CornerRadius="10" Background="LightGreen">
            <StackPanel Margin="10">
                <TextBlock Text="{Binding Title}" FontWeight="Bold" FontSize="16" />
                <TextBlock Text="{Binding Description}" FontSize="14" TextWrapping="Wrap" />
            </StackPanel>
        </Border>
    </DataTemplate>
    <local:CustomCardTemplateSelector x:Key="cardTemplateSelector"
                                      HighPriorityTemplate="{StaticResource highPriorityTemplate}"
                                      LowPriorityTemplate="{StaticResource lowPriorityTemplate}"/> 
</Grid.Resources>
 <kanban:SfKanban x:Name="kanban" 
                 ItemsSource="{Binding TaskDetails}"
                 CardTemplateSelector="{StaticResource cardTemplateSelector}">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
 </kanban:SfKanban>
</Grid>
# [C#](#tab/tabid-12) 
public class CustomCardTemplateSelector : DataTemplateSelector
{
    public DataTemplate HighPriorityTemplate { get; set; }
    public DataTemplate LowPriorityTemplate { get; set; }

public override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
    var task = item as KanbanModel;
    return task != null &amp;&amp; task.IndicatorColorKey == &quot;High&quot; ? HighPriorityTemplate : LowPriorityTemplate;
}



}

public class ViewModel
{
    public ViewModel()
    {
        TaskDetails = new ObservableCollection<KanbanModel>()
        {
            new KanbanModel()
            {
                Title = "Critical Issue",
                Description = "Resolve the bug immediately.",
                IndicatorColorKey = "High"
            },
            new KanbanModel()
            {
                Title = "Documentation",
                Description = "Update project documentation.",
                IndicatorColorKey = "Low"
            }
        };
    }
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
}
See Also

ColumnHeaderTemplate

Gets or sets the data template to use for customizing the appearance of individual column header in the SfKanban.

Declaration
public DataTemplate ColumnHeaderTemplate { get; set; }
Property Value
Type
Microsoft.UI.Xaml.DataTemplate
Remarks

The KanbanColumn will be set as binding context.

Examples

The below examples shows, how to use ColumnHeaderTemplate property of SfKanban.

# [XAML](#tab/tabid-17) 
<Grid>
 <Grid.Resources>
    <DataTemplate x:Key="columnHeaderTemplate">
        <StackPanel Width="300" Height="40" Background="Silver">
            <TextBlock Margin="10" 
                       Text="{Binding HeaderText}" 
                       Foreground="Purple" 
                       HorizontalAlignment="Left" />
        </StackPanel>
    </DataTemplate>   
 </Grid.Resources>
 <kanban:SfKanban x:Name="kanban" 
                  ItemsSource="{Binding TaskDetails}"
                  ColumnHeaderTemplate="{StaticResource columnHeaderTemplate}">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>
</Grid>
# [C#](#tab/tabid-18) 
public class ViewModel
{
    public ViewModel()
    {
        TaskDetails = new ObservableCollection<KanbanModel>();
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6593",
            Description = "Draft preliminary software specifications",
            Category = "Review",
            IndicatorColorKey = "High",
            Tags = new List<string> { "Analysis" },
        });
    }
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
}
See Also

Columns

Gets or sets a collection of KanbanColumn objects that define the columns in the SfKanban.

Declaration
public ObservableCollection<KanbanColumn> Columns { get; set; }
Property Value
Type Description
System.Collections.ObjectModel.ObservableCollection<KanbanColumn>

The default value of Columns is null.
Remarks

This property allows you to specify a collection of KanbanColumn objects, which are displayed as columns in the Kanban control.

Examples

The below examples shows, how to use Columns property of SfKanban.

# [XAML](#tab/tabid-19) 
<kanban:SfKanban x:Name="kanban" 
                 ItemsSource="{Binding TaskDetails}"
                 AutoGenerateColumns="False"
                 Columns="{Binding KanbanColumns}">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>
# [C#](#tab/tabid-20) 
public class ViewModel
{
    public ViewModel()
    {
        TaskDetails = new ObservableCollection<KanbanModel>();
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6593",
            Description = "Draft preliminary software specifications",
            Category = "Review",
            IndicatorColorKey = "High",
            Tags = new List<string> { "Analysis" },
        });
        KanbanColumns = new ObservableCollection<KanbanColumn>();
        KanbanColumns.Add(new KanbanColumn()
        {
            Categories = "Review",
            HeaderText = "In Review",
            MinimumLimit = 1,
            MaximumLimit = 3,
        });
        KanbanColumns.Add(new KanbanColumn()
        {
            Categories = "Completed",
            HeaderText = "Done",
            MinimumLimit = 1,
            MaximumLimit = 3,
        });
    }
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
    public ObservableCollection<KanbanColumn> KanbanColumns { get; set; }
}
# [C#](#tab/tabid-21) 
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.Columns.Add(new KanbanColumn()
{
    Categories = "Review",
    HeaderText = "To Do",
    MinimumLimit = 1,
    MaximumLimit = 3,
});
See Also
Syncfusion.UI.Xaml.Kanban.SfKanban.ColumnMappingPath

ColumnsAnimationDuration

Gets or sets the duration of the animation for transitioning between the expanded and collapsed states of a KanbanColumn.

Declaration
public TimeSpan ColumnsAnimationDuration { get; set; }
Property Value
Type Description
System.TimeSpan

The default value of ColumnsAnimationDuration is 60 milliseconds.
Remarks

This property controls the duration of the animation when a KanbanColumn transitions between its expanded and collapsed states. You can adjust this property to customize the animation's timing, enhancing the user experience with smooth, visually appealing transitions. The value is specified as a System.TimeSpan.

Examples

The below examples shows, how to use ColumnsAnimationDuration property of SfKanban.

# [XAML](#tab/tabid-14) 
<kanban:SfKanban x:Name="kanban" 
                 ItemsSource="{Binding TaskDetails}"
                 ColumnsAnimationDuration="0:0:1">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>
# [C#](#tab/tabid-15) 
public class ViewModel
{
    public ViewModel()
    {
        TaskDetails = new ObservableCollection<KanbanModel>();
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6593",
            Description = "Draft preliminary software specifications",
            Category = "Review",
            IndicatorColorKey = "High",
            Tags = new List<string> { "Analysis" },
            Image = new Image { Source = new BitmapImage(new Uri("ms-appx:///Images/People_Circle0.png", UriKind.RelativeOrAbsolute)) },
        });
    }
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
}
# [C#](#tab/tabid-16) 
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.sfKanban.ColumnsAnimationDuration = new TimeSpan(0,0,1);
See Also

ColumnWidth

Gets or sets a value that indicates the width of each KanbanColumn in SfKanban.

Declaration
public double ColumnWidth { get; set; }
Property Value
Type Description
System.Double

The default value of ColumnWidth is 0d.
Remarks

This property allows you to customize the width of each column in the Kanban control.

Examples

The below examples shows, how to use ColumnWidth property of SfKanban.

# [XAML](#tab/tabid-22) 
<kanban:SfKanban x:Name="kanban" 
                 ItemsSource="{Binding TaskDetails}"
                 AutoGenerateColumns="False"
                 ColumnWidth="100">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
    <kanban:KanbanColumn Categories="Open" 
                         HeaderText="To Do" />
</kanban:SfKanban>
# [C#](#tab/tabid-23) 
public class ViewModel
{
    public ViewModel()
    {
        TaskDetails = new ObservableCollection<KanbanModel>();
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6593",
            Description = "Draft preliminary software specifications",
            Category = "Open",
            IndicatorColorKey = "High",
            Tags = new List<string> { "Analysis" },
        });
    }
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
}
# [C#](#tab/tabid-24) 
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.ColumnWidth = 100;
See Also

Header

Gets or sets a object that specifies the header of the SfKanban.

Declaration
public object Header { get; set; }
Property Value
Type
System.Object
Remarks

This property allows you to customize the header displayed at the top of the Kanban control. You can set it to any string, which will be shown as the title.

Examples

The below examples shows, how to use Header property of SfKanban.

# [XAML](#tab/tabid-25) 
<kanban:SfKanban x:Name="kanban" 
                 ItemsSource="{Binding TaskDetails}"
                 AutoGenerateColumns="False"
                 Header="Kanban Board">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
    <kanban:KanbanColumn Categories="Open" 
                         HeaderText="To Do" />
</kanban:SfKanban>
# [C#](#tab/tabid-26) 
public class ViewModel
{
    public ViewModel()
    {
        TaskDetails = new ObservableCollection<KanbanModel>();
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6593",
            Description = "Draft preliminary software specifications",
            Category = "Open",
            IndicatorColorKey = "High",
            Tags = new List<string> { "Analysis" },
        });
    }
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
}
# [C#](#tab/tabid-27) 
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.Header = "Kanban Board";
See Also

IndicatorColorPalette

Gets or sets the KanbanColorMapping list which is used to set indication color for card.

Declaration
public List<KanbanColorMapping> IndicatorColorPalette { get; set; }
Property Value
Type Description
System.Collections.Generic.List<KanbanColorMapping>

The default value of IndicatorColorPalette is null.
Remarks

This property allows you to set a collection of color mappings that are used to indicate various statuses or priorities for the cards in SfKanban control.

Examples

The below examples shows, how to use IndicatorColorPalette property of SfKanban.

# [XAML](#tab/tabid-28) 
<kanban:SfKanban x:Name="kanban"
                 ItemsSource="{Binding TaskDetails}">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
    <kanban:SfKanban.IndicatorColorPalette>
        <kanban:KanbanColorMapping Key="Low" Color="Green" />
        <kanban:KanbanColorMapping Key="Medium" Color="Yellow" />
        <kanban:KanbanColorMapping Key="High" Color="Red" />
    </kanban:SfKanban.IndicatorColorPalette>
</kanban:SfKanban>
# [C#](#tab/tabid-29) 
public class ViewModel
{
    public ViewModel()
    {
        TaskDetails = new ObservableCollection<KanbanModel>();
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6593",
            Description = "Draft preliminary software specifications",
            Category = "Review",
            IndicatorColorKey = "High",
            Tags = new List<string> { "Analysis" },
        });
    }
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
}
# [C#](#tab/tabid-30) 
this.kanban.ItemsSource = new ViewModel().TaskDetails;
List<KanbanColorMapping> indicatorColorPalette = new List<KanbanColorMapping>();
indicatorColorPalette.Add(new KanbanColorMapping() { Key = "Low", Color = Colors.Blue });
indicatorColorPalette.Add(new KanbanColorMapping() { Key = "High", Color = Colors.Red });
indicatorColorPalette.Add(new KanbanColorMapping() { Key = "Normal", Color = Colors.Green });
this.kanban.IndicatorColorPalette = indicatorColorPalette;
See Also
Syncfusion.UI.Xaml.Kanban.KanbanModel.indicatorColorKey

ItemsSource

Gets or sets a collection used to generate the card items in the SfKanban.

Declaration
public ObservableCollection<KanbanModel> ItemsSource { get; set; }
Property Value
Type Description
System.Collections.ObjectModel.ObservableCollection<KanbanModel>

The default value of ItemsSource is null.
Remarks

The ItemsSource property can take collection of KanbanModel items. The kanban columns will be generated based on the Category property of each KanbanModel item, when auto generate column is enabled.

Examples

The below examples shows, how to use ItemsSource property of SfKanban.

# [XAML](#tab/tabid-3) 
<kanban:SfKanban x:Name="kanban"
                 ItemsSource="{Binding TaskDetails}"
                 AutoGenerateColumns="False">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
    <kanban:KanbanColumn Categories="Open" 
                         HeaderText="To Do" />
    <kanban:KanbanColumn Categories="In Progress" 
                         HeaderText="Progress" />
    <kanban:KanbanColumn Categories="Review,Done" 
                         HeaderText="Done" />
</kanban:SfKanban>
# [C#](#tab/tabid-4) 
public class ViewModel
{
    public ViewModel()
    {
        TaskDetails = new ObservableCollection<KanbanModel>();
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6593",
            Description = "Draft preliminary software specifications",
            Category = "Review",
            IndicatorColorKey = "High",
            Tags = new List<string> { "Analysis" },
        });
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6594",
            Description = "Design functional specifications",
            Category = "In Progress",
            IndicatorColorKey = "Normal",
            Tags = new List<string> { "Design" },
        });
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6595",
            Description = "Review preliminary software specifications",
            Category = "Done",
            IndicatorColorKey = "Low",
            Tags = new List<string> { "Analysis" },
        });
    }
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
}
# [C#](#tab/tabid-5) 
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.AutoGenerateColumns = false;
this.kanban.Columns.Add(new KanbanColumn()
{
    Categories = "Open",
    HeaderText = "To Do",
});
this.kanban.Columns.Add(new KanbanColumn()
{
    Categories = "In Progress",
    HeaderText = "Progress",
});
this.kanban.Columns.Add(new KanbanColumn()
{
    Categories = "Review,Done",
    HeaderText = "Done",
});
See Also

MaximumColumnWidth

Gets or sets a double value that specifies the maximum width of each KanbanColumn.

Declaration
public double MaximumColumnWidth { get; set; }
Property Value
Type Description
System.Double

The default value of MaximumColumnWidth is System.Double.NaN.
Remarks

This property defines the upper limit for the width of each column, ensuring it does not exceed the specified value.

Examples

The below examples shows, how to use MaximumColumnWidth property of SfKanban.

# [XAML](#tab/tabid-31) 
<kanban:SfKanban x:Name="kanban" 
                 ItemsSource="{Binding TaskDetails}"
                 AutoGenerateColumns="False"
                 MaximumColumnWidth="340">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
    <kanban:KanbanColumn Categories="Open" 
                         HeaderText="To Do" />
</kanban:SfKanban>
# [C#](#tab/tabid-32) 
public class ViewModel
{
    public ViewModel()
    {
        TaskDetails = new ObservableCollection<KanbanModel>();
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6593",
            Description = "Draft preliminary software specifications",
            Category = "Open",
            IndicatorColorKey = "High",
            Tags = new List<string> { "Analysis" },
        });
    }
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
}
# [C#](#tab/tabid-33) 
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.MaximumColumnWidth = 340;
See Also
Syncfusion.UI.Xaml.Kanban.SfKanban.ColumnMappingPath

MinimumColumnWidth

Gets or sets a double value that specifies the minimum width of each KanbanColumn.

Declaration
public double MinimumColumnWidth { get; set; }
Property Value
Type Description
System.Double

The default value of MinimumColumnWidth is 200d.
Remarks

This property defines the lower limit for the width of each column, ensuring it does not go below the specified value.

Examples

The below examples shows, how to use MinimumColumnWidth property of SfKanban.

# [XAML](#tab/tabid-34) 
<kanban:SfKanban x:Name="kanban" 
                 ItemsSource="{Binding TaskDetails}"
                 AutoGenerateColumns="False"
                 MinimumColumnWidth="300">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
    <kanban:KanbanColumn Categories="Open" 
                         HeaderText="To Do" />
</kanban:SfKanban>
# [C#](#tab/tabid-35) 
public class ViewModel
{
    public ViewModel()
    {
        TaskDetails = new ObservableCollection<KanbanModel>();
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6593",
            Description = "Draft preliminary software specifications",
            Category = "Open",
            IndicatorColorKey = "High",
            Tags = new List<string> { "Analysis" },
        });
    }
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
}
# [C#](#tab/tabid-36) 
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.MinimumColumnWidth = 300;
See Also
Syncfusion.UI.Xaml.Kanban.SfKanban.ColumnMappingPath

SwimlaneHeaderTemplate

Declaration
public DataTemplate SwimlaneHeaderTemplate { get; set; }
Property Value
Type
Microsoft.UI.Xaml.DataTemplate

SwimlaneKey

Gets or sets the unique key associated with a Syncfusion.UI.Xaml.Kanban.SwimlaneRecord in the SfKanban control.

Declaration
public string SwimlaneKey { get; set; }
Property Value
Type Description
System.String

The default value of SwimlaneKey is "Assignee".
Remarks

The SwimlaneKey property is used to identify and group Kanban cards within specific swimlanes. Setting this property ensures that cards are correctly categorized under the appropriate swimlane. Typically, this key is mapped to the KanbanModel to establish the swimlane association.

Examples

The below examples shows, how to use SwimlaneKey property of SfKanban.

# [XAML](#tab/tabid-39) 
<kanban:SfKanban x:Name="kanban" 
                 ItemsSource="{Binding TaskDetails}"
                 SwimlaneKey="IndicatorColorKey">
    <kanban:SfKanban.DataContext>
           <local:ViewModel />
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>
# [C#](#tab/tabid-40) 
public class ViewModel
{
    public ViewModel()
    {
        TaskDetails = new ObservableCollection<KanbanModel>();
        TaskDetails.Add(new KanbanModel()
        {
            Title = "Universal App",
            Id = "6593",
            Description = "Draft preliminary software specifications",
            Category = "Review",
            IndicatorColorKey = "High",
            Tags = new List<string> { "Analysis" },
        });
    }
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
}
# [C#](#tab/tabid-41) 
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.kanban.SwimlaneKey = "IndicatorColorKey";
See Also
Syncfusion.UI.Xaml.Kanban.Swimlane

Methods

Dispose()

Method to dispose the Kanban's instances.

Declaration
public void Dispose()

OnApplyTemplate()

Method to apply the control template and initializes the Kanban control's elements.

Declaration
protected override void OnApplyTemplate()

Events

CardDragOver

Occurs when a card is dragged over a KanbanColumn.

Declaration
public event EventHandler<KanbanCardDragOverEventArgs> CardDragOver
Event Type
Type
System.EventHandler<KanbanCardDragOverEventArgs>
Examples

The following code demonstrates, how to use the CardDragOver event in the SfKanban control.

this.kanban.CardDragOver += this.OnKanbanCardDragOver;
private void OnKanbanCardDragOver(object sender, KanbanCardDragOverEventArgs e)
{
    int currentColumnIndex = e.CurrentColumnIndex;
    int currentRowIndex = e.CurrentRowIndex;
    int currentIndex = e.CurrentIndex;
    var column = e.Column;
}

CardDragStarting

Occurs when a card drag starts in a KanbanColumn.

Declaration
public event EventHandler<KanbanCardDragStartingEventArgs> CardDragStarting
Event Type
Type
System.EventHandler<KanbanCardDragStartingEventArgs>
Examples

The following code demonstrates, how to use the CardDragStarting event in the SfKanban control.

this.kanban.CardDragStarting += this.OnKanbanCardDragStarting;
private void OnKanbanCardDragStarting(object sender, KanbanCardDragStartingEventArgs e)
{
    var card = e.Card;
    var column = e.Column; 
}

CardDrop

Occurs when a dragging card is dropped in a KanbanColumn.

Declaration
public event EventHandler<KanbanCardDropEventArgs> CardDrop
Event Type
Type
System.EventHandler<KanbanCardDropEventArgs>
Examples

The following code demonstrates how to use the CardDrop event in the SfKanban control.

this.kanban.CardDrop += this.OnKanbanCardDrop;
private void OnKanbanCardDrop(object sender, KanbanCardDropEventArgs e)
{
    int previousCardIndex = e.PreviousCardIndex;
    int previousColumnIndex = e.PreviousColumnIndex;
    int previousRowIndex = e.PreviousRowIndex;
    var column = e.SourceColumn;
}

CardTapped

Occurs when a card is tapped.

Declaration
public event EventHandler<KanbanCardTappedEventArgs> CardTapped
Event Type
Type
System.EventHandler<KanbanCardTappedEventArgs>
Examples

The following code demonstrates, how to use the CardTapped event in the SfKanban control.

this.kanban.CardTapped += this.OnKanbanCardTapped;
private void OnKanbanCardTapped(object sender, KanbanCardTappedEventArgs e)
{
    var selectedcard = e.SelectedCard;
    var selectedColumn = e.SelectedColumn;
    int selectedCardIndex = e.SelectedCardIndex;
}

Implements

System.IDisposable