Changing card border

[Hunter]

Hi Syncfusion Team, 

Last night I was working with the KanbanBoard and ran into an issue. So, I'm wanting to change the border color of the card depending on what the indicator pallete property is (which I cannot find with how I tried), but I did set it up so that I could loop through each column and then loop through each card in that column. I then wanted to set the card style to a RevealBorderBrush of a color according to the indicator pallette. 

So, for instance. When my program starts to run, kanbanControl.ItemsSource = DataAccess.GetData() is called under the MainPage constructor (for MainPage.xaml), and when I run the debugger and check, the items are in the items source. The code from the snippet below after GetData() runs, but the "Cards" property returns empty, and ItemsSource returns empty. 

1. public MainPage()
2.         {
3.             this.InitializeComponent();
4.             kanbanControl.ItemsSource = DataAccess.GetData(); // Get data from database
5.  
6.             // Add reveal focus to Kanban Card Items
7.             // Set card items background color according to priority color
8.             var brush = new RevealBorderBrush();
9.             KanbanCardStyle kanbanCardStyle = new KanbanCardStyle();
10.  
11.             // Test to turn border of card to what inidicator color pallette color is
12.             foreach (var col in kanbanControl.Columns)
13.             {
14.                 foreach (var model in col.ItemsSource as ObservableCollection<KanbanModel>)
15.                 {
16.                     // Model is empty?
17.                }
18.                 foreach (var card in col.Cards) // Nothing is in col.Cards apparently
19.                 {
20.                     //brush.Color = Colors.Red;
21.                     //brush.FallbackColor = Colors.Purple;
22.                    
23.                     //brush.Opacity = 0.8;
24.                     //card.BorderBrush = brush;
25.                     card.Background = new SolidColorBrush(Colors.Blue); // TEST: DOES NOT WORK
26.                    
27.                 }
28.             }
29.  
30.             brush.Color = Color.FromArgb(255, 0, 39, 76);
31.             brush.FallbackColor = Colors.Gray;
32.             brush.Opacity = 0.8;
33.             kanbanCardStyle.CornerRadius = new CornerRadius(10.0);
34.             kanbanCardStyle.BorderBrush = brush;
35.             kanbanCardStyle.BorderThickness = new Thickness(3.0);
36.             kanbanControl.CardStyle = kanbanCardStyle;
37.         }

BUT, if I set the background color on kanbanCardStyle and set that to the CardStyle on kanbanControl, it changes the background color...? So it seems like the items just returns 0? 

Thanks for your time!

[Iyyappan Mani]

Hi Hunter, 

We have prepared the sample based on your requirement and you can able to achieve your requirement by using the DataTemplate for the Card.

 

Refer the below code snippet for the better understanding. 

Code Snippet [XAML] : 

