Placeholder in WPF Kanban (SfKanban) Control

15 Jul 20265 minutes to read

The placeholder denotes a card’s new position in the KanbanColumn. It appears while dragging a card over the column.

NOTE

The snippets in this document use the kanban: prefix for the Syncfusion namespace. Make sure the following namespace mapping is declared on the root element: xmlns:kanban="clr-namespace:Syncfusion.UI.Xaml.Kanban;assembly=Syncfusion.SfKanban.WPF".

Placeholder Style

The PlaceholderStyle property of SfKanban is used to customize the placeholder. The following properties are used to customize its appearance.

Basic Appearance

  • Fill - This property is used to change the background color of the placeholder.
  • Stroke - This property is used to change the border color of the placeholder.
  • StrokeThickness - This property is used to change the border width of the placeholder.
  • StrokeDashArray - This property is used to change the dash pattern of the placeholder border.
  • FontSize - This property is used to change the text size of the placeholder.
  • Foreground - This property is used to change the text color of the placeholder.
  • RadiusX - This property is used to change the X-radius of the placeholder.
  • RadiusY - This property is used to change the Y-radius of the placeholder.
  • TextHorizontalAlignment - This property is used to change the horizontal alignment of the placeholder text.
  • TextVerticalAlignment - This property is used to change the vertical alignment of the placeholder text.

Selected State Appearance

The following properties are used to customize the selected placeholder when a column contains more than one category.

  • SelectedBackground - This property is used to change the background color of the selected placeholder.
  • SelectedStroke - This property is used to change the border color of the selected placeholder.
  • SelectedStrokeThickness - This property is used to change the border width of the selected placeholder.
  • SelectedStrokeDashArray - This property is used to change the dash pattern of the selected placeholder border.
  • SelectedFontSize - This property is used to change the font size of the text in the selected placeholder.
  • SelectedForeground - This property is used to change the color of the text in the selected placeholder.

The following code example demonstrates the above behavior.

<kanban:SfKanban x:Name="kanban"
                 ItemsSource="{Binding Tasks}"
                 AutoGenerateColumns="False">
    <kanban:SfKanban.Columns>
        <kanban:KanbanColumn Title="To Do" Categories="Open" />
        <kanban:KanbanColumn Title="In Progress" Categories="In Progress" />
        <kanban:KanbanColumn Title="Done" Categories="Done" />
    </kanban:SfKanban.Columns>
    <kanban:SfKanban.PlaceholderStyle>
        <kanban:PlaceholderStyle FontSize="20"
                                 Foreground="DarkGreen"
                                 Fill="Fuchsia"
                                 Stroke="Blue"
                                 StrokeThickness="2"
                                 SelectedFontSize="20"
                                 SelectedForeground="Maroon"
                                 SelectedStroke="Yellow"
                                 SelectedStrokeThickness="2"
                                 SelectedBackground="LawnGreen" />
    </kanban:SfKanban.PlaceholderStyle>
</kanban:SfKanban>
using Syncfusion.UI.Xaml.Kanban;
using System.Windows.Media;

SfKanban sfKanban = new SfKanban();
PlaceholderStyle style = new PlaceholderStyle()
{
    FontSize = 20,
    Foreground = new SolidColorBrush(Colors.DarkGreen),
    Fill = new SolidColorBrush(Colors.Fuchsia),
    Stroke = new SolidColorBrush(Colors.Blue),
    StrokeThickness = 2,
    StrokeDashArray = new DoubleCollection() { 1, 1 },
    SelectedFontSize = 20,
    SelectedForeground = new SolidColorBrush(Colors.Maroon),
    SelectedStroke = new SolidColorBrush(Colors.Yellow),
    SelectedBackground = new SolidColorBrush(Colors.LawnGreen),
    SelectedStrokeThickness = 2,
    SelectedStrokeDashArray = new DoubleCollection() { 2, 1 }
};
sfKanban.PlaceholderStyle = style;

The following output demonstrates the above code example.

Placeholder support in WPF SfKanban

NOTE

The UI of the placeholder can be replaced entirely using the PlaceholderTemplate property of PlaceholderStyle.