Cube with 6 similar sides programmatically

[pratik mehta]

Hello,

    I need to create a cube with 6 faces each having the same look and feel. For example, if I have a Grid with a RadGridView and RadChart on one face, I want to have the same displayed on other faces as well when rotating. My business logic will take care of modifying the faces as per requirement, but as such my UI is same across all faces.

From a designing point of view, its not ideal to develop 6 sections (copy-pasted) in the Xaml. Is there a way I can have only section (for one face) designed in the xaml and programmatically render on the other 5 faces with rotation.

Awaiting a quick reply,
Vish

[Tina Stancheva]

Hi pratik mehta,

The only way to achieve the desired functionality in the RadCube for now is to use a UserControl defining the content of each side of the cube. For example, you can define a UserControl containing a Grid with a RadGridView and a RadChart. However, in the RadCube definition you will need to apply the same user control for each side:

<telerikNavigation:RadCube x:Name="myCube"
        IsRotateOnClickEnabled="True"
        SelectedIndex="0"
    RotateSpeed="1" IsRotateOnStart="False"
    XWidth="200" YWidth="200" ZWidth="200"
    HorizontalAlignment="Center" VerticalAlignment="Center" >
   <local:MyUserControl/>
   <local:MyUserControl/>
   <local:MyUserControl/>
   <local:MyUserControl/>
   <local:MyUserControl/>
   <local:MyUserControl/>
</telerikNavigation:RadCube>

I attached a sample project illustrating this approach. Please take a look at it and let me know if it works for you.

Greetings,
Tina Stancheva
the Telerik team

[Nick]

is there any way to use RADCUBE using VB.Net or C# and not in XAML? Is there sample available?
Also can I use RadCube in WPF?

[Kiril Stanoev]

Hello Nick,

Silverlight is a language independent platform so you can develop both on VB and C#. I've prepared a small project demonstrating how to create a cube programatically.
As for your other question, we do not have RadCube for WPF.

Greetings,
Kiril Stanoev
the Telerik team

[Nick]

Thank you very much. Any possibilty of cube including in WPF?

[Valentin.Stoychev]

Hello Nick,

For the moment we don't have such plans.

Greetings,
Valentin.Stoychev
the Telerik team

[Vijay]

Hello Vish

    Please find the below source code, try to append any controls onto the each face of RadCube as per the requirements. Then define any customization that you want to programmatically code for each unique face using appropriate UI designing.

<UserControl x:Class="RadCubeApplication.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
 mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
 <Grid x:Name="LayoutRoot" Width="626">

<TextBlock Grid.Row="1"
 Height="23"
 HorizontalAlignment="Left"
 Margin="72,61,0,0"
 Name="textBlock1"
 FontFamily="Verdana"
 FontSize="15"
 Text="Please Enter First Number: "
 VerticalAlignment="Top"
 Width="214" />

<TextBox Grid.Row="1"
 Height="23"
 HorizontalAlignment="Left"
 Margin="320,60,0,0"
 Name="textBox1"
 VerticalAlignment="Top"
 Width="120" />

<TextBlock Grid.Row="1"
 Height="23"
 HorizontalAlignment="Left"
 Margin="58,121,0,0"
 FontFamily="Verdana"
 FontSize="15"
 Name="textBlock2"
 Text="Please Enter Second Number: "
 VerticalAlignment="Top"
 Width="228" />

<TextBox Grid.Row="1"
 Height="23"
 HorizontalAlignment="Left"
 Margin="320,120,0,0"
 Name="textBox2"
 VerticalAlignment="Top"
 Width="120" />

<Button Content="Arthmetic Operation"
 Height="23"
 HorizontalAlignment="Left"
 Margin="320,180,0,0"
 Name="button1"
 VerticalAlignment="Top"
 Width="120"
 Background="DeepSkyBlue"
 Click="button1_Click"/>

<telerik:RadCube XWidth="200"
 YWidth="200"
 ZWidth="200"
 Margin="339,360,301,120"
 IsRotateOnClickEnabled="True"
 HorizontalAlignment="Center"
 VerticalAlignment="Center"
 Name="radCube1"
 Side1Background="LightBlue"
 Side2Background="LightCoral"
 Side3Background="LightCyan"
 Side4Background="LightGray"
 Side5Background="LightGreen"
 Side6Background="LightGoldenrodYellow">

<!--Addition Operation Cube Side-->
 <Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto" />
 <RowDefinition Height="*" />
 <RowDefinition Height="Auto" />
 </Grid.RowDefinitions>
 <TextBlock FontFamily="Verdana"
 FontSize="12"
 HorizontalAlignment="Stretch"
 VerticalAlignment="Center"
 FontWeight="Bold"
 Name="textBlockAdd"
 Width="200"/>
 </Grid>
 <!--Subtraction Operation Cube Side-->
 <Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto" />
 <RowDefinition Height="*" />
 <RowDefinition Height="Auto" />
 </Grid.RowDefinitions>
 <TextBlock FontFamily="Verdana"
 FontSize="12"
 HorizontalAlignment="Stretch"
 VerticalAlignment="Center"
 FontWeight="Bold"
 Name="textBlockSub"
 Width="200"/>
 </Grid>

<!--Multiplication Operation Cube Side-->
 <Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto" />
 <RowDefinition Height="*" />
 <RowDefinition Height="Auto" />
 </Grid.RowDefinitions>
 <TextBlock FontFamily="Verdana"
 FontSize="12"
 HorizontalAlignment="Stretch"
 VerticalAlignment="Center"
 FontWeight="Bold"
 Name="textBlockMul"
 Width="200"/>
 </Grid>

<!--Division Operation Cube Side-->
 <Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto" />
 <RowDefinition Height="*" />
 <RowDefinition Height="Auto" />
 </Grid.RowDefinitions>
 <TextBlock FontFamily="Verdana"
 FontSize="12"
 HorizontalAlignment="Stretch"
 VerticalAlignment="Center"
 FontWeight="Bold"
 Name="textBlockDiv"
 Width="200"/>
 </Grid>

<!--Modulos Operation Cube Side-->
 <Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto" />
 <RowDefinition Height="*" />
 <RowDefinition Height="Auto" />
 </Grid.RowDefinitions>
 <TextBlock FontFamily="Verdana"
 FontSize="12"
 HorizontalAlignment="Stretch"
 VerticalAlignment="Center"
 FontWeight="Bold"
 Name="textBlockMod"
 Width="200"/>
 </Grid>

<!--Total Operation Cube Side-->
 <Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto" />
 <RowDefinition Height="*" />
 <RowDefinition Height="Auto" />
 </Grid.RowDefinitions>
 <TextBlock FontFamily="Verdana"
 FontSize="12"
 HorizontalAlignment="Stretch"
 VerticalAlignment="Center"
 FontWeight="Bold"
 Name="textBlockTotal"
 Width="200"/>
 </Grid>

</telerik:RadCube>
 </Grid>
</UserControl>
Hope this should be useful for startup.

Thanks and Regards,
Vijay