Compare the Top Item with Currently Clicked item in RadCarouselPanel

[Ela]

Hi,

I'm new to Telerik Controls. I'm trying to use the carousel controls in Expression Blend 4; having the few questions below

- Unlike the RadCaruosel for WinForm, I couldn't specify the eliptical path for the carousel items in Expression Blend (and VS2010), on WPF. Is that a limitation on this control for WPF currently? If not, how can I set the eliptical path (at design time)
- I've 8 items on the Carousel control (I tried it on Carousel and CarouselPanel), but only 5 are visible at a time. Other three would scroll in when I click the item near to them. Is there a way I can show all the 8 controls on my real estate?

Lastely, How can I compare and identify whether the user clicked on the top most item on the Carousel Panel? For example, out of my 8 items, if the user clicks on the item 6 it would be made as the top item. When the user clicks on it again, I want to identify it and perform some action.

Thanks in advance.
Ela

[Maya]

Hello Ela,

There is no problem to use Expression Blend for manipulating RadCarousel Control. As for setting up the Path property, you need first to specify the ItemsPanelTemplate, inside which is the RadCarouselPanel. RadCarouselPanel has a Property "Path" - the one you need to work with. After specifying it, you can apply it as a DynamicResource for the ItemsPanel Property of the RadCarousel. For example:

<Window.Resources>
 <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
    <telerik:RadCarouselPanel>
        <telerik:RadCarouselPanel.Path>
                <Path Data="M35,524C419,567 520.5,776.5 418.5,566.5 316.5,356.5 9.49998250786831,395.499800247754 316.500193099418,356.499739622559"/>
        </telerik:RadCarouselPanel.Path>
    </telerik:RadCarouselPanel>
 </ItemsPanelTemplate>
</Window.Resources>

    <Grid x:Name="LayoutRoot">
        <telerik:RadCarousel Margin="0,0,-0.001,0" ItemsPanel="{DynamicResource ItemsPanelTemplate1}"/>
    </Grid>

The data specified here for the Path property is just a sample. You can define whatever type of path you want. 
Furthermore, you can find more examples on working with the properties of the RadCarouselPanel in our online demos.
As for the second question, you can specify the property ItemsPerPage and set it to the desired number - in your case - 8. 
And lastly, for working with the frontmost item in the panel, you may use the TopContainer - RadCarouselPanel.TopContainer.

Best wishes,
Maya
the Telerik team

[Ela]

Thanks Maya. I would try it

[Ela]

Hi Maya,

I tried the path you had provided, on RadCarouselPanel and it worked. Thanks!!!

Have few more help-needed items.
- I don’t understand the numbers given in the Path data string. How to arrive those numbers. If I need an elliptical path, how can I get the numbers for it (my requirement is to have a elliptical path)

- How can I set the elliptical path on RadCarousel control? Is it possible?

Thanks
Ela

[Maya]

Hello Ela,

When drawing the desired look of the path in Expression Blend, you will get this sequence of numbers in the field Data of the property Path in the RadCarouselPanel Template. So, when editing this template, you can sketch whatever path you want and the data will be configured automatically.
However, the property Path belongs to the RadCarouselPanel, so you cannot apply it directly to the RadCarousel.

 

All the best,
Maya
the Telerik team

[Ela]

Thanks Maya.

When I tried manipulating the Data field, I'm not getting the desired results. I know I'm missing something. Could you please provide me the elliptical path data?

Also, do you meant to say that we cannot achieve the elliptical path in RadCarousel?

Thanks
Ela

[Maya]

Hello Ela,

The elliptical path is the default one. The data for it in the ItemsPanelTemplate is as follows:

<Window.Resources>
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
            <telerik:RadCarouselPanel>
                <telerik:RadCarouselPanel.Path>
                    <Path Data="M639,-115.5 C702,-106.5 666.49972,-35 491.49972,-35 300.4994,-35 293.49973,-116 343.50004,-116" Stretch="Fill" Height="200"/>
                </telerik:RadCarouselPanel.Path>
            </telerik:RadCarouselPanel>
        </ItemsPanelTemplate>
    </Window.Resources>

  
Furthermore, depending on your requirements, you may set the properties Height, Stretch, etc.
 

Best wishes,
Maya
the Telerik team

[Ela]

Thanks Maya.

I think I didnt put my question right. The default path available on the Carousel Panel & Carousel is Semi-elliptical path. Isn't it possible to have a full-elliptical path (so that all the items in my carousel would be visible at one shot)? Currently, if my set the itemsperpage as 8 (i've total of 8 items), it loads all the 8 items. But, when I navigate through the items, the left or right most items re vanishing (because the path is not full-elliptical). Am I making any sence?

Is there any way to show a full-elliptical path, as available in WinForms?

Thanks
Ela

[Vlad]

Hi Ela,

 Unfortunately such feature currently is not supported. 

Regards,
Vlad
the Telerik team