Skip to content

Commit 6b226c9

Browse files
VishalOmprasadVishalOmprasad
committed
977013 - MAUI Kanban UG - Column.md related content changes removed
1 parent 9912516 commit 6b226c9

File tree

1 file changed

+0
-350
lines changed

1 file changed

+0
-350
lines changed

‎MAUI/Kanban-Board/Column.md‎

Lines changed: 0 additions & 350 deletions
Original file line numberDiff line numberDiff line change
@@ -277,353 +277,3 @@ kanban.Columns.Add(todoColumn);
277277
{% endhighlight %}
278278

279279
{% endtabs %}
280-
281-
## Appearance Customization
282-
283-
### Customizing Backgrounds
284-
285-
The Kanban control provides several properties to customize the background of its columns and placeholders, allowing for clear visual distinction and feedback.
286-
287-
The `Background` property of the [`KanbanColumn`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.KanbanColumn.html) sets the background for the entire column. This is useful for visually separating columns and aligning them with a specific status or workflow stage. It accepts a `Brush` and supports `AppThemeBinding`.
288-
289-
The `Background` property of `KanbanPlaceholderStyle` sets the background color of the placeholder area that appears when dragging a card over a valid column.
290-
291-
{% tabs %}
292-
293-
{% highlight xaml %}
294-
295-
<kanban:KanbanColumn Title="To Do"
296-
Categories="Open"
297-
Background="AliceBlue">
298-
<kanban:KanbanColumn.PlaceholderStyle>
299-
<kanban:KanbanPlaceholderStyle Background="Yellow"
300-
SelectionIndicatorStroke="Red"/>
301-
</kanban:KanbanColumn.PlaceholderStyle>
302-
</kanban:KanbanColumn>
303-
304-
{% endhighlight %}
305-
306-
{% highlight C# %}
307-
308-
KanbanPlaceholderStyle placeholderStyle = new KanbanPlaceholderStyle
309-
{
310-
Background = Colors.Yellow,
311-
SelectionIndicatorStroke = Colors.Red,
312-
};
313-
314-
KanbanColumn openColumn = new KanbanColumn();
315-
openColumn.Title = "To Do";
316-
openColumn.PlaceholderStyle = placeholderStyle;
317-
kanban.Columns.Add(openColumn);
318-
319-
{% endhighlight %}
320-
321-
{% endtabs %}
322-
323-
### NoCardTemplate
324-
325-
The `NoCardTemplate` property allows you to define a custom UI that is displayed when a column has no cards. This is useful for providing visual feedback or instructions when a column is empty.
326-
327-
{% tabs %}
328-
329-
{% highlight xaml %}
330-
331-
<ContentPage.Resources>
332-
<DataTemplate x:Key="NoCardTemplate">
333-
<Label Text="No orders"
334-
FontSize="14"
335-
TextColor="{DynamicResource ContentForegroundAlt1}"
336-
HorizontalOptions="Center"
337-
VerticalOptions="Center" />
338-
</DataTemplate>
339-
</ContentPage.Resources>
340-
341-
<kanban:SfKanban x:Name="kanban"
342-
AutoGenerateColumns="False"
343-
HorizontalOptions="FillAndExpand"
344-
VerticalOptions="FillAndExpand"
345-
ItemsSource="{Binding Cards}">
346-
<kanban:SfKanban.Columns>
347-
<kanban:KanbanColumn Title="To Do"
348-
Categories="Open"
349-
NoCardTemplate="{StaticResource NoCardTemplate}">
350-
</kanban:KanbanColumn>
351-
<kanban:KanbanColumn Title="In Progress"
352-
Categories="In Progress"
353-
NoCardTemplate="{StaticResource NoCardTemplate}">
354-
</kanban:KanbanColumn>
355-
<kanban:KanbanColumn Title="Code Review"
356-
Categories="Code Review"
357-
NoCardTemplate="{StaticResource NoCardTemplate}">
358-
</kanban:KanbanColumn>
359-
<kanban:KanbanColumn Title="Done"
360-
Categories="Done"
361-
NoCardTemplate="{StaticResource NoCardTemplate}">
362-
</kanban:KanbanColumn>
363-
</kanban:SfKanban.Columns>
364-
</kanban:SfKanban>
365-
366-
{% endhighlight %}
367-
368-
{% highlight C# %}
369-
370-
kanban.AutoGenerateColumns = false;
371-
kanban.SetBinding(SfKanban.ItemsSourceProperty, "TaskDetails");
372-
kanban.ColumnMappingPath="TaskCategory"
373-
374-
KanbanColumn openColumn = new KanbanColumn();
375-
openColumn.Title = "To Do";
376-
openColumn.NoCardTemplate = CreateNoCardTemplate();
377-
kanban.Columns.Add(openColumn);
378-
379-
KanbanColumn progressColumn = new KanbanColumn();
380-
progressColumn.Title = "In Progress";
381-
progressColumn.NoCardTemplate = CreateNoCardTemplate();
382-
kanban.Columns.Add(progressColumn);
383-
384-
KanbanColumn codeColumn = new KanbanColumn();
385-
codeColumn.Title = "Code Review";
386-
codeColumn.NoCardTemplate = CreateNoCardTemplate();
387-
kanban.Columns.Add(codeColumn);
388-
389-
KanbanColumn doneColumn = new KanbanColumn();
390-
doneColumn.Title = "Done";
391-
doneColumn.NoCardTemplate = CreateNoCardTemplate();
392-
kanban.Columns.Add(doneColumn);
393-
394-
395-
private DataTemplate CreateNoCardTemplate()
396-
{
397-
return new DataTemplate(() =>
398-
{
399-
return new Label
400-
{
401-
Text = "No orders",
402-
FontSize = 14,
403-
TextColor = Application.Current.Resources.TryGetValue("ContentForegroundAlt1", out var color) ? (Color)color : Colors.Gray,
404-
HorizontalOptions = LayoutOptions.Center,
405-
VerticalOptions = LayoutOptions.Center
406-
};
407-
});
408-
}
409-
410-
{% endhighlight %}
411-
412-
{% highlight C# tabtitle="ViewModel" %}
413-
414-
public class ViewModel
415-
{
416-
public ObservableCollection<KanbanModel> Cards { get; set; }
417-
public ViewModel()
418-
{
419-
Cards = new ObservableCollection<KanbanModel>();
420-
Cards.Add(new KanbanModel()
421-
{
422-
ID = 1,
423-
Title = "iOS - 1002",
424-
ImageURL = "People_Circle1.png",
425-
Category = "Open",
426-
Description = "Analyze customer requirements",
427-
IndicatorFill = Colors.Red,
428-
Tags = new List<string> { "Incident", "Customer" }
429-
});
430-
Cards.Add(new KanbanModel()
431-
{
432-
ID = 6,
433-
Title = "Xamarin - 4576",
434-
ImageURL = "People_Circle2.png",
435-
Category = "Open",
436-
Description = "Show the retrieved data from the server in grid control",
437-
IndicatorFill = Colors.Green,
438-
Tags = new List<string> { "Story", "Customer" }
439-
});
440-
Cards.Add(new KanbanModel()
441-
{
442-
ID = 13,
443-
Title = "UWP - 13",
444-
ImageURL = "People_Circle3.png",
445-
Category = "In Progress",
446-
Description = "Add responsive support to application",
447-
IndicatorFill = Colors.Brown,
448-
Tags = new List<string> { "Story", "Customer" }
449-
});
450-
Cards.Add(new KanbanModel()
451-
{
452-
ID = 2543,
453-
Title = "IOS- 11",
454-
Category = "Code Review",
455-
ImageURL = "People_Circle4.png",
456-
Description = "Check login page validation",
457-
IndicatorFill = Colors.Brown,
458-
Tags = new List<string> { "Story", "Customer" }
459-
});
460-
Cards.Add(new KanbanModel()
461-
{
462-
ID = 123,
463-
Title = "UWP-21",
464-
Category = "Done",
465-
ImageURL = "People_Circle5.png",
466-
Description = "Check login page validation",
467-
IndicatorFill = Colors.Brown,
468-
Tags = new List<string> { "Story", "Customer" }
469-
});
470-
}
471-
472-
}
473-
474-
{% endhighlight %}
475-
476-
{% endtabs %}
477-
478-
### PlaceholderStyle
479-
480-
The `PlaceholderStyle` property is used to style the placeholder area where cards can be dropped during drag-and-drop operations. This helps improve visual clarity during interactions.
481-
482-
{% tabs %}
483-
484-
{% highlight xaml %}
485-
486-
<ContentPage.Resources>
487-
<kanban:KanbanPlaceholderStyle x:Key="PlaceholderStyle"
488-
Background="Transparent"
489-
SelectionIndicatorBackground="Transparent"
490-
SelectionIndicatorStroke="{AppThemeBinding Light=#914C00, Dark=#FFB77F}">
491-
<kanban:KanbanPlaceholderStyle.SelectionIndicatorTextStyle>
492-
<kanban:KanbanTextStyle TextColor="{AppThemeBinding Light=#914C00, Dark=#FFB77F}" />
493-
</kanban:KanbanPlaceholderStyle.SelectionIndicatorTextStyle>
494-
</kanban:KanbanPlaceholderStyle>
495-
</ContentPage.Resources>
496-
497-
<kanban:SfKanban x:Name="kanban"
498-
AutoGenerateColumns="False"
499-
HorizontalOptions="FillAndExpand"
500-
VerticalOptions="FillAndExpand"
501-
ItemsSource="{Binding Cards}">
502-
<kanban:SfKanban.Columns>
503-
<kanban:KanbanColumn Title="To Do"
504-
Categories="Open"
505-
PlaceholderStyle="{StaticResource PlaceholderStyle}">
506-
</kanban:KanbanColumn>
507-
<kanban:KanbanColumn Title="In Progress"
508-
Categories="In Progress"
509-
PlaceholderStyle="{StaticResource PlaceholderStyle}">
510-
</kanban:KanbanColumn>
511-
<kanban:KanbanColumn Title="Code Review"
512-
Categories="Code Review"
513-
PlaceholderStyle="{StaticResource PlaceholderStyle}">
514-
</kanban:KanbanColumn>
515-
<kanban:KanbanColumn Title="Done"
516-
Categories="Done"
517-
PlaceholderStyle="{StaticResource PlaceholderStyle}">
518-
</kanban:KanbanColumn>
519-
</kanban:SfKanban.Columns>
520-
</kanban:SfKanban>
521-
522-
{% endhighlight %}
523-
524-
{% highlight C# %}
525-
526-
kanban.AutoGenerateColumns = false;
527-
kanban.SetBinding(SfKanban.ItemsSourceProperty, "TaskDetails");
528-
kanban.ColumnMappingPath="TaskCategory"
529-
530-
KanbanPlaceholderStyle placeholderStyle = new KanbanPlaceholderStyle
531-
{
532-
Background = Colors.Transparent,
533-
SelectionIndicatorBackground = Colors.Transparent,
534-
SelectionIndicatorStroke = Application.Current.Resources.TryGetValue("SelectionIndicatorStrokeColor", out var strokeColor)
535-
? (Color)strokeColor
536-
: App.Current.RequestedTheme == AppTheme.Dark ? Color.FromArgb("#FFB77F") : Color.FromArgb("#914C00"),
537-
SelectionIndicatorTextStyle = new KanbanTextStyle
538-
{
539-
TextColor = App.Current.RequestedTheme == AppTheme.Dark ? Color.FromArgb("#FFB77F") : Color.FromArgb("#914C00")
540-
}
541-
};
542-
543-
KanbanColumn openColumn = new KanbanColumn();
544-
openColumn.Title = "To Do";
545-
openColumn.PlaceholderStyle = placeholderStyle;
546-
kanban.Columns.Add(openColumn);
547-
548-
KanbanColumn progressColumn = new KanbanColumn();
549-
progressColumn.Title = "In Progress";
550-
progressColumn.PlaceholderStyle = placeholderStyle;
551-
kanban.Columns.Add(progressColumn);
552-
553-
KanbanColumn codeColumn = new KanbanColumn();
554-
codeColumn.Title = "Code Review";
555-
codeColumn.PlaceholderStyle = placeholderStyle;
556-
kanban.Columns.Add(codeColumn);
557-
558-
KanbanColumn doneColumn = new KanbanColumn();
559-
doneColumn.Title = "Done";
560-
doneColumn.PlaceholderStyle = placeholderStyle;
561-
kanban.Columns.Add(doneColumn);
562-
563-
{% endhighlight %}
564-
565-
{% highlight C# tabtitle="ViewModel" %}
566-
567-
public class ViewModel
568-
{
569-
public ObservableCollection<KanbanModel> Cards { get; set; }
570-
public ViewModel()
571-
{
572-
Cards = new ObservableCollection<KanbanModel>();
573-
Cards.Add(new KanbanModel()
574-
{
575-
ID = 1,
576-
Title = "iOS - 1002",
577-
ImageURL = "People_Circle1.png",
578-
Category = "Open",
579-
Description = "Analyze customer requirements",
580-
IndicatorFill = Colors.Red,
581-
Tags = new List<string> { "Incident", "Customer" }
582-
});
583-
Cards.Add(new KanbanModel()
584-
{
585-
ID = 6,
586-
Title = "Xamarin - 4576",
587-
ImageURL = "People_Circle2.png",
588-
Category = "Open",
589-
Description = "Show the retrieved data from the server in grid control",
590-
IndicatorFill = Colors.Green,
591-
Tags = new List<string> { "Story", "Customer" }
592-
});
593-
Cards.Add(new KanbanModel()
594-
{
595-
ID = 13,
596-
Title = "UWP - 13",
597-
ImageURL = "People_Circle3.png",
598-
Category = "In Progress",
599-
Description = "Add responsive support to application",
600-
IndicatorFill = Colors.Brown,
601-
Tags = new List<string> { "Story", "Customer" }
602-
});
603-
Cards.Add(new KanbanModel()
604-
{
605-
ID = 2543,
606-
Title = "IOS- 11",
607-
Category = "Code Review",
608-
ImageURL = "People_Circle4.png",
609-
Description = "Check login page validation",
610-
IndicatorFill = Colors.Brown,
611-
Tags = new List<string> { "Story", "Customer" }
612-
});
613-
Cards.Add(new KanbanModel()
614-
{
615-
ID = 123,
616-
Title = "UWP-21",
617-
Category = "Done",
618-
ImageURL = "People_Circle5.png",
619-
Description = "Check login page validation",
620-
IndicatorFill = Colors.Brown,
621-
Tags = new List<string> { "Story", "Customer" }
622-
});
623-
}
624-
625-
}
626-
627-
{% endhighlight %}
628-
629-
{% endtabs %}

0 commit comments

Comments
 (0)