Panoramic Silverlight App on Windows Phone for Developers


--Copyright 2010 Travis Feirtag


Introduction

Okay, I admit it.  I'm a developer and I've tried using Expression Blend for creating and modifying projects.  I'm not a designer and they've got an interface that I thought I could use.  Well turns out that I think more like a developer.  I'll figure it out eventually but in the mean time I have applications to write.  This article will show you how to create a panoramic Silverlight application for the Windows Phone and we won't be using Expression Blend.


Download WPSLPanoramic Source Files for this Article



Silverlight Application for Windows Phone

Let's start by creating a Silverlight application for Windows Phone in Visual Studio 2010 using the Windows Phone developer tools.  All the source code for the project is included in this article for download.   In the MainPage.xaml, I added a Canvas object as the layoutRoot around the main Grid object.  I added a background image to the main Grid that was wider than the screen.  I made the image 800px high so that it filled the entire height of the screen.  I added three Grid objects inside the maid Grid and these are each of the pages. 

Storyboards for Movement

To move from screen to screen we want a nice animation that slides the whole thing left or right.  To do this I added three Storyboad objects to the Canvas resources.  Each of them has a DoubleAnimation which moves the entire main Grid object left or right by targeting the TranslateX property of the Grid.



Processing Flicks

There's really not a lot of code to make this work. We hook the ManipulationDelta event of the Silverlight MainPage. When the user drags their finger across the display, the ManipulationDelta will be called.  Once the delta of the X value is greater than a predetermined value, in this case 50, then this is recognized as a flick to the right.  Which means that we should move to the screen on the left.  To move the screen to the left, we simply need to determine which screen we're currently on.  This value is stored in the _nPage integer.  If we're not on the left most page, then run the storyboard animation to scroll everything left. This works the same way in the other direction except that the threshold is -50. One important note is to call the Complete() method on the EventArgs so that you don't get multiple flicks detected. Go ahead and load the application onto your Windows Phone emulator and give it a try. If you drag the mouse across the display, you will see that you can move from page to page.


// Current Page
private int _nPage = 0;

/// <summary>
/// Constructor
/// </summary>
public MainPage()
{
    InitializeComponent();

    SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

    // Hook the manipulation delta event
    this.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(MainPage_ManipulationDelta);
}

/// <summary>
/// This method processes the manipulation delta event.
/// </summary>
/// <param name="sender"></param>
/// <param name="manDeltaEventArgs"></param>
void MainPage_ManipulationDelta(object sender, ManipulationDeltaEventArgs manDeltaEventArgs)
{
    // If the user slid their finger across the display greater than 50 in the X direction.
    // They've swept their finger from left to right.
    if (manDeltaEventArgs.DeltaManipulation.Translation.X > 50)
    {
        GoLeft();

        // this manipulation has been handled so complete it
        // if you don't call this then you will get multiple events
        manDeltaEventArgs.Complete();
    }

    // If the user slid their finger across the display less than -50 in the X direction.
    // They've swept their finger from right to left.
    if (manDeltaEventArgs.DeltaManipulation.Translation.X < -50)
    {
        GoRight();

        // this manipulation has been handled so complete it
        // if you don't call this then you will get multiple events
        manDeltaEventArgs.Complete();
    }
}

/// <summary>
/// if the user is not on the left most page, then decrement the page number
/// and call SetPage that will run the appropriate animation
/// </summary>
private void GoLeft()
{
    if (this._nPage > 0)
    {
        this._nPage--;
        SetPage();
    }
}

/// <summary>
/// if the user is not on the right most page, then decrement the page number
/// and call SetPage that will run the appropriate animation
/// </summary>
private void GoRight()
{
    if (this._nPage < 2)
    {
        this._nPage++;
        SetPage();
    }
}

/// <summary>
/// This method runs the individual storyboards based on the page value
/// Look at the XAML file to see the details on the storyboards.
/// They are all DoubleAnimation for changing the TranslateX property of the main grid
/// </summary>
private void SetPage()
{
    switch (this._nPage)
    {
        case 0:
            this.storyPage1.Begin();
            break;
        case 1:
            this.storyPage2.Begin();
            break;
        case 2:
            this.storyPage3.Begin();
            break;
    }
}


Conclusion

This is one example on how you can easily create a panoramic Silverlight application for your Windows Phone using Visual Studio.  Hopefully this gives you a good starting point for creating your own panoramic apps on the phone.  Happy coding :)