Distance between the Control and any other Control

[VenuMadhav]

I have a CoverFlow Control defined with a maxItemHeight of 200

When the cover flow starts, any selected item grows to a height of 250. However, it is till 50 pixels away from the control on top of it in a stack panel.

I have two questions

1) How do I make the gap between the selected item and the control above it to ZERO

2) How do I choose the amount of expansion on a selected item in the Cover Flow

[Miroslav Nedyalkov]

Hi VenuMadhav,

I'll start with the second one - the selected item expands, because it comes closer to the viewer. You cannot choose how bigger it will become. You can choose how closer it will come. You can do that by changing the template of the RadCoverflowPerspectiveItem. The property is called ZPosition and it is set in the animations in the visual states of the item.

About the first one - you have two options - you can use the CenterOffsetY property of the CoverFlow control to adjust the positions of the items in the CoverFlow control or you can set appropriate margins to adjust the position of the CoverFlow.

The attached example demonstrates all these things.

Hope this helps.

Regards,
Miroslav Nedyalkov

[VenuMadhav]

Hi Miroslav

Thanks for the reply.

It works. I wanted the selected image of the coverflow to use the completely available space of 300. In order to do that, I used an ItemMaxHeight of 240 and CenterOffsetY of -60 which in a certain way adds up to 300.

Can you conceptually define what is CenterOffsetY and how is this property value being used to render the item?

Thanks
Venu

[Miroslav Nedyalkov]

Hi VenuMadhav,

I'm attaching two images with screenshots. I will use them to explain how the CenterOffsetY property works.

I will start with that the CoverFlow control tries to simulate a 3D world and as every 3D world it has Ox, Oy and Oz axes. As we want to project this 3D world on the screen all these axes has their projections on the screen. The CoverFlow itself has its Ox and Oy and we will put them in the middle of the CoverFlow control area. Now we can define what CenterOffsetX and CenterOffsetY are:

 - CenterOffsetX is the difference between the projection of the Oy axis and the line that divides the CoverFlow control vertically into two equal pieces
 - CenterOffsetY is the difference between the projection of the Ox axis and the line that divides the CoverFlow control horizontally into two equal pieces.

Let's demonstrate this with two examples.

On the first image, we simplified the situation by putting the Camera on the Oz axis. This makes the whole Oxz plane to be projected in a line, because the camera is on this plane, too. The difference between this line (the yellow line on the image) and the middle of the CoverFlow control (the red line on the image) is the CenterOffsetY property. In this case it is -40.

In the second example, the camera is lifted a bit and the images look different. Now their bottoms don't stay on one line. This is because the Oxz plane is no more projected as a single line, but the bottoms of the images are still on this plane. Now it is harder to find the projection of the Ox axis and to find its distance to the middle of the CoverFlow control. Now the projection of the Ox is the line that crosses trough all the points with X and Z positions 0. In our scenario, this points are all the middle-bottom points of the images except the selected one (it has ZPosition -500). Hence, the yellow line should be trough the red point and parallel to the red line. The CenterOffsetY is once again the difference between these two lines.

The situation is more simple with the CenterOffsetX property as the camera cannot be moved horizontally. In our examples the projection of the Oy axis and the middle of the CoverFlow control matches, so the CenterOffsetX equals 0.

Hope this information helps you understand how these properties work.

Regards,
Miroslav Nedyalkov
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.