Removing an item from the ItemsSource always removes the last card in the UI, regardless of the item's index in the ItemsSource. For example, if you remove an item at index 0, the last visual element (card) will be removed instead of the first one in the view.
To resolve the issue, you can reset the ItemsSource of the RadCardView control after the collection changed action.
var source = this.cardView.ItemsSource;
this.cardView.ItemsSource = null;
this.cardView.ItemsSource = source;
If the CardView control is focused and the Enter key is pressed NullReferenceException appears.
To resolve this use ICollectionView (like QueryableCollectionView) as the ItemsSource of the control.
Expose Expand and Collapse events, which will occur when a RadCardViewItem element is either collapsed or expanded.
Currently, to achieve this behavior, subscribe to the Loaded event of the RadCardView control, and add two new event handlers via the AddHandler method.
For the first handler, which will be responsible for occurring when expanding, pass as a first argument RadExpander.ExpandedEvent. As a second parameter, create a new RoutedEventHandler instance with a method, which will fire the custom logic when the internal RadExpander element of the current RadCardView is getting expanded.
For the second added event handler, which will be responsible for the collapsing logic, the same approach as the abovementioned one could be used.
The following code snippet shows this approach's implementation:
private void CardView_Loaded(object sender, RoutedEventArgs e)
{
this.cardView.AddHandler(RadExpander.ExpandedEvent, new RoutedEventHandler(Expanded));
this.cardView.AddHandler(RadExpander.CollapsedEvent, new RoutedEventHandler(Collapsed));
}
private void Expanded(object sender, RoutedEventArgs e)
{
var expander = e.OriginalSource as RadExpander;
//Get clicked CardViewItem element
var cardViewItem = expander.ParentOfType<RadCardViewItem>();
}
private void Collapsed(object sender, RoutedEventArgs e)
{
var expander = e.OriginalSource as RadExpander;
//Get clicked CardViewItem element
var cardViewItem = expander.ParentOfType<RadCardViewItem>();
}
Add property that sets the background of the card's header. Currently to do that you need to edit the ControlTemplate of the RadExpander element in the ControlTemplate of RadCardViewItem. Or use code-behind to find the corresponding Border element and assign its value.
The new property could be set on RadCardView or on the RadCardViewItems.
The following example shows how to set the Background in code:
static MainWindow()
{
EventManager.RegisterClassHandler(typeof(RadCardViewItem), RadCardViewItem.LoadedEvent, new RoutedEventHandler(OnRadCardViewItemLoaded));
}
private static void OnRadCardViewItemLoaded(object sender, RoutedEventArgs e)
{
var item = (RadCardViewItem)sender;
var headerBorder = item.ChildrenOfType<Border>().FirstOrDefault(x => x.Name == "HeaderPanel");
if (headerBorder != null)
{
headerBorder.Background = Brushes.Red;
}
}
The bottom of the card that shows the validation summary is missing (overlapped by the summary visual) when the Expression_Dark theme is used.
To work this around, you can set the Margin of the DataFormValidationSummary element to 0, via an implicit style defined in the RadCardView.Resources dictionary.
<telerik:RadCardView.Resources>
<Style TargetType="dataForm:DataFormValidationSummary">
<Setter Property="Margin" Value="0" />
</Style>
</telerik:RadCardView.Resources>