Events in WPF Kanban (SfKanban) control

18 Nov 201817 minutes to read

CardTapped

This event is triggered when you tap on any card. The argument contains the following information.

Command

The CardTappedCommand property is used to associate a command with an instance of SfKanban. This property is most often set with MVVM pattern to bind callbacks back into the ViewModel.

CommandParameter

The CardTappedCommandParameter property is used to set the parameter reference, based on which the event argument is shown.

NOTE
The default value of the CardTappedCommandParameter is null.

CardDoubleTapped

The CardDoubleTapped event is triggered when you double tap on any card. The argument contains the following information:

ColumnDragStarting

The ColumnDragStarting event occurs when a column begins to be dragged. We can get the following details from the ColumnDragStarting event.

Column - Returns the source column where the column is being dragged.
ColumnIndex - Returns the index of the dragged column within the Kanban column collection.
Cancel - Determines whether the column drag operation should be canceled

<kanban:SfKanban x:Name="kanban"
                 ItemsSource="{Binding TaskDetails}"
                 AutoGenerateColumns="False" 
                 AllowColumnReorder="True"
                 ColumnDragStarting="OnKanbanColumnDragStarting">
    <kanban:KanbanColumn Title="To Do" Categories="Open" />
    <kanban:KanbanColumn Title="In Progress" Categories="In Progress" />
    <kanban:KanbanColumn Title="Done" Categories="Done" />
    <kanban:SfKanban.DataContext>
        <local:ViewModel/>
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.AutoGenerateColumns = false;
this.kanban.ColumnDragStarting += this.OnKanbanColumnDragStarting;
this.kanban.AllowColumnReorder = true;
this.kanban.Columns.Add(new KanbanColumn() { Title = "To Do", Categories = "Open" });
this.kanban.Columns.Add(new KanbanColumn() { Title = "In Progress", Categories = "In Progress" });
this.kanban.Columns.Add(new KanbanColumn() { Title = "Done", Categories = "Done" });

private void OnKanbanColumnDragStarting(object sender, KanbanColumnDragStartingEventArgs e)
{
    var column = e.Column;
    int columnIndex = e.ColumnIndex;
}
public class ViewModel
{
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }

    public ViewModel()
    {
        this.TaskDetails = new ObservableCollection<KanbanModel>();
        this.GetTaskDetails();
    }

    private void GetTaskDetails()
    { 
        this.TaskDetails.Add(new KanbanModel() { Title = "UWP Issue", Description = "Crosshair label template not visible in UWP", Category = "Open", ColorKey = "High", Tags = new [] { "Bug Fixing" } });
        this.TaskDetails.Add(new KanbanModel() { Title = "Kanban Feature", Description = "Provide drag and drop support", Category = "In Progress", ColorKey = "Low", Tags = new [] { "New control" } });
        this.TaskDetails.Add(new KanbanModel() { Title = "WF Issue", Description = "HorizontalAlignment for tooltip is not working", Category = "Done", ColorKey = "High", Tags = new [] { "Bug fixing" } });
    }
}

ColumnDragOver

The ColumnDragOver event occurs when a column is being dragged over another column. We can get the following details from the ColumnDragOver event.

SourceColumn - Returns the column where the drag operation originated.
CurrentColumn - Returns the current column over which the dragged column is positioned.
PreviousColumnIndex - Returns the previous column index before entering the current column.
CurrentColumnIndex - Returns the current column index over which the dragged column is positioned

<kanban:SfKanban x:Name="kanban"
                 ItemsSource="{Binding TaskDetails}"
                 AutoGenerateColumns="False" 
                 AllowColumnReorder="True"
                 ColumnDragOver="OnKanbanColumnDragOver">
    <kanban:KanbanColumn Title="To Do" Categories="Open" />
    <kanban:KanbanColumn Title="In Progress" Categories="In Progress" />
    <kanban:KanbanColumn Title="Done" Categories="Done" />
    <kanban:SfKanban.DataContext>
        <local:ViewModel/>
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.AutoGenerateColumns = false;
this.kanban.ColumnDragOver += this.OnKanbanColumnDragOver;
this.kanban.AllowColumnReorder = true;
this.kanban.Columns.Add(new KanbanColumn() { Title = "To Do", Categories = "Open" });
this.kanban.Columns.Add(new KanbanColumn() { Title = "In Progress", Categories = "In Progress" });
this.kanban.Columns.Add(new KanbanColumn() { Title = "Done", Categories = "Done" });

private void OnKanbanColumnDragOver(object sender, KanbanColumnDragOverEventArgs e)
{
    var sourceColumn = e.SourceColumn;
    var currentColumn = e.CurrentColumn;
    int previousColumnIndex = e.PreviousColumnIndex;
    int currentColumnIndex = e.CurrentColumnIndex
}
public class ViewModel
{
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }

    public ViewModel()
    {
        this.TaskDetails = new ObservableCollection<KanbanModel>();
        this.GetTaskDetails();
    }

    private void GetTaskDetails()
    { 
        this.TaskDetails.Add(new KanbanModel() { Title = "UWP Issue", Description = "Crosshair label template not visible in UWP", Category = "Open", ColorKey = "High", Tags = new [] { "Bug Fixing" } });
        this.TaskDetails.Add(new KanbanModel() { Title = "Kanban Feature", Description = "Provide drag and drop support", Category = "In Progress", ColorKey = "Low", Tags = new [] { "New control" } });
        this.TaskDetails.Add(new KanbanModel() { Title = "WF Issue", Description = "HorizontalAlignment for tooltip is not working", Category = "Done", ColorKey = "High", Tags = new [] { "Bug fixing" } });
    }
}

ColumnDrop

The ColumnDrop event occurs when a dragged column is dropped into a new position. We can get the following details from the ColumnDrop event.

SourceColumn - Returns the column from which the drag operation originated.
PreviousColumnIndex - Returns the column index before the drop.
TargetColumnIndex - Returns the index where the column is dropped.
TargetColumn - Returns the column from which the dragged column is dropped.

<kanban:SfKanban x:Name="kanban"
                 ItemsSource="{Binding TaskDetails}"
                 AutoGenerateColumns="False" 
                 AllowColumnReorder="True"
                 ColumnDrop="OnKanbanColumnDrop">
    <kanban:KanbanColumn Title="To Do" Categories="Open" />
    <kanban:KanbanColumn Title="In Progress" Categories="In Progress" />
    <kanban:KanbanColumn Title="Done" Categories="Done" />
    <kanban:SfKanban.DataContext>
        <local:ViewModel/>
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.AutoGenerateColumns = false;
this.kanban.ColumnDrop += this.OnKanbanColumnDrop;
this.kanban.AllowColumnReorder = true;
this.kanban.Columns.Add(new KanbanColumn() { Title = "To Do", Categories = "Open" });
this.kanban.Columns.Add(new KanbanColumn() { Title = "In Progress", Categories = "In Progress" });
this.kanban.Columns.Add(new KanbanColumn() { Title = "Done", Categories = "Done" });

private void OnKanbanColumnDrop(object sender, KanbanColumnDropEventArgs e)
{
    var sourceColumn = e.SourceColumn;
    var previousColumnIndex = e.PreviousColumnIndex;
    int targetColumnIndex = e.TargetColumnIndex;
    int targetColumn = e.TargetColumn;
}
public class ViewModel
{
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }

    public ViewModel()
    {
        this.TaskDetails = new ObservableCollection<KanbanModel>();
        this.GetTaskDetails();
    }

    private void GetTaskDetails()
    { 
        this.TaskDetails.Add(new KanbanModel() { Title = "UWP Issue", Description = "Crosshair label template not visible in UWP", Category = "Open", ColorKey = "High", Tags = new [] { "Bug Fixing" } });
        this.TaskDetails.Add(new KanbanModel() { Title = "Kanban Feature", Description = "Provide drag and drop support", Category = "In Progress", ColorKey = "Low", Tags = new [] { "New control" } });
        this.TaskDetails.Add(new KanbanModel() { Title = "WF Issue", Description = "HorizontalAlignment for tooltip is not working", Category = "Done", ColorKey = "High", Tags = new [] { "Bug fixing" } });
    }
}

CardDragStart

This event is triggered when you start to drag a card. The argument contains the following information.

  • IsCancel - Used to cancel the drag action.
  • SelectedCard - Used to get the underlying model of the card.
  • KeepCard - Determines whether to keep the dragged card in the source location itself, until it is dropped in a new location. When it is true, the preview of the card will be created for dragging.
  • SelectedColumn - Used to get the source column of card.
  • SelectedCardIndex - Used to get the index of the card in source column.
  • SelectedColumnIndex - Used to get the index of dragging card’s column.
  • SelectedRowIndex - Used to get the index of dragging card’s row.

CardDragEnd

This event is triggered when whenever dragging is canceled. The argument contains the following information.

  • IsCancel - Used to cancel the drag action.
  • SelectedCard - Used to get the underlying model of the card.
  • SelectedColumn - Used to get the source column of the card.
  • SelectedCardIndex - Used to get the index of the card in source column.
  • TargetKey - Used to get the category of the column where the card is going to be dropped.
  • TargetColumn - Used to get the current column which is the drop target for the card.
  • TargetCardIndex - Used to get the index of the card in target column.
  • SelectedColumnIndex - Used to get the index of dragging card’s column.
  • SelectedRowIndex - Used to get the index of dragging card’s row.
  • TargetRowIndex - Used to get the target row index where the card is going to be inserted.
  • TargetColumnIndex - Used to get the target column index where the card is going to be inserted.

CardDragEnter

This event is triggered when a card enters into a column while dragging. The argument contains the following information.

CardDragLeave

This event is triggered when a card leaves a column while dragging. The argument contains the following information.

CardDragOver

This event is triggered when a card is dragged to a new index within a column. The argument contains the following information.

ColumnsGenerated

This event will be fired after the columns are generated automatically. You can access the auto-generated columns using SfKanban.ActualColumns property.

ColumnGenerated

This event is triggered when a column generated.

  • Columns - used to get the generated columns.
  • IsCancel - used to cancel the generated column added to the SfKanban.
  • CurrentColumn - used to get the current generated column.