diff --git a/MAUI/Kanban-Board/Column.md b/MAUI/Kanban-Board/Column.md index 7ad785b0d4..246164edcb 100644 --- a/MAUI/Kanban-Board/Column.md +++ b/MAUI/Kanban-Board/Column.md @@ -342,7 +342,6 @@ kanban.Columns.Add(new KanbanColumn }); kanban.ItemsSource = viewModel.Cards; - this.Content = kanban; {% endhighlight %} @@ -516,6 +515,8 @@ public class KanbanViewModel {% endhighlight %} {% endtabs %} +![column-background-customization-in-maui-kanban](images/column/column-background-customization-in-maui-kanban.png) + ### Customize no card appearance using DataTemplate The .NET MAUI Kanban control allows you to define a custom UI for columns that have no cards using the [`NoCardTemplate`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.KanbanColumn.html#Syncfusion_Maui_Kanban_KanbanColumn_NoCardTemplate) property of the [`KanbanColumn`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.KanbanColumn.html). This feature helps you display meaningful messages or visuals when a column is empty, improving the user experience. @@ -788,6 +789,8 @@ public class KanbanViewModel {% endhighlight %} {% endtabs %} +![no-card-appearance-in-maui-kanban](images/column/no-card-appearance-in-maui-kanban.png) + ### Customize the placeholder style The .NET MAUI Kanban control supports styling the placeholder area, where cards can be dropped during drag-and-drop operations using the [`PlaceholderStyle`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.KanbanColumn.html#Syncfusion_Maui_Kanban_KanbanColumn_PlaceholderStyle) property of the [`KanbanColumn`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.KanbanColumn.html). This customization enhances visual clarity and improves the user experience during interactions. @@ -800,8 +803,8 @@ The .NET MAUI Kanban control supports styling the placeholder area, where cards ItemsSource="{Binding Cards}"> @@ -838,12 +841,12 @@ kanban.AutoGenerateColumns = false; KanbanPlaceholderStyle placeholderStyle = new KanbanPlaceholderStyle { - Background = Colors.Transparent, - SelectionIndicatorBackground = Colors.Transparent, - SelectionIndicatorStroke = Color.FromArgb("#FFB77F"), + Background = Color.FromArgb("#FAC7AD"), + SelectionIndicatorBackground = Color.FromArgb("#FAC7AD"), + SelectionIndicatorStroke = Color.FromArgb("#914C00"), SelectionIndicatorTextStyle = new KanbanTextStyle { - TextColor = Color.FromArgb("#FFB77F") + TextColor = Color.FromArgb("#914C00") } }; @@ -944,4 +947,6 @@ public class KanbanViewModel } {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +![placeholder-style-in-maui-kanban](images/column/placeholder-style-in-maui-kanban.png) \ No newline at end of file diff --git a/MAUI/Kanban-Board/Getting-Started.md b/MAUI/Kanban-Board/Getting-Started.md index 4879a30fc4..b8cc637716 100644 --- a/MAUI/Kanban-Board/Getting-Started.md +++ b/MAUI/Kanban-Board/Getting-Started.md @@ -344,7 +344,7 @@ The following sample code demonstrates this process in action: - + @@ -465,6 +465,8 @@ public class KanbanViewModel {% endhighlight %} {% endtabs %} +![defining-columns-using-default-modelin-maui-kanban](images/getting-started/defining-columns-using-default-modelin-maui-kanban.png) + ### Creating the custom model tasks with data mapping You can also map a custom data model to the Kanban control. The following steps demonstrate how to render tasks using the [.NET MAUI Kanban](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html) control with corresponding custom data properties. @@ -484,7 +486,7 @@ Alternatively, you can manually define columns by setting [`AutoGenerateColumns` Let’s look at the practical code example: {% tabs %} -{% highlight XAML hl_lines="2 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26" %} +{% highlight XAML hl_lines="2 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24" %} @@ -493,75 +495,70 @@ Let’s look at the practical code example: - - + + - - - + HorizontalTextAlignment="Center" + FontAttributes="Bold" + FontSize="14" /> + {% endhighlight %} -{% highlight C# hl_lines="3 4 5 6 7 8 9 10 11 12 14 15 16 17 18 19 21 22 24 25 26 27 29 30 31 32 33 34 35 37 38 40 41 42 43 45 46" %} +{% highlight C# hl_lines="3 4 6 8 9 10 13 15 17 18 19 20 23 25 26 27 28 31 33 34 35 36 39 42 43" %} SfKanban kanban = new SfKanban(); KanbanViewModel viewModel = new KanbanViewModel(); kanban.ColumnMappingPath = "Status"; kanban.CardTemplate = new DataTemplate(() => { - StackLayout stackLayout = new StackLayout() + var titleLabel = new Label { - WidthRequest = 250, - Orientation = StackOrientation.Vertical, - Padding = new Thickness(10), - BackgroundColor = Colors.Gray + HorizontalTextAlignment = TextAlignment.Center, + FontAttributes = FontAttributes.Bold, + FontSize = 14 }; - HorizontalStackLayout titleLayout = new HorizontalStackLayout(); - Label title = new Label() + titleLabel.SetBinding(Label.TextProperty, "Title"); + + var descriptionLabel = new Label { - TextColor = Colors.Silver, - HorizontalOptions = LayoutOptions.Start + HorizontalTextAlignment = TextAlignment.Center, + FontSize = 12, + LineBreakMode = LineBreakMode.WordWrap, + Margin = new Thickness(5) }; - title.SetBinding(Label.TextProperty, new Binding("Title")); - titleLayout.Children.Add(title); + descriptionLabel.SetBinding(Label.TextProperty, "Description"); - StackLayout contentLayout = new StackLayout() + var stackLayout = new VerticalStackLayout { - Orientation = StackOrientation.Horizontal + Margin = new Thickness(10), + Children = { titleLabel, descriptionLabel } }; - Label description = new Label() + var border = new Border { - WidthRequest = 150, - FontSize = 14, - TextColor = Colors.Silver, - LineBreakMode = LineBreakMode.WordWrap + Stroke = Colors.Black, + StrokeThickness = 1, + Background = Color.FromArgb("#F3CFCE"), + Content = stackLayout }; - - description.SetBinding(Label.TextProperty, new Binding("Description")); - contentLayout.Children.Add(description); - stackLayout.Children.Add(titleLayout); - stackLayout.Children.Add(contentLayout); - return stackLayout; + return border; }); -kanban.ItemsSource = viewModel.Cards; +kanban.ItemsSource = viewModel.TaskDetails; this.Content = kanban; {% endhighlight %} @@ -649,6 +646,8 @@ public class KanbanViewModel {% endhighlight %} {% endtabs %} +![defining-columns-using-custom-modelin-maui-kanban](images/getting-started/defining-columns-using-custom-modelin-maui-kanban.png) + N> When using a custom data model, the default card UI is not applicable. You must define a custom `DataTemplate` using the [`CardTemplate`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_CardTemplate) property to render the card content appropriately. N> [View sample in GitHub](https://github.com/SyncfusionExamples/GettingStarted_Kanban_MAUI) diff --git a/MAUI/Kanban-Board/images/column/column-background-customization-in-maui-kanban.png b/MAUI/Kanban-Board/images/column/column-background-customization-in-maui-kanban.png new file mode 100644 index 0000000000..852e5b8c78 Binary files /dev/null and b/MAUI/Kanban-Board/images/column/column-background-customization-in-maui-kanban.png differ diff --git a/MAUI/Kanban-Board/images/column/no-card-appearance-in-maui-kanban.png b/MAUI/Kanban-Board/images/column/no-card-appearance-in-maui-kanban.png new file mode 100644 index 0000000000..103acfd16e Binary files /dev/null and b/MAUI/Kanban-Board/images/column/no-card-appearance-in-maui-kanban.png differ diff --git a/MAUI/Kanban-Board/images/column/placeholder-style-in-maui-kanban.png b/MAUI/Kanban-Board/images/column/placeholder-style-in-maui-kanban.png new file mode 100644 index 0000000000..2601d70f77 Binary files /dev/null and b/MAUI/Kanban-Board/images/column/placeholder-style-in-maui-kanban.png differ diff --git a/MAUI/Kanban-Board/images/getting-started/defining-columns-using-custom-modelin-maui-kanban.png b/MAUI/Kanban-Board/images/getting-started/defining-columns-using-custom-modelin-maui-kanban.png new file mode 100644 index 0000000000..9a4fe05348 Binary files /dev/null and b/MAUI/Kanban-Board/images/getting-started/defining-columns-using-custom-modelin-maui-kanban.png differ diff --git a/MAUI/Kanban-Board/images/getting-started/defining-columns-using-default-modelin-maui-kanban.png b/MAUI/Kanban-Board/images/getting-started/defining-columns-using-default-modelin-maui-kanban.png new file mode 100644 index 0000000000..c37c173b03 Binary files /dev/null and b/MAUI/Kanban-Board/images/getting-started/defining-columns-using-default-modelin-maui-kanban.png differ