Cannot display anything with RadCarouselPanel

[Tommy]

Just trying to get the simplest application to work with RadCarouselPanel to display anyting. I have put StackPanels, Labels, Buttons, etc... between the <RadCarouselPanel></RadCarouselPanel> tags - nothing displays when I run the WPF application.

RadCarousel, on the otherhand, works fine.

Thanks in advance for any help.

[Jimmy]

Hi Tommy ,

I believe your problem appears because you are trying to give RadCarouselPanel a number of visual children that is less than the RadCarouselPanel.ItemsPerPage property (by default it is set to five). Up to present RadCarouselPanel will not bring into view any of its children if the Items.Count property is less than or equal to the RadCarouselPanel.ItemsPerPage property. To fix this problem you will have to move the items manually using either the public RadCarouselPanel.MoveBy(int displacement) methodod any of the IScrollInfo methods thet our RadCarouselPanel implements, for example RadCarouselPanel.PageDown() that will scroll as many children as the RadCarouselPanel.ItemsPerPage property is set to.

Below is a possible solution that might help solve your issues.

  <Grid x:Name="container" Loaded="container_Loaded" >
        <telerik:RadCarouselPanel x:Name="carousel" ItemsPerPage="4" >
            <Button>button 1</Button>
            <Button>button 2</Button>
            <Button>button 3</Button>
        </telerik:RadCarouselPanel>
    </Grid>

... and in the code-behind you might have something like this:

 

   void container_Loaded(object sender, RoutedEventArgs e)
        {
            ((RadCarouselPanel) this.carousel).PageDown();
        }

This will move every item by four positions thus having the first button to the far left side and leaving the far right position empty.

If you want the children to animate by a custom displacement when the control is loaded, use the RadCarouselPanel.MoveBy(int displacement) method by passing to it the desired displacement. In my example I will pass a displacement of two, which will cause the panel to bring into view the first two buttons which will appear on the right side.

 

void container_Loaded(object sender, RoutedEventArgs e)
        {
            ((RadCarouselPanel) this.carousel).MoveBy(2);
        }

Hope this works well for you!

All the best,

Jimmy

the Telerik team

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

[Rayne]

Is there a way to bind the ItemsPerPage to a property or check it and modify it whenever the collection changes?

Most of the time, my collection will have very few items and I don't want my users to have to scroll to see the items. I want them on the page when it loads. I'd like to be able to bind this number, so that I can check the number of items in the collection. If it's less than 5, changes items per page to that number, otherwise leave it at the default of 5. Items will be added/removed from the bound collection at runtime.

[Maya]

Hello Rayne,

There should be no problem to bind the ItemsPerPage property of the RadCarouselPanel. I am sending you a sample project illustrating a possible approach for setting the binding. However, if you are using directly RadCarouselPanel, not RadCarousel, you may bind the ItemsPerPage directly in xaml.
Let me know in case you need any further assistance.
 

Greetings,
Maya
the Telerik team