Display item in center of path

[Scott]

I have a horizontal path that my RadCarouselPanel follows.  When there are only 1 or 2 items bound to my ListBox (where the RadCarouselPanel is), I want the items to appear in the center of my path instead of on the left side.  Is there a way to tell an item to appear in the center of the path?

[Milan]

Hi Scott,

RadCarouselPanel has a method called BringItemIntoView that moves an item to the center of the path but it is declared as internal in the current WPF release. The method will be public in our next release.
If the absence of this method in our public API is an impediment to your work we can send you a custom build where that method is available. You may request a custom build by openning a support ticket.

Regards,
Milan
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Scott]

Thank you for the build.  My code works now, just as your example does.  When I click on a ListBox item, that is not in the center, the carousel is rotated to bring that one into the center.

The problem that remains is that say I have only 2 items in my ListBox.  When the ListBox is bound, the carousel shows my two items right at the beginning of my path and does not bring either one of them to the center.  In these cases, the user can't even see my items because the opacity is set lower for items at the ends of my paths.  So to fix, I tried to select the center item in my ListBox programmatically.  This fires my OnItemSelected event and finds the panel and the correct item, however, it does nothing to the carousel but show that my item was selected.  It doesn't rotate it to the center like I want.

        private void OnItemSelected(object sender, RoutedEventArgs e)
        {
            // the UIElement that was selected
            ListBoxItem item = (ListBoxItem) e.OriginalSource;
            RadCarouselPanel panel = GetCarouselPanel(sender as ItemsControl);
            panel.BringItemIntoView(item, true);
        }

my bind method:

                        RadCarouselPanel panel = this.GetCarouselPanel(lstThumbsCarousel);

                        if (panel != null)
                        {
                            int count = lstThumbsCarousel.Items.Count;
                            if (count > 0)
                            {
                                int midPoint = count / 2;
                                lstThumbsCarousel.SelectedItem = lstThumbsCarousel.Items[midPoint];
                            }

                        }

[Jimmy]

Hi Scott,

I have managed to reproduce your problem -- it is triggered by the OnItemSelected event Handler. It happens because your two items are right at the beginning of your path(really because you actually have no other items on the path). Since RadCarouselPanel has no knowledge of the selection (this logic should come from its parent, in your case this is your ListBox control that hosts RadCarouselPanel), it will not try and bring any item into view as it is loaded. This has to be done manually by calling  the either BringItemIntoView() or BringDataItemIntoView() methods, or any of the IScrollInfo methods for that matter they will all realize and bring your data into view.

Now the difference beween using BringItemIntoView() or BringDataItemIntoView() is that the first will look for the item in the RadCarouselPanel Children collection. That means you can use the method only with realized items. The second method will use the items generator to find the right data item in the ItemsControl Children Collection (your ListBox children collection).

However the BringDataItemIntoView(), formerly an internal method, was never meant to work in scenarios where initially you'll have no realized items like it is your case. For this reason we have made some changes to cover such situations. We have a new build reflecting these changes that could be sent to you. To do that please open a new support ticket.
 
If you decide to go that route, you could modify your OnItemSelected event handler so that it calls the BringDataItemIntoView() (not the BringItemIntoView()) method at the end. This will select and bring into view the right CarouselItem.

private void OnItemSelected(object sender, RoutedEventArgs e)
{
    // the UIElement that was selected
    ListBoxItem item = (ListBoxItem) e.OriginalSource;
    RadCarouselPanel panel = GetCarouselPanel(sender as ItemsControl);
    panel.BringDataItemIntoView(((ListBox)sender).SelectedItem);
}

Sorry for the inconvenience, and thanks for helping improve our product!

Best wishes,

Jimmy

the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Maria Im]

Is there a way i can remove the opacity to items that are not in the center? I want a solid background to all carouselitem. No transparency. i tried all sorts of things and the magic didnt happen.

[Milan]

Hi Maria Im,

If you would like to disable the opacity effect all together you can use the IsOpacityEnable property of RadCarouselPanel. When that property is set to false all items will be opaque.

If you would like to to control the opacity of the items along the path you should use the OpaityStops collection of RadCarouselPanel. Our carousel sample called RadCarouselPanel demonstrates how different effects like opacity, scaling, etc can be controlled.

I have also prepared a small sample application that demonstrates how you can configure the carousel to render all items that are not in the center as transparent.

Hope this information is helpful. 

Best wishes,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Maria Im]

Thanks. That solved my problem.