Category / Section
How to add shadow effects card for UWP Kanban control
5 mins read
This article explains how to show shadow effects for Syncfusion UWP Kanban control cards as shown in the following image.
This has been achieved by getting the children from its control Loaded event with added show effect as shown in the following code sample.
[XAML]
<Grid.Resources> <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> <!--Default Card Template--> <DataTemplate x:Key="DefaultKanbanCardTemplate"> <Grid Loaded="Grid_Loaded"> <Canvas x:Name="Shadow"></Canvas> <Border BorderBrush="{Binding Tag.CardStyle.BorderBrush ,RelativeSource={RelativeSource Mode=TemplatedParent}}" BorderThickness="{Binding Tag.CardStyle.BorderThickness ,RelativeSource={RelativeSource Mode=TemplatedParent}}" 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" > … </Border> </Grid> </DataTemplate> </Grid.Resources> <kanban:SfKanban x:Name="Kanban" CardTemplate="{StaticResource DefaultKanbanCardTemplate}" ItemsSource="{Binding Tasks}" CardTapped="Kanban_CardTapped" AutoGenerateColumns="True"> </kanban:SfKanban>
[C#]
MainWindow.xaml.cs
private void Grid_Loaded(object sender, RoutedEventArgs e) { Grid rootGrid = sender as Grid; Canvas shadow = null; Border border = null; foreach (UIElement child in rootGrid.Children) { if (child is Canvas) { shadow = child as Canvas; } else { border = child as Border; //To apply selected card style. if (previousCard != null && (previousCard.Content as KanbanModel).Equals(rootGrid.DataContext as KanbanModel)) { rootGrid.Background = new SolidColorBrush(Colors.Orange); ((child as Border).FindName("KANBAN_Title") as TextBlock).Foreground = new SolidColorBrush(Colors.Red); ((child as Border).FindName("KANBAN_Description") as TextBlock).Foreground = new SolidColorBrush(Colors.Red); } } } var compositor = ElementCompositionPreview.GetElementVisual(border).Compositor; SpriteVisual spriteVisual = compositor.CreateSpriteVisual(); spriteVisual.Size = new Vector2((float)border.ActualWidth, (float)border.ActualHeight); var dropShadow = compositor.CreateDropShadow(); dropShadow.Offset = new Vector3(10, 10, 10); dropShadow.Color = Colors.LightGray; spriteVisual.Shadow = dropShadow; ElementCompositionPreview.SetElementChildVisual(shadow, spriteVisual); }
See also
How to customize the placeholder in UWP Kanban Board (SfKanban)
How to customize the kanban cards in UWP Kanban Board (SfKanban)
How to populate the kanban column with kanban cards from different categories
How to customize the Kanban column header
How to expand and collapse the Kanban column