Placeholder

3 Sep 20202 minutes to read

The placeholder is used to denote the new position of a card in the KanbanColumn. It will appear when dragging a card over the column.

Placeholder style

The PlaceholderStyle property is used to customize the placeholder. The following KanbanPlaceholderStyle properties are used to customize its appearance:

• BackgroundColor - Changes the background color of placeholder.
• DashGap - Determines the dash gap of placeholder.
• DashWidth - Provides dash width of placeholder.
• StrokeColor - Changes the stroke color of placeholder.
• StrokeWidth - Changes the stroke width of placeholder.
• TextSize - Changes the text size of placeholder.
• TextColor - Changes the text color of placeholder.

The following properties are used to customize the selected category when you have more than one category in a column:

• SelectedBackgroundColor - Changes the background color of a selected placeholder.
• SelectedDashGap - Determines the dash gap of a selected placeholder.
• SelectedDashWidth - Provides dash width of a selected placeholder.
• SelectedStrokeColor - Changes the stroke color of a selected placeholder.
• SelectedStrokeWidth - Changes the stroke width of a selected placeholder.
• SelectedTextSize - Changes the size of the text in a selected placeholder.
• SelectedTextColor - Changes the color of the text in a selected placeholder.

The following code example describes the above behavior.

C#

KanbanPlaceholderStyle style = new KanbanPlaceholderStyle();
style.BackgroundColor = Color.Rgb(239, 89, 123);
style.DashGap = 1;
style.DashWidth = 1;
style.StrokeColor = Color.Blue;
style.StrokeWidth = 2;
style.TextSize = 20;
style.TextColor = Color.Green;

style.SelectedBackgroundColor = Color.Rgb(0, 255, 0);
style.SelectedDashGap = 2;
style.SelectedDashWidth = 1;
style.SelectedStrokeColor = Color.Yellow;
style.SelectedStrokeWidth = 2;
style.SelectedTextSize = 20;
style.SelectedTextColor = Color.Red;

kanban.PlaceholderStyle = style;

The following screenshot illustrates the result of the above code sample.