face orientation control

[Brett Gilbert]

When tabbing through my cube faces - the content will end up upside down, sideways, etc.  Is there a way force / control the orientation of each face?

[Hristo Borisov]

Hi Brett Gilbert,

How do you change the sides of the cube? Do you use the SelectedIndex property? I have tried to come across the problem on our online example here without any success, can check whether you are able to reproduce the problem in our online demos. If not we will need some code snippet that exposes the way you use the RadCube control. Thank you for collaborating with us.

Regards,
Hristo Borisov
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.

[Brett Gilbert]

Interesting - i have been able to reproduce my issue on your demo.  here is the code for mine -

XAML:

<UserControl xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"  x:Class="ltb_cube.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="321" Height="592">
    <Grid x:Name="LayoutRoot" Background="White">
<telerikNavigation:RadCube IsRotateXAxisOnly="True" IsRotateOnClickEnabled="True" x:Name="RadCube1" IsRotateOnStart="False" XWidth="221"
                YWidth="492" ZWidth="221" HorizontalAlignment="Center" VerticalAlignment="Center">

<Image Source="img/background.png" Stretch="Fill" Height="250"></Image>

            <telerikNavigation:RadTreeView Width="221" Height="221" x:Name="Slide1" >
                    <telerikNavigation:RadTreeViewItem Header="Slide0" IsExpanded="True">
                        <telerikNavigation:RadTreeViewItem Header="Item1.1" />
                        <telerikNavigation:RadTreeViewItem Header="Item1.2" />
                        <telerikNavigation:RadTreeViewItem Header="Item1.3" />
                        <telerikNavigation:RadTreeViewItem Header="Item1.4" />
                        <telerikNavigation:RadTreeViewItem Header="Item1.5" />
                        <telerikNavigation:RadTreeViewItem Header="Item1.6" />
                        <telerikNavigation:RadTreeViewItem Header="Item1.7" />
                        <telerikNavigation:RadTreeViewItem Header="Item1.8" />
                        <telerikNavigation:RadTreeViewItem Header="Item1.9" />
                    </telerikNavigation:RadTreeViewItem>
                    <telerikNavigation:RadTreeViewItem Header="Item2" />
                    <telerikNavigation:RadTreeViewItem Header="Item3" />
                    <telerikNavigation:RadTreeViewItem Header="Item4" />
                    <telerikNavigation:RadTreeViewItem Header="Item5" />
                    <telerikNavigation:RadTreeViewItem Header="Item6" />
                    <telerikNavigation:RadTreeViewItem Header="Item7" />
                    <telerikNavigation:RadTreeViewItem Header="Item8" />
                    <telerikNavigation:RadTreeViewItem Header="Item9" />
                    <telerikNavigation:RadTreeViewItem Header="Item10" />
                    <telerikNavigation:RadTreeViewItem Header="Item11" />
                    <telerikNavigation:RadTreeViewItem Header="Item12" />
                </telerikNavigation:RadTreeView>
            <telerikNavigation:RadTreeView Width="221" Height="221" x:Name="Slide2" >
                <telerikNavigation:RadTreeViewItem Header="Slide0" IsExpanded="True">
                    <telerikNavigation:RadTreeViewItem Header="Item1.1" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.2" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.3" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.4" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.5" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.6" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.7" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.8" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.9" />
                </telerikNavigation:RadTreeViewItem>
                <telerikNavigation:RadTreeViewItem Header="Item2" />
                <telerikNavigation:RadTreeViewItem Header="Item3" />
                <telerikNavigation:RadTreeViewItem Header="Item4" />
                <telerikNavigation:RadTreeViewItem Header="Item5" />
                <telerikNavigation:RadTreeViewItem Header="Item6" />
                <telerikNavigation:RadTreeViewItem Header="Item7" />
                <telerikNavigation:RadTreeViewItem Header="Item8" />
                <telerikNavigation:RadTreeViewItem Header="Item9" />
                <telerikNavigation:RadTreeViewItem Header="Item10" />
                <telerikNavigation:RadTreeViewItem Header="Item11" />
                <telerikNavigation:RadTreeViewItem Header="Item12" />
            </telerikNavigation:RadTreeView>
            <telerikNavigation:RadTreeView Width="221" Height="221" x:Name="Slide3" >
                <telerikNavigation:RadTreeViewItem Header="Slide0" IsExpanded="True">
                    <telerikNavigation:RadTreeViewItem Header="Item1.1" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.2" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.3" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.4" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.5" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.6" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.7" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.8" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.9" />
                </telerikNavigation:RadTreeViewItem>
                <telerikNavigation:RadTreeViewItem Header="Item2" />
                <telerikNavigation:RadTreeViewItem Header="Item3" />
                <telerikNavigation:RadTreeViewItem Header="Item4" />
                <telerikNavigation:RadTreeViewItem Header="Item5" />
                <telerikNavigation:RadTreeViewItem Header="Item6" />
                <telerikNavigation:RadTreeViewItem Header="Item7" />
                <telerikNavigation:RadTreeViewItem Header="Item8" />
                <telerikNavigation:RadTreeViewItem Header="Item9" />
                <telerikNavigation:RadTreeViewItem Header="Item10" />
                <telerikNavigation:RadTreeViewItem Header="Item11" />
                <telerikNavigation:RadTreeViewItem Header="Item12" />
            </telerikNavigation:RadTreeView>
            <telerikNavigation:RadTreeView Width="221" Height="221" x:Name="Slide4" >
                <telerikNavigation:RadTreeViewItem Header="Slide0" IsExpanded="True">
                    <telerikNavigation:RadTreeViewItem Header="Item1.1" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.2" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.3" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.4" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.5" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.6" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.7" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.8" />
                    <telerikNavigation:RadTreeViewItem Header="Item1.9" />
                </telerikNavigation:RadTreeViewItem>
                <telerikNavigation:RadTreeViewItem Header="Item2" />
                <telerikNavigation:RadTreeViewItem Header="Item3" />
                <telerikNavigation:RadTreeViewItem Header="Item4" />
                <telerikNavigation:RadTreeViewItem Header="Item5" />
                <telerikNavigation:RadTreeViewItem Header="Item6" />
                <telerikNavigation:RadTreeViewItem Header="Item7" />
                <telerikNavigation:RadTreeViewItem Header="Item8" />
                <telerikNavigation:RadTreeViewItem Header="Item9" />
                <telerikNavigation:RadTreeViewItem Header="Item10" />
                <telerikNavigation:RadTreeViewItem Header="Item11" />
                <telerikNavigation:RadTreeViewItem Header="Item12" />
            </telerikNavigation:RadTreeView>

        </telerikNavigation:RadCube>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="50"></RowDefinition>
                <RowDefinition Height="50"></RowDefinition>
                <RowDefinition Height="50"></RowDefinition>
                <RowDefinition Height="50"></RowDefinition>
                <RowDefinition Height="50"></RowDefinition>
                <RowDefinition Height="50"></RowDefinition>
            </Grid.RowDefinitions>
            <Button Click="Button_ClickNext1" Content="Navigate to cube side 1" Height="20" Width="150" Grid.Row="0"></Button>
            <Button Click="Button_ClickNext2" Content="Navigate to cube side 2" Height="20" Width="150" Grid.Row="1"></Button>
            <Button Click="Button_ClickNext3" Content="Navigate to cube side 3" Height="20" Width="150" Grid.Row="2"></Button>
            <Button Click="Button_ClickNext4" Content="Navigate to cube side 4" Height="20" Width="150" Grid.Row="3"></Button>
            <Button Click="Button_ClickNext5" Content="Navigate to cube side 5" Height="20" Width="150" Grid.Row="4"></Button>
            <Button Click="Button_ClickNext6" Content="Navigate to cube side 6" Height="20" Width="150" Grid.Row="5"></Button>

            </Grid>
    </Grid>
</UserControl>

.cs

namespace ltb_cube
{
    public partial class Page : UserControl
    {
        private int faceIndex = 2;
        public Page()
        {
            InitializeComponent();
            RadCube1.SelectedIndex = 2;
        }

        private void Button_ClickNext1(object sender, RoutedEventArgs e)
        {
            RadCube1.SelectedIndex = 1;
        }
        private void Button_ClickNext2(object sender, RoutedEventArgs e)
        {
            RadCube1.SelectedIndex = 2;
        }private void Button_ClickNext3(object sender, RoutedEventArgs e)
        {
            RadCube1.SelectedIndex = 3;
        }private void Button_ClickNext4(object sender, RoutedEventArgs e)
        {
            RadCube1.SelectedIndex = 4;
        }private void Button_ClickNext5(object sender, RoutedEventArgs e)
        {
            RadCube1.SelectedIndex = 5;
        }
        private void Button_ClickNext6(object sender, RoutedEventArgs e)
        {
            RadCube1.SelectedIndex = 0;
        }

    }
}

Click to face 1, then to face 4, then back to face 1 and that face is now upside down.

[Hristo Borisov]

Hello Brett Gilbert,

The problem comes from the different value of the YWidth. It seems that when the control doesn't have equal sides there are some miscalculation in the rotations. This is the first time we experience such problem and we will do our best to resolve this issue in future. For now you can get around the problem by simply setting equal size of all sides. In your case you must set the YWidth property to 221. Thank you for reporting this issue, your Telerik points have been updated. If you have any further assistance don't hesitate to contact us again.

Sincerely yours,
Hristo Borisov
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.

[Brett Gilbert]

Since I am leveraging this as rectangular cube, ive noticed that items within the taller y face are stretched.
See above code sample.
Is there anyway around this "stretching" / any way to compensate for this stretching?

[Hristo Borisov]

Hi Brett Gilbert,

The answer is similar to my previous post. You have to use square rectangles since there are miscalculation that result in incorrect behavior. As I mentioned before, we will do our best to include a hot fix for this as soon as possible.

Best wishes,
Hristo Borisov
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.