We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Using IndicatorColorPalette in customized CardTemplate

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>

3 Replies

SS SaiGanesh Sakthivel Syncfusion Team December 5, 2022 11:28 AM UTC

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



PE Peter replied to SaiGanesh Sakthivel February 1, 2023 11:55 PM UTC

Hi Sai,


Do you have an example of this ?

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


Regards


Peter



SS SaiGanesh Sakthivel Syncfusion Team February 2, 2023 12:11 PM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon