DataBoundListBox SelectedItem and Continuum Transition

4 posts, 0 answers
  1. Zik
    Zik avatar
    18 posts
    Member since:
    Mar 2012

    Posted 30 Mar 2012 Link to this post

    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?
  2. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 30 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Zik
    Zik avatar
    18 posts
    Member since:
    Mar 2012

    Posted 30 Mar 2012 Link to this post

    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 :)
  5. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 02 Apr 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top