Introducing the New WinUI Kanban Board

We’re delighted to introduce one other information visualization management within the Syncfusion .NET WinUI suite for the 2024 Quantity 4 launch, the all-new WinUI Kanban Board management.

The WinUI Kanban Board is a job administration instrument with a user-friendly interface, customizable templates, drag-and-drop performance, and built-in error bars. It improves mission visualization, job monitoring, and productiveness, making it appropriate for agile mission administration and workflow group.

On this weblog, we’ll delve into the important thing options of the .NET WinUI Kanban Board and description the steps to get began!

Key options

The WinUI Kanban Board management gives assist for the next key options:

• Work in Progress (WIP) limits
• Playing cards
• Columns
• Swim lanes
• Seamless drag and drop
• Develop and collapse columns
• Look customization

Let’s take a more in-depth take a look at these options!

Work in Progress (WIP) limits

The WinUI Kanban Board permits customers to set limits on the variety of playing cards to be displayed at every stage of the workflow, serving to to stop overloading and multitasking. When these limits are exceeded, the error bar visually modifications its look to point validation failure.

Playing cards

The Kanban playing cards visually symbolize duties and their progress via completely different levels. Customers can set values within the KanbanModel, which shall be mirrored within the Card UI, together with the title, description, tags, and extra.

Customers may also set the duty precedence, displayed as a shade indicator on the cardboard.

Columns

The WinUI Kanban Board divides its format into columns to visualise the completely different levels of labor, reminiscent of to-do, validate, in-progress, testing, and accomplished.

Swim lanes

The WinUI Kanban management permits customers to separate the board horizontally into swimlanes, categorizing playing cards by key attributes reminiscent of assignee, mission, or kind. Customers can customise swimlane headers with templates, management row visibility, and show merchandise counts inside every swimlane, enhancing job group and administration.

Seamless drag and drop

Customers can simply drag and drop playing cards throughout columns, inside columns, and between swimlane rows, enabling fast and intuitive standing updates for improved workflow administration.

Develop and collapse columns

The WinUI Kanban permits customers to develop and collapse columns, offering an organized view of duties for improved workflow administration.

Look customization

The Kanban helps UI customization for every ingredient utilizing templates, reminiscent of column headers, playing cards, swimlane headers, and extra.

Observe: For extra particulars, discuss with the WinUI Kanban Board documentation.

Getting began with the WinUI Kanban Board management

We have now explored the important thing options of the WinUI Kanban Board management. Let’s see methods to combine the management in your WinUI app.

Step 1: Create a brand new .NET WinUI app

First, open Visible Studio and create a brand new WinUI 3 desktop app.

Step 2: Add the required NuGet package deal

Syncfusion WinUI parts can be found within the NuGet Gallery. So as to add the SfKanban to your mission, open the NuGet package deal supervisor in Visible Studio, seek for Syncfusion.Kanban.WinUI, and set up it.

Step 3: Import and initialize the WinUI Kanban Board 

Now, add the Syncfusion.UI.Xaml.Kanban namespace to your XAML web page, and initialize the SfKanban management.

Confer with the next code instance.

xmlns:kanban="utilizing:Syncfusion.UI.Xaml.Kanban" 
<kanban:SfKanban/>

Step 4: Populate the Kanban merchandise supply

Let’s create a view mannequin utilizing the precise information. Confer with the next code instance.

public class KanbanViewModel
{
    public KanbanViewModel()
    {
        string path = @"ms-appx:///";
        this.TaskDetails = new ObservableCollection<KanbanModel>()
        {
            new KanbanModel()
            {
                Title = "UWP Problem",
                Id = "6593",
                Description = "Sorting is just not working correctly in DateTimeAxis",
                Class = "Postponed",
                IndicatorColorKey = "Excessive",
                Tags = new Record<string>() { "Bug Fixing" },
                Picture=new Picture { Supply = new BitmapImage(new Uri(path + "Belongings/People_Circle1.png")) }
            },

            new KanbanModel()
            {
                Title = "New Function",
                Id = "6593",
                Description = "Have to create code base for Gantt management",
                Class = "Postponed",
                IndicatorColorKey = "Low",
                Tags = new Record<string>() { "GanttControl UWP" },
                Picture = new Picture { Supply = new BitmapImage(new Uri(path + "Belongings/People_Circle2.png")) }
            },

            new KanbanModel()
            {
                Title = "UG",
                Id = "6516",
                Description = "Have to do post-processing work for closed incidents",
                Class = "Postponed",
                IndicatorColorKey = "Regular",
                Tags = new Record<string>() { "Put up-processing" },
                Picture = new Picture { Supply = new BitmapImage(new Uri(path + "Belongings/People_Circle3.png")) },
            },

            new KanbanModel()
            {
                Title = "UWP Problem",
                Id = "651",
                Description = "Crosshair label template not seen in UWP",
                Class = "Open",
                IndicatorColorKey = "Excessive",
                Tags = new Record<string>() { "Bug Fixing" },
                Picture = new Picture { Supply = new BitmapImage(new Uri(path + "Belongings/People_Circle4.png")) }
            },

            new KanbanModel()
            {
                Title = "WinUI Problem",
                Id = "646",
                Description = "AxisLabel cropped when rotating the axis label",
                Class = "Open",
                IndicatorColorKey = "Low",
                Tags = new Record<string>() { "Bug Fixing" },
                Picture = new Picture { Supply = new BitmapImage(new Uri(path + "Belongings/People_Circle5.png")) }
            },
        };
    }

    public ObservableCollection<KanbanModel> TaskDetails { get; set; }
}

Then, bind the ItemsSource of Kanban to the XAML web page. Confer with the next code instance.

<kanban:SfKanban x:Title="kanban"
                                  AutoGenerateColumns="False"
                                  ItemsSource="{Binding TaskDetails}">
    <kanban:SfKanban.DataContext>
            <native:KanbanViewModel/>
     </kanban:SfKanban.DataContext>
    <kanban:SfKanban.IndicatorColorPalette>
        <kanban:KanbanColorMapping Key="Low" Coloration="#0F7B0F"/>
        <kanban:KanbanColorMapping Key="Regular" Coloration="#FFB900"/>
        <kanban:KanbanColorMapping Key="Excessive" Coloration="#C42B1C"/>
    </kanban:SfKanban.IndicatorColorPalette>
    <kanban:KanbanColumn HeaderText="To Do" Classes="Open,Postponed" />
    <kanban:KanbanColumn HeaderText="In Progress"
                         Classes="In Progress"
                         MinimumCount="2">
        <kanban:KanbanColumn.ErrorBarSettings>
            <kanban:KanbanErrorBarSettings MaximumValidationColor="Pink" 
                                              MinimumValidationColor="Yellow" />
        </kanban:KanbanColumn.ErrorBarSettings>
    </kanban:KanbanColumn>

    <kanban:KanbanColumn HeaderText="For Overview"
                         Classes="Overview"
                         MaximumCount="5">
        <kanban:KanbanColumn.ErrorBarSettings>
            <kanban:KanbanErrorBarSettings MaximumValidationColor="Pink"
                                              MinimumValidationColor="Yellow" />
        </kanban:KanbanColumn.ErrorBarSettings>
    </kanban:KanbanColumn>

    <kanban:KanbanColumn HeaderText="Accomplished"
                         Classes="Closed,Closed No Modifications,Will not Repair"
                         MinimumCount="2"
                         MaximumCount="10">
        <kanban:KanbanColumn.ErrorBarSettings>
            <kanban:KanbanErrorBarSettings MaximumValidationColor="Pink"
                                              MinimumValidationColor="Yellow" />
        </kanban:KanbanColumn.ErrorBarSettings>
    </kanban:KanbanColumn>
</kanban:SfKanban>

Now, you’ll be able to run the app and visualize the required information within the WinUI Kanban Board management.

GitHub reference

For extra particulars, discuss with the WinUI Kanban Board management demo on GitHub.

Conclusion

Thanks for studying! On this weblog, we’ve explored the options of the brand new WinUI Kanban Board management launched within the 2024 Quantity 4 launch. Try our Launch Notes and What’s New pages to see the opposite updates on this launch, and go away your suggestions within the feedback part under.

For current Syncfusion prospects, the latest model of Important Studio® is offered on the license and downloads web page. If you’re not a buyer, strive our 30-day free trial to take a look at these new options.

You may contact us via our assist boards, suggestions portal, or assist portal. We’re at all times glad to help you!

Associated blogs