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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Changing card border

Thread ID:

Created:

Updated:

Platform:

Replies:

145206 Jun 12,2019 12:18 PM UTC Jun 17,2019 05:55 AM UTC UWP 3
loading
Tags: SfKanban
Hunter
Asked On June 12, 2019 12:18 PM UTC

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(25503976);
  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 [Syncfusion]
Replied On June 14, 2019 06:03 PM UTC

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.  


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

Regards, 
Iyyappan M.

Hunter
Replied On June 14, 2019 07:37 PM UTC

That works perfectly!!

Thank you very much :) 

Muneesh Kumar G [Syncfusion]
Replied On June 17, 2019 05:54 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon