Menu 3D with RadCarousel

[CHRISTIAN GINCHELEAU]

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

[Milan]

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.

[CHRISTIAN GINCHELEAU]

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.

[Milan]

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.

[huu phuc]

Hello,

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

Thanks.