Compare the Top Item with Currently Clicked item in RadCarouselPanel

9 posts, 0 answers
  1. Ela
    Ela avatar
    12 posts
    Member since:
    Jul 2010

    Posted 02 Aug 2010 Link to this post

    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
  2. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 03 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Ela
    Ela avatar
    12 posts
    Member since:
    Jul 2010

    Posted 03 Aug 2010 Link to this post

    Thanks Maya. I would try it
  5. Ela
    Ela avatar
    12 posts
    Member since:
    Jul 2010

    Posted 04 Aug 2010 Link to this post

    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
  6. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 05 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Ela
    Ela avatar
    12 posts
    Member since:
    Jul 2010

    Posted 05 Aug 2010 Link to this post

    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
  8. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 05 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Ela
    Ela avatar
    12 posts
    Member since:
    Jul 2010

    Posted 05 Aug 2010 Link to this post

    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
  10. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 06 Aug 2010 Link to this post

    Hi Ela,

     Unfortunately such feature currently is not supported. 

    Regards,
    Vlad
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for WPF is Visual Studio 2017 Ready