How to customize the kanban column header in the .NET MAUI Kanban Board

This article provides a detailed walkthrough on customizing the kanban column header of the .NET MAUI Kanban board.

In this guide, you’ll learn how to customize the kanban column header of a MAUI Kanban board by changing the background color, text color, and image based on the column title. The customization is achieved using IValueConverter within the HeaderTemplate of the SfKanban component.

Step 1: Initialize the SfKanban and Add the Columns

XAML

<kanban:SfKanban AutoGenerateColumns="False" 
                 HorizontalOptions="FillAndExpand" 
                 VerticalOptions="FillAndExpand" 
                 ItemsSource="{Binding Cards}">

   <kanban:SfKanban.Columns>
       <kanban:KanbanColumn Title="To Do" Categories="Open" >
       </kanban:KanbanColumn>
       <kanban:KanbanColumn Title="In Progress" Categories="In Progress">
       </kanban:KanbanColumn>
       <kanban:KanbanColumn Title="Code Review" Categories="Code Review">
       </kanban:KanbanColumn>
       <kanban:KanbanColumn Title="Done" Categories="Done">
       </kanban:KanbanColumn>
   </kanban:SfKanban.Columns>
</kanban:SfKanban> 

Step 2: Define Converters in a Resource Dictionary

XAML

<ContentPage.Resources>
   <ResourceDictionary>
       <local:BackgroundColorConverter x:Key="BackgroundColorConverter"/>
       <local:ImageSourceConverter x:Key="ImageSourceConverter"/>
       <local:TextColorConverter x:Key="TextColorConverter"/>
   </ResourceDictionary>
</ContentPage.Resources> 

Step 3: To customize the header, use the HeaderTemplate property and use converter to dynamically change the background color, text color and image of the header based on the KanbanColumn title.

XAML

<kanban:SfKanban.HeaderTemplate>
   <DataTemplate>
       <StackLayout Orientation="Horizontal"
                    Padding="10" 
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="Center"
                    BackgroundColor="{Binding Title, Converter={StaticResource BackgroundColorConverter}}">

           <Image VerticalOptions="Center"
                  WidthRequest="40"
                  HeightRequest="40"
                  Source="{Binding Title, Converter={StaticResource ImageSourceConverter}}"/>

            <Label Text="{Binding Title}"
                   TextColor="{Binding Title, Converter={StaticResource TextColorConverter}}" FontAttributes="Bold" 
                   Margin="10" FontSize="18"
                   VerticalOptions="Center" 
                   HorizontalOptions="StartAndExpand"/>
       </StackLayout>
   </DataTemplate>
</kanban:SfKanban.HeaderTemplate>

Step 4: This code defines three converters, BackgroundColorConverter, ImageSourceConverter and TextColorConverter which map a Title string to corresponding background colors, text color and image sources respectively for dynamic UI binding in XAML.

C#

public class BackgroundColorConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
       if (value is string title)
       {
           return title switch
           {
               "To Do" => Colors.LightGoldenrodYellow,
               "In Progress" => Colors.LightCyan,
               "Code Review" => Colors.LightBlue,
               "Done" => Colors.LightGreen,
               _ => Colors.Transparent
           };
       }
       
       return Colors.Transparent;
   }

   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
       throw new NotImplementedException();
   }
}

public class ImageSourceConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
       if (value is string title)
       {
           return title switch
           {
               "To Do" => "todolist.png",
               "In Progress" => "inprogress.png",
               "Code Review" => "review.png",
               "Done" => "done.png",
               _ => null
           };
       }
       
       return null;
   }

   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
       throw new NotImplementedException();
   }

}

public class TextColorConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
       if (value is string title)
       {
           return title switch
           {
               "To Do" => Colors.Orange,
               "In Progress" => Colors.DarkCyan,
               "Code Review" => Colors.Blue,
               "Done" => Colors.Green,
               _ => Colors.Transparent
           };
       }
       
       return null;
   }

   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
       throw new NotImplementedException();
   }
}

Output:

Download the complete sample from GitHub.

Conclusion:
I hope you enjoyed learning how to customize the kanban column header in the MAUI Kanban board.

You can refer to our .NET MAUI Kanban feature tour page to know about its other groundbreaking feature representations.

Explore our .NET MAUI Kanban documentation to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!