Skip to content

Commit 3c0687a

Browse files
VishalOmprasadVishalOmprasad
committed
977013 - MAUI Kanban UG changes
1 parent 4229d58 commit 3c0687a

File tree

3 files changed

+758
-2
lines changed

3 files changed

+758
-2
lines changed

‎MAUI/Kanban-Board/Cards.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,4 +213,6 @@ kanban.CardTemplate = new KanbanTemplateSelector();
213213

214214
{% endhighlight %}
215215

216-
{% endtabs %}
216+
{% endtabs %}
217+
218+
N> When using a custom model as the [`ItemsSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_ItemsSource), the binding context for each card is set to an instance of that custom model. This means that all data bindings within the [`CardTemplate`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html#Syncfusion_Maui_Kanban_SfKanban_CardTemplate) should reference the properties of your custom model directly.

‎MAUI/Kanban-Board/Column.md‎

Lines changed: 350 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,3 +277,353 @@ 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)