Telerik blogs

RadDateSelector for Windows Phone 7 – Loaded within a standard in-browser Silverlight application.

Georgi Atanasov 164x164 by Georgi Atanasov
November 02, 2010 Mobile 0 Comments


Silverlight for Windows Phone 7 is version 3.7 hence a WP7 control should be easily used within a standard Silverlight 4 application. But that’s in theory. The major differences between these two worlds are the so called “Manipulation” events. Each UIElement in WP7’s Silverlight is “enabled” with the following routed events:

  • ManipulationStarted
  • ManipulationDelta
  • ManipulationCompleted 

Generally this sequence of events encapsulates one or more touch gestures in a transaction block. The event arguments carry all the information needed to determine what the gesture is and what effect to generate. And of course RadControl for WP7 use these events extensively in order to provide consistent and rich user experience throughout the entire framework.

But what about running these controls in a standard Silverlight Application where the manipulation events are not present? The solution is to generate the gestures manually, depending on mouse input – meet the ManipulationBehavior class we have created to enable standard single-touch gestures outside the WP7 context. The behavior itself attaches to a valid UIElement instance and hooks its MouseLeftButtonDown, MouseMove, MouseLeftButtonUp and MouseLeave events. When mouse input is received, the behavior generates the appropriate gestures and raises one or more of the following events:

  • Tap – the equivalent of a mouse click. The left mouse button has been pressed and released in the same position.
  • Pan – the equivalent of a Drag operation. The left mouse button has been pressed and the mouse is moved while the button is still pressed. The arguments of the event pass the generated offset.
  • Flick – a more interesting gesture, without an actual counterpart on a non-touch enabled device. The left mouse button has been pressed, and then the mouse is moved quickly in a certain direction and released immediately. The so called “velocity” is generated which actually describes the amount of pixels we should scroll horizontally and/or vertically. 

In order to determine whether a flick gesture should be generated we calculate the timespan between the last mouse move and the MouseLeftButtonUp event:

protected virtual void HandleMouseLeftButtonUp(MouseButtonEventArgs e)
{
    Point current = e.GetPosition(Application.Current.RootVisual);
    if (current == this.manipulationStartPosition)
    {
        ManipulationTapEventArgs args = new ManipulationTapEventArgs(e.OriginalSource, current);
        this.OnTap(args);
    }
    else if (DateTime.Now.TimeOfDay.TotalMilliseconds - this.lastMoveTime.TotalMilliseconds <= FlickTimeSpan)
    {
        // less than 10 milliseconds between a mousemove and left button release is considered as a Flick gesture
        double velocity = this.CalculateFlickVelocity(e.GetPosition(Application.Current.RootVisual));
        ManipulationFlickEventArgs args = new ManipulationFlickEventArgs(e.OriginalSource, velocity);
        this.OnFlick(args);
    }
 
    this.OnManipulationCompleted();
}

And here is how the velocity is calculated:

private double CalculateFlickVelocity(Point currentPosition)
{
    double offsetY = currentPosition.Y - this.manipulationStartPosition.Y;
    double milliseconds = DateTime.Now.TimeOfDay.TotalMilliseconds - this.manipulationStartTime.TotalMilliseconds;
 
    // speed (pixels per millisecond)
    double panSpeed = offsetY / milliseconds;
 
    double height = this.associatedElement.RenderSize.Height;
    if (panSpeed == 0)
    {
        return height / 2;
    }
 
    return panSpeed * height * 1.5d;
}

Well, enough words, you’d better see it for yourself (this is not just a picture :)

 

Please note that the text here looks a bit different than in WP7 because the Segoe WP Font is installed with the Windows Phone 7 tools and we have intentionally specified the standard Segoe UI Font for the demo.

Do not hesitate to read more about our RadControls for WP7 and to grab a copy of our fresh CTP release. Any feedback is most welcome.

Silverlight, Windows Phone
Georgi Atanasov 164x164
About the Author

Georgi Atanasov

Georgi worked at Progress Telerik to build a product that added the Progress value into the augmented and virtual reality development workflow.

 

Comments

Comments are disabled in preview mode.