Using IndicatorColorPalette in customized CardTemplate

[Marco Uffelmann]

Hi,

The IndicatorColorPalette is not showing in a customized CardTemplate. This is my XAML. What is wrong?

Thank you in advance

<Kanban:SfKanban x:Name="kanBoxes"
 Grid.Row="1"
 MinColumnWidth="150"
 ItemsSource="{Binding ListOfDocumentsInBoxes}"
 ColumnMappingPath="Category"
 AllowDrop="True">


<Kanban:SfKanban.IndicatorColorPalette>
<Kanban:ColorMapping Key="Low" Color="Blue"/>
<Kanban:ColorMapping Key="Normal" Color="Green" />
<Kanban:ColorMapping Key="High" Color="Red" />
</Kanban:SfKanban.IndicatorColorPalette>


<Kanban:SfKanban.CardTemplate>
<DataTemplate>
<Border BorderBrush="Black"  BorderThickness="0.75" Background="Transparent" CornerRadius="10" Margin="0,5,0,5">
<Border.ToolTip>
<TextBlock FontSize="20" HorizontalAlignment="Stretch"  Text="{Binding ID}"/>
</Border.ToolTip>
<Grid Margin="10,5,5,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>


<StackPanel Grid.Column="0" Orientation="Vertical">
<TextBlock Text="{Binding Path=Title}"  FontWeight="Bold"  FontSize="16" />
<TextBlock FontSize="14" HorizontalAlignment="Left"  Text="{Binding Description}"  TextWrapping="Wrap"/>
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical">
<syncfusion:ButtonAdv x:Name="btnKanMoveDocToBox" HorizontalAlignment="Right" Width="30" Height="30" SizeMode="Small" Label="Move to box" SmallIcon ="Icons\80.png" Click="btnKanMoveDocToBox_Click"/>
<syncfusion:ButtonAdv x:Name="btnKanRemoveDocFromBox" HorizontalAlignment="Right" Width="30" Height="30" SizeMode="Small" Label="Move to box" SmallIcon ="Icons\19.png" Click="btnKanRemoveDocFromBox_Click" Margin="0,10,0,0"/>
<Border Height="50" CornerRadius="50" Width="50" BorderBrush="Silver" BorderThickness=".75" Margin="0,10,0,0">
<Border.Background>
<ImageBrush ImageSource="{Binding ImageURL}" TileMode="None" Stretch="None" />
</Border.Background>
</Border>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</Kanban:SfKanban.CardTemplate>
</Kanban:SfKanban>

[SaiGanesh Sakthivel]

Hi Macro,

#Regarding IndicatorColorPalette is not shown in the custom card template

As per the implementation of SfKanban, the IndicatorColorPalette will shown only for the default card template in the SfKanban. For the custom template, you need to add the custom indicatorColorPalette as per your requirement.

Regards,
SaiGanesh Sakthivel

[Peter]

Hi Sai,

Do you have an example of this ?

"you need to add the custom indicatorColorPalette as per your requirement"

Regards

Peter

[SaiGanesh Sakthivel]

Hi Peter,

You can add the custom indicatorColorPalette as per your requirement with the help of CardTemplate support in the Kanban. With the help of converter class, you can customize the background of the custom indicatorColorPalette. Please refer to the code snippet for your reference.

Code snippet

<Window.Resources>

    <local:IndicatorColorPaletteConverter x:Key="ColorPalette"/>

</Window.Resources>

 

<syncfusion:SfKanban.CardTemplate>

    <DataTemplate>

        <Border BorderBrush="Black"

    BorderThickness="0.75"

    CornerRadius="10"

    Background="AliceBlue"

    Margin="0,5,0,5">

            <Grid >

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="7*" />

                    <ColumnDefinition Width="3*" />

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="auto" />

                    <RowDefinition Height="auto" />

                    <RowDefinition Height="1*"/>

                </Grid.RowDefinitions>

                <TextBlock Text="{Binding Path=Title}" Padding="10,5,5,10"

                FontWeight="Bold"

                FontSize="16" />

                <TextBlock Grid.Row="1"

                FontSize="14" Padding="10,5,5,10"

                HorizontalAlignment="Left"

                Text="{Binding Description}"

                TextWrapping="WrapWithOverflow" />

                <Border Grid.Row="1"

            Grid.Column="1"

            Height="50"

            CornerRadius="50"

            Width="50"

            BorderBrush="Silver"               

            BorderThickness=".75">

                    <Border.Background>

                        <ImageBrush ImageSource="{Binding ImageURL}"  />

                    </Border.Background>

                </Border>

                <Border Grid.Row="3"  Grid.Column="1"

                BorderThickness="0"

                CornerRadius="0,0,7,0"

                Height="10"

                Width="30"

                HorizontalAlignment="Right"

                           

                VerticalAlignment="Bottom"

                Background="{Binding Path= ColorKey, Converter={StaticResource ColorPalette}}">

                </Border>

            </Grid>

        </Border>

    </DataTemplate>

</syncfusion:SfKanban.CardTemplate>

Inside IndicatorColorPaletteConverter class

public class IndicatorColorPaletteConverter : IValueConverter

{

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

    {

        if (value.ToString() == "Low")

        {

            return Brushes.Yellow;

        }

        else if (value.ToString() == "Normal")

        {

            return Brushes.Green;

        }

        else if (value.ToString() == "High")

        {

            return Brushes.Red;

        }

 

        return value;

    }

 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

    {

        return value;

    }

}

Please refer to the demo sample in the following locations.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WPFKanban-636165510

Please let us know if you have any concerns.

Regards,
SaiGanesh Sakthivel