Menu 3D with RadCarousel

5 posts, 0 answers
  1. CHRISTIAN GINCHELEAU
    CHRISTIAN GINCHELEAU avatar
    7 posts
    Member since:
    Nov 2008

    Posted 27 Nov 2009 Link to this post

    Hello,

    I am currently studying a solution in order to create a 3D menu similar to the menu of the PS3 from Sony.
    For this, I use an horizontal RadCarousel to simulate my main menu.
    I would like to insert for each item of this horizontal RadCarousel a new RadCarousel but vertically to simulate a sub menu.
    Is this possible?

    Other difficulties on the RadCarousel :
    - How to make the first or the last selected item when I scroll ?
    - Is it possible to disable the effect of depth RadCarousel ?

    Thanks

  2. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 02 Dec 2009 Link to this post

    Hello CHRISTIAN GINCHELEAU,

    I am not sure you you will be able to exactly match the PS3 3D menu but I am sending you a sample project for starters. It demonstrates how you can place a carousel inside carousel items.

    To turn off the depth effect you just have to set the IsScalingEnabled of the carousel panel to false. 
    You can easily scroll to a specific item of the carousel by using BringDataItemIntoView. For example:

    // scroll to the last item
    this.radCarousel.BringDataItemIntoView(this.radCarousel.Items[0]);

    Hope this helps.


    Greetings,
    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. CHRISTIAN GINCHELEAU
    CHRISTIAN GINCHELEAU avatar
    7 posts
    Member since:
    Nov 2008

    Posted 03 Dec 2009 Link to this post

    Hello Milan,

    thank you for your example.

    But I still have some difficulties:

    I have two RadCarousel in my window. The first horizontal on top of my window to simulate my main menu. The second vertical on center of my window  to load submenus of my selected item in my main menu.
    When I select an item in my main menu (horizontal RadCarousel), on event "SelectionChanged", I load my vertical RadCarousel ItemSource with my list of sub-menu of my main menu item. It works well.

    But when I scroll my main menu with the mouse, no item is selected then the corresponding sub-menu is not loaded.
    Which event is triggered when I scroll with the mouse?
    How to select the current item bring into view?

    In my main menu (horizontal RadCarousel), I have three items.
    How to always have an item bring into view (center)?

    Thank you for your help.
  5. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 04 Dec 2009 Link to this post

    Hi CHRISTIAN GINCHELEAU,

    RadCarouselPanel has a an event called TopContainerChanged which is triggered every time the center item changes. You could use this event to drive the assignment of ItemsSource to the submenu carousel.  For example:

    <telerikNavigation:RadCarousel x:Name="radCarousel">
        <telerik:RadCarousel.ItemsPanel>
            <ItemsPanelTemplate>
                <telerik:RadCarouselPanel 
                    TopContainerChanged="RadCarouselPanel_TopContainerChanged"  >
                </telerik:RadCarouselPanel>
            </ItemsPanelTemplate>
        </telerik:RadCarousel.ItemsPanel>
    </telerikNavigation:RadCarousel>

    private void RadCarouselPanel_TopContainerChanged(object sender, RoutedEventArgs e)
    {
        var carouselPanel = sender as RadCarouselPanel;
        var carouselItem = carouselPanel.TopContainer as CarouselItem;
      
        this.subMenuCarousel.ItemsSource = carouselItem.DataContext;
    }

    RadGridView has one method that will bring a random item to the center of the path.

    this.radCarousel.BringDataItemIntoView(myDataItem);

    Kind regards,
    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.
  6. huu phuc
    huu phuc avatar
    1 posts
    Member since:
    Mar 2011

    Posted 29 Mar 2011 Link to this post

    Hello,

    I am also interested by the Xrossbarmedia menu, did you manage to make it work ?

    Thanks.
Back to Top
UI for WPF is Visual Studio 2017 Ready