DataBoundListBox SelectedItem and Continuum Transition

[Zik]

Hi.  How do I clear the currently selected item of a DataBoundListBox without screwing up transitions?

Here's the situation.  I have a DataBoundListBox with ItemsSource bound to an ObservableCollection on my view model, and the SelectedItem uses TwoWay binding with a property on my view model.  When the user clicks an item in the list box SelectedItem changes, and the view model navigates to a different page (standard "list of stuff, click on one to view details" kind of thing).  I have a Continuum transition set up, so it flies off the first page and onto the next.  Looks great.  Then when I back up the title flies back into place.

Problem is I can't click on the same item again - the item is the "selected" item so clicking on it again doesn't produce any changes that the binding can see.  So what I thought I'd do is set SelectedItem to null in the code behind (in the OnNavigatedTo method), but this causes the entire list to fade out (takes about a second).  So, my question is, when using the Continuum transition what's the proper way to clear the SelectedItem so that the list doesn't fade out?

At the top of both start and end pages I have:

<telerikPrimitives:RadTransitionControl.Transition>
    <telerikPrimitives:RadContinuumTransition />
</telerikPrimitives:RadTransitionControl.Transition>

The list box:

<telerikPrimitives:RadDataBoundListBox
    x:Name="ItemListBox"
    ItemsSource="{Binding Items}"
    ItemTemplate="{StaticResource ItemListTemplate}"
    SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
    SelectionChanged="ItemListBox_SelectionChanged">

    <telerikPrimitives:RadDataBoundListBox.ItemContainerStyle>
        <Style TargetType="telerikPrimitives:RadDataBoundListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </telerikPrimitives:RadDataBoundListBox.ItemContainerStyle>
</telerikPrimitives:RadDataBoundListBox>

private void ItemListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    RadDataBoundListBoxItem container = ItemListBox.GetContainerForItem(ItemListBox.SelectedItem) as RadDataBoundListBoxItem;
    this.SetValue(RadContinuumAnimation.ContinuumElementProperty, container);
}

Oh, I also tried "this.ClearValue(RadContinuumAnimation.ContinuumElementProperty);" in OnNavigatedTo but this also causes the list to fade out.

Suggestions?

[Deyan]

Hi Stephen,

Thanks for writing and for your questions.

Have you tried resetting the ViewModel's selected item to null immediatelly after you call the Navigate method? If that doesn't work as expected, you can try resetting it to null when the new page has been loaded (the one called when you tap on an item from the list on the previous page).

Another possibility would be to use the ItemTap event to navigate to a new page, instead of waiting for SelectedItem changes.

I hope this helps.

Regards,
Deyan
the Telerik team

[Zik]

Hi Deyan, thanks for your response.  Setting SelectedItem to null in the 'set' method of the property breaks the animation, as it doesn't allow the SelectionChanged event to occur.  But I did figure it out, a very simply change to that SelectionChanged event handler:

private void ItemListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (ItemListBox.SelectedItem != null)
    {
        RadDataBoundListBoxItem container = ItemListBox.GetContainerForItem(ItemListBox.SelectedItem) as RadDataBoundListBoxItem;
        this.SetValue(RadContinuumAnimation.ContinuumElementProperty, container);
    }
}

And actually after re-reading my original post I was explaining the problem wrong.  It's not the list that fades out, it's the entire page - there are text blocks above the list box and they too disappear.  It seems to be caused by calling 
this.SetValue(RadContinuumAnimation.ContinuumElementProperty, container); 
when container is null.  Not sure if that's a bug but now that I know I will definitely avoid :)

[Deyan]

Hello Stephen,

Thanks for getting back to me and for the details.

Good to hear that you've managed to resolve the case.

We will look into the issues that you're describing anyway.

Thanks again and do not hesitate to let us know in case you have further questions or need assistance.

Kind regards,
Deyan
the Telerik team