Creating a simple TextRotator based on the Telerik Presentation Framework (TPF)

HOW-TOCreate a simple TextRotator control based on the Telerik Presentation Framework

SOLUTION

Open the Project/Solution you want to add the new control to (or create a new one).

Add references to the following libraries:

TelerikCommon

Telerik.WinControls and

Telerik.WinControls.UI

Create a new class that derives from RadElement, and name it TextRotatorElement. You need references to the Telerik.WinControls and Telerik.WinControls.Primitive namespaces.

Now add a TextPrimitive to the TextRotatorElement class. This primitive will render the text. You will also need the following variables:

double scale - stores the current scale in the range -1 to 1, it will be discussed later why we need it.

double angle - the current rotation angle.

double angleStep - the angle step between two consequent positions of the text.

array of strings _strings - in this array we will keep the strings that will be flipped.

int_currentString = -1 - initially there will be no current string

Timer_timer - will be used for the animation

In the TextRotatorElement's constructor initialize the following:

Set AutoSize to true. Now the TPF will automatically calculate the size of this element based on various factors, such as Scaling, children size, parent size, transformations, etc.

Set StretchHorizontally and StretchVertically to false, informing TPF that this element will not be stretched to fit the available size in it's parent, but will rather calculate its size based on the children's properties.

Set the Alignment to ContentAlignment.MiddleCenter to define the way TPF will align the element in its parent container.

Set the angle step:angleStep = Math.PI / 37. Here it is important to note, that we are not working in degrees, but in radians (360 degrees = 2 * Pi). In this case we define 180 degrees rotation to be made in 37 steps.

Initialize the _timer, set the interval between 20 and 50 (smaller values will create CPU overhead, larger values will make the animation flicker). Create event handler for the _timer.Tick, call it say timer_Tick.

Primitives and other Elements (RadElements) must be in a special virtual method - CreateChildElements. Override and create the child elements there.

The functionality of the timer_Tick is simple:

First, check whether there are strings to rotate. If no strings are available, there is nothing to be done.

Then add the angleStep to the angle and calculate the scale as cosine of the angle. It is important to note, that the cosine function returns positive and negative values in the range [-1;1].

Now, when the scale sign changes from positive to negative the angle is close to either 90 or -90 degrees. This means that we look at the element "from the side", i.e. we cannot really see the content or read the text. This is the time to swap the current text with the next one.

The next step is to apply the ScaleTransform to the element. We should supply value in the range [0; 1], i.e. the absolute value of the scale by X and 1 by Y (here we are not scaling by Y).

Next step is to redefine the way the TextRotatorElement calculates its size. This is done by overriding the MeassureOverride method. When overriding use auto-complete.

You will notice, that the available size is supplied as a parameter. The parent element supplies the maximum space available to your element. Here two factors define the element's size, based on its children's sizes (see StretchHorizontally / StretchVertically in #5 above), and based on the available size supplied as parameter. This means that the element will be as large as its children require, but not exceeding the available size.
To make it exceed this limit, we call the base method MeasureOverride, but instead of supplying the available space, we supply infinite space (float.PositiveInfinity, float.PositiveInfinity). Now our element will be sized to wrap its children and all elements will be placed correctly.

After implementing the TextRotatorElement, we need to create a wrapper control. The only trick here is that in the constructor you should set UseNewLayoutSystem to true and create the TextRotatorElement in the CreateChildItems method (again, as with CreateChildElements, it is virtual and should be overridden.) Additionally, here we need to expose the TextRotatorElement properties. You will also need reference the Telerik.WinControls and Telerik.WinControls.UI namespaces.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.