Expanding and collapsing a card when item source changed

[Peter]

Hello,

I want programmatically expand/collapse cards when the item source of the card view changed.

Can you advise me an event to do that?

regards,

Tobias

[Stenly]

Hello Tobias,

The RadCardView control's API does not provide an event, which occurs when the ItemsSource property is changed. However, you could achieve the desired result, by adding an additional event handler to the ItemsSource property. For example, this logic could be implemented inside the Loaded event of the RadCardView control. In it, the ItemsSource property could be retrieved by using the GetProperties static method of the TypeDescriptor class. On the returned PropertyDescriptor class, utilize its AddValueChanged method, and as a first parameter pass the RadCardView control instance, and for the second, an event in which the expand and collapse logic could be implemented.

The following code snippets show the Loaded event as well as the newly added event handler's implementation:

public MainWindow()
{
    InitializeComponent();
    this.cardView.Loaded += CardView_Loaded;
}

private void CardView_Loaded(object sender, RoutedEventArgs e)
{
    var cardViewSender = (RadCardView)sender;
    var itemsSourceProperty = TypeDescriptor.GetProperties(cardViewSender)["ItemsSource"];
    itemsSourceProperty.AddValueChanged(cardViewSender, new EventHandler(CardView_ItemsSourceChanged));
}

private void CardView_ItemsSourceChanged(object sender, EventArgs e)
{
    if (this.cardView.ItemsSource != null)
    {
        foreach (var item in this.cardView.ItemsSource as ObservableCollection<CardInfo>)
        {
            this.cardView.Collapse(item);
        }
    }
}

With that said, I have attached a sample project, so, could you give it a try?

Regards,
Stenly
Progress Telerik

[Peter]

That works, thanks!

Another thing: Is there an event when the user expands/collapses a card?

[Stenly]

Hello Tobias,

The RadCardView control does not expose events for when a RadCardViewItem element is either getting collapsed or expanded. However, you could still achieve the desired result and one way of doing so is by extracting the default control template of the RadCardViewItem element. Inside of the control template, the CardViewDataForm, which represents the data, is hosted inside a RadExpander element, which exposes the Expanded and Collapsed events. You could utilize these events, in order to achieve the desired result. Finally, create a new Style with TargetType="RadCardViewItem", and set the modified control template to the Template property, via a Setter.

The following code snippet shows the extracted control template from the Office_Black theme (if another theme is used, you would need to extract it from there):

<ControlTemplate x:Key="RadCardViewItemTemplate" TargetType="telerik:RadCardViewItem">
    <telerik:RadExpander
    Header="{TemplateBinding Header}"
    BorderBrush="{TemplateBinding BorderBrush}"
    Background="{TemplateBinding Background}"
    BorderThickness="{TemplateBinding BorderThickness}"
    HeaderTemplate="{TemplateBinding HeaderTemplate}"
    Style="{StaticResource CardViewItemExpanderStyle}"
    Expanded="OnCardArrowClicked"
    Collapsed="OnCardArrowClicked"
    IsExpanded="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}">
        <telerik1:CardViewDataForm x:Name="PART_CardViewDataForm" BorderThickness="0" Background="Transparent" BorderBrush="Transparent" FocusVisualStyle="{x:Null}" CurrentItem="{Binding Data}"/>
    </telerik:RadExpander>
</ControlTemplate>

Sample event implementation, which is set to both the Expanded and Collapsed events:

private void OnCardArrowClicked(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    var expander = (RadExpander)sender;

    if (expander.IsExpanded)
    {
        MessageBox.Show("Expanded");
    }
    else
    {
        MessageBox.Show("Collapsed");
    }
}

The Style's implementation:

<!--If the NoXaml version of the assemblies: BasedOn="{StaticResource RadCardViewItemStyle}"-->
<Style TargetType="telerik:RadCardViewItem">
    <Setter Property="Template" Value="{StaticResource RadCardViewItemTemplate}"/>
</Style>

With that said, I have modified the sample project from my previous reply, so, could you give it a try?

Regards,
Stenly
Progress Telerik