<ResourceDictionary> 

            <local:StringToColorConvertor x:Key="stringToColorConvertor"/> 

            <DataTemplate x:Key="TagsTemplate"> 

                <Border Background="#FFEDEDED" CornerRadius="2" > 

                    <TextBlock Text="{Binding}" HorizontalAlignment="Center" 

                                          TextTrimming="CharacterEllipsis" Margin="10,1,10,1" 

                                          FontSize="10" VerticalAlignment="Center" 

                                           Foreground="#FF454545" /> 

                </Border> 

            </DataTemplate> 

 

            <DataTemplate x:Key="KanbanCardTemplate"> 

                <Border BorderBrush="{Binding ColorKey , Converter={StaticResource stringToColorConvertor}}" 

                        BorderThickness="2" 

                        CornerRadius="{Binding Tag.CardStyle.CornerRadius ,RelativeSource={RelativeSource Mode=TemplatedParent}}" 

                        MinHeight="100" 

                        Background="{Binding Tag.CardStyle.Background ,RelativeSource={RelativeSource Mode=TemplatedParent}}" 

                        MaxHeight="300" Height="Auto" Margin="0,6,0,6"> 

 

                    <Grid> 

                        <Grid.ColumnDefinitions> 

                            <ColumnDefinition Width="3*"/> 

                            <ColumnDefinition Width="1*"/> 

                        </Grid.ColumnDefinitions> 

                        <Grid Grid.Column="0" Grid.ColumnSpan="1" Margin="8,5,2,2"> 

                            <Grid.RowDefinitions> 

                                <RowDefinition Height="3*"/> 

                                <RowDefinition Height="4*"/> 

                                <RowDefinition Height="3*"/> 

                            </Grid.RowDefinitions> 

                            <TextBlock x:Name="KANBAN_Title" Grid.Row="0"  

                               TextWrapping="NoWrap" 

                               Text="{Binding Title}"  

                               TextTrimming="CharacterEllipsis" 

                               VerticalAlignment="Center" 

                               HorizontalAlignment="{Binding Tag.CardStyle.TitleHorizontalAlignment ,RelativeSource={RelativeSource Mode=TemplatedParent}}" 

                               FontSize="{Binding Tag.CardStyle.TitleFontSize ,RelativeSource={RelativeSource Mode=TemplatedParent}}"  

                               FontWeight="Bold"  

                               Foreground="{Binding Tag.CardStyle.TitleColor ,RelativeSource={RelativeSource Mode=TemplatedParent}}" /> 

 

                            <TextBlock x:Name="KANBAN_Description" Grid.Row="1" 

                                      TextWrapping="Wrap" MaxHeight="50" 

                                      Text="{Binding Description}" 

                                      TextTrimming="CharacterEllipsis" 

                                      FontSize="{Binding Tag.CardStyle.FontSize ,RelativeSource={RelativeSource Mode=TemplatedParent}}"  

                               Foreground="{Binding Tag.CardStyle.Foreground ,RelativeSource={RelativeSource Mode=TemplatedParent}}" 

                                      HorizontalAlignment="Left" VerticalAlignment="Center"  

                                      Height="Auto" /> 

 

                            <ScrollViewer Grid.Row="2" Grid.ColumnSpan="1" VerticalAlignment="Bottom" 

                                  Margin="0,4,0,2" 

                                  Visibility="{Binding Tag.CardStyle.TagVisibility ,RelativeSource={RelativeSource Mode=TemplatedParent}}" 

                                  HorizontalScrollBarVisibility="Hidden" 

                                  VerticalScrollBarVisibility="Disabled"> 

 

                                <kanban:TagsStackPanel x:Name="KANBAN_TagsPanel"  

                                          Orientation="Horizontal" 

                                          ContentTemplate="{StaticResource TagsTemplate}" 

                                          TagsCollection="{Binding Tags}" 

                                          DataContext="{Binding}" Height="Auto"  > 

 

                                </kanban:TagsStackPanel> 

                            </ScrollViewer> 

                        </Grid> 

 

                        <Grid Grid.Column="1"> 

                            <Grid.RowDefinitions> 

                                <RowDefinition Height="*"/> 

                                <RowDefinition Height="3*"/> 

                                <RowDefinition Height="1*"/> 

                            </Grid.RowDefinitions> 

 

                            <Border BorderBrush="#FFE4E5E6" BorderThickness="1.5" 

                                        Grid.Row="1" x:Name="KANBAN_ProfileIcon" 

                                        CornerRadius="50"   

                                        Visibility="{Binding Tag.CardStyle.IconVisibility ,RelativeSource={RelativeSource Mode=TemplatedParent}}" 

                            Height="50" Width="50" 

                            HorizontalAlignment="Left" VerticalAlignment="Center" > 

                                <Border.Background> 

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

                                </Border.Background> 

                            </Border> 

 

                            <Border Grid.Row="2" BorderThickness="0" CornerRadius="0,0,6,0" Margin="0,0,-1,-1" 

                            Height="30" Width="30" 

                            Visibility="{Binding Tag.CardStyle.IndicatorVisibility ,RelativeSource={RelativeSource Mode=TemplatedParent}}" 

                            DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" 

                            HorizontalAlignment="Right"> 

                                <Border.Background> 

                                    <LinearGradientBrush EndPoint="1,1" StartPoint="0,0"> 

                                        <GradientStop Color="Transparent" Offset="0.5" /> 

                                        <GradientStop Color="{Binding Tag.IndicatorColor}" Offset="0.5" /> 

                                    </LinearGradientBrush> 

                                </Border.Background> 

                            </Border> 

                        </Grid> 

                    </Grid> 

                </Border> 

            </DataTemplate> 

        </ResourceDictionary> 

 

<Grid> 

        <Grid.DataContext> 

            <local:TaskDetails></local:TaskDetails> 

        </Grid.DataContext> 

        <kanban:SfKanban x:Name="Kanban" ItemsSource="{Binding Tasks}" CardTemplate="{StaticResource KanbanCardTemplate}"> 

 

</kanban:SfKanban> 

         

</Grid> 

Code Snippet [C#]: 

public class StringToColorConvertor : IValueConverter 

       { 

              public object Convert(object value, Type targetType, object parameter, string language) 

              { 

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

                      { 

                             return new SolidColorBrush(Colors.Blue); 

                      } 

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

                      { 

                             return new SolidColorBrush(Colors.Green); 

                      } 

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

                      { 

                             return new SolidColorBrush(Colors.Red); 

                      } 

                      return new SolidColorBrush(Colors.Transparent); 

              } 

 

              public object ConvertBack(object value, Type targetType, object parameter, string language) 

              { 

                      return value; 

              } 

       } 

The sample can be downloaded from the link below.  

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/KanbanCardStyle1532105880  

Feel free to contact us if you need any further assistance on this.  

Regards, 

Iyyappan M.

[Hunter]

That works perfectly!!

Thank you very much :) 

[Muneesh Kumar G]

Hi Hunter,  

 

Thanks for the update. 

  

We are glad to know that the given solution works. Please let us know if you need any further assistance. 

 

Thanks, 

Muneesh Kumar G.