Swimlane in UWP Kanban Board

18 Nov 20188 minutes to read

Swimlanes are horizontal categorizations that allow you to categorize your current workflow by different projects, teams, users, or other grouping criteria.

By default, it will be categorized based on Assignee values in KanbanModel class. You can also define category by mapping the SwimlaneKey to appropriate property name in the defined data model.

The following code example shows how to group the underlying data collection based on SwimlaneKey.

XAML

<kanban:SfKanban SwimlaneKey="ColorKey"
                 x:Name="Kanban"
                 ItemsSource="{Binding Tasks}">
    <kanban:SfKanban.DataContext>
        <local:TaskDetails/>
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>

C#

this.Kanban.SwimlaneKey = "ColorKey";

If there is no value assigned for the SwimlaneKey mapped property in an item, then it will be grouped under the Unassigned swimlane.

Customization

Customize the header displayed before each swimlane group using the SwimlaneHeaderTemplate property. The following code example displays image along with name.

XAML

<kanban:SfKanban x:Name="Kanban" ItemsSource="{Binding Tasks}">
    <kanban:SfKanban.SwimlaneHeaderTemplate>
        <DataTemplate>
            <Grid>

                <Border BorderBrush="LightGray" BorderThickness="1" Width="{Binding ElementName=Kanban, Path=ActualWidth}" Height="1">

                </Border>

                <Border BorderBrush="Black" CornerRadius="5,5,5,5" Width="150" Margin="10,2,10,0" HorizontalAlignment="Left" >

                    <StackPanel Background="LightGray" x:Name="SwimlaneHeaderPanel"   Orientation="Horizontal">

                        <Grid x:Name="CollapsedIcon" Background="Transparent"

                                Height="30" Width="30">

                            <Path x:Name="ExpandedPath" IsHitTestVisible="False"

                                    Data="M30.587915,0L31.995998,1.4199842 15.949964,17.351 0,1.4979873 1.4099131,0.078979151 15.949964,14.53102z" 

                                    Stretch="Uniform" Fill="#FF000000" Width="14" Height="14" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">

                                <Path.RenderTransform>

                                    <TransformGroup>

                                        <TransformGroup.Children>

                                            <RotateTransform Angle="0" />

                                            <ScaleTransform ScaleX="1" ScaleY="1" />

                                        </TransformGroup.Children>

                                    </TransformGroup>

                                </Path.RenderTransform>

                            </Path>

                            <Path x:Name="CollapsedPath" Visibility="Collapsed" IsHitTestVisible="False"

                                    Data="M1.4200482,0L17.351001,16.046996 1.4980513,31.996001 0.078979631,30.585997 14.531046,16.046019 0,1.4089964z" 

                                    Stretch="Uniform" Fill="#FF000000" Width="14" Height="14" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">

                                <Path.RenderTransform>

                                    <TransformGroup>

                                        <TransformGroup.Children>

                                            <RotateTransform Angle="0" />

                                            <ScaleTransform ScaleX="1" ScaleY="1" />

                                        </TransformGroup.Children>

                                    </TransformGroup>

                                </Path.RenderTransform>

                            </Path>

                        </Grid>

                        <TextBlock FontWeight="Medium" IsHitTestVisible="False" FontSize="15" FontStretch="Expanded" TextWrapping="NoWrap"
                                    
                                    VerticalAlignment="Center" Text="{Binding Title}" />

                    </StackPanel>

                </Border>                      

            </Grid>
        </DataTemplate>
    </kanban:SfKanban.SwimlaneHeaderTemplate>
</kanban:SfKanban>