Month: December 2010

Windows Phone 7 Side Loading

James Ashley4 Comments

Side loading is a topic familiar to Windows Phone developers but not so familiar to those who might need to work with these developers and require an understanding of the functionality in order to be more effective.

Side loading refers to deploying applications directly to a device without going through the official Microsoft Marketplace. You may want to side load an application for prototyping, demos and reviews. 

In an enterprise environment, you may additionally want to side load applications that are intended only for internal consumption. Unfortunately, an enterprise solution is not available for the first iteration of Windows Phone. It may be included in a future release.

The side loading capabilities of Windows Phone 7 are somewhat restrictive. You may side load applications either to a software emulator running on a PC or to a physical device. Side loading to the WP7 software emulator requires the installation of the Windows Phone Developer Tools. In addition to various products (Visual Studio Express, Blend for WP7), the Windows Phone Developer Tools includes the Application Deployment utility which you will use for side loading. You must be running Windows Vista or Windows 7 in order to install the Developer Tools.

The Windows Phone Developer Tools may be downloaded here.

Side loading to a Windows Phone device additionally requires installation of the latest Zune software.

The Zune software may be downloaded here.

Deploying to a WP7 device is similar to deploying to the WP7 emulator. Besides the requirement that Zune software be running in order to deploy to a device, there is an additional restriction that you can only deploy to an “unlocked” developer device. A Marketplace account is required to unlock a WP7 device, and only five three developer devices can be unlocked for each marketplace account. A Marketplace account requires an annual membership fee of $99. A full membership, allowing for the publication of applications to the marketplace, can be purchased here and generally requires a two to three week verification period. Finally, only ten applications may be side loaded onto any device.

Deploying to the Emulator

Once the Windows Phone Developer Tools have been successfully installed, you may side load to the emulator by using the Application Deployment utility. You can find the Application Deployment utility by going to your Start Menu on the taskbar.

taskbar

Select “All Programs” from the Start Menu. Find and open the menu folder named Windows Phone Developer Tools.

admenu

This will open the Application Deployment utility.

ad

The Target dropdown has two entries. From the Application Deployment utility, apps can be deployed either to the emulator or to a device. To deploy to the emulator, select “Windows Phone 7 Emulator” as the target.

You will be deploying a XAP file, which is a file with a “.xap” extension. A XAP file is the basic unit for a phone application, much as an executable is the basic unit for a typical windows application. It includes the code as well as all the images and other assets required to run a specific phone application. Use the browse button to find the XAP file you want to deploy to the emulator.

Once a XAP file has been selected, press the “Deploy” button. If the emulator is not already running, deployment will start the emulator for you.

The emulator is a bare-bones version of the Windows Phone OS. It has most of the functionality found on a Windows Phone device but is lacking many of the applications you will typically find on a standard WP7 device. In fact, the Start screen on the emulator only contains Internet Explorer.

wp7startscreen

Select the right facing arrow at the top right corner to bring up all applications. You will find your newly loaded app on the applications screen.

Deploying to a Windows Phone

Once the WP7 Dev Tools and the Zune software have been successfully installed, you must run the Zune software before attempting to side load. You do not need to be logged into your Zune account in order to side load an app.

zune

While the Zune software is running, open the Application Deployment utility by following the steps enumerated above for side loading to the software emulator.

As pointed out above, the device must be “unlocked” as a developer device in order for deployment to occur.  The device does not have to be unlocked by you.  Hypothetically, you can simply ask someone with an annual Marketplace subscription to unlock the device for you.

Connect your device to your PC using a micro-USB cable (typically included with the device). The lock screen must be slid out of the way for deployment to occur.

In order to deploy to your device, you will select “Windows Phone 7 Device” as the deployment target in the Application Deployment utility rather than “Windows Phone 7 Emulator”.

To finish deploying to an unlocked device, follow the steps outlined above for deploying to the emulator.

* Special thanks to WP7 MVP Joel Johnson for reviewing this document and making necessary corrections to my understanding of how side loading works.

WP7 Tip: disabling the Pivot Control swipe gesture

James Ashley6 Comments

don't try this at home

A common question on WP7 message boards and mailing lists concerns how to cancel a pivot control’s built-in page swiping when you have another control in the pivot that takes swipe gestures: for instance, a Slider!

The standard Microsoft response to these queries is that you shouldn’t do it.  It creates UX confusion and is a “bad practice.”  The assumption is that users don’t think contextually, and will expect swiping to always do the same thing on a page.  This is one of those “sounds good enough” answers, and seems eminently reasonable with respect to a slider control inside a pivot panel.  Besides, you can always just orient your slider vertically, so there is even an out. 

On the other hand, WP7 textboxes use hold-and-swipe to manipulate the cursor in a textbox.  Is it poor UX or a bad practice to use textboxes inside of a pivot control?  Should I try to find a way to orient my textboxes vertically?  What about the Toggle Switch control?

Consider also that swiping is the quintessential phone gesture.  Every new WP7 control in 2011 will attempt to take advantage of it.  It would be a shame if we couldn’t use any of them with the pivot.

This post will address how to do the unspeakable: add a working, horizontally oriented slider to a pivot control.  If you understand how to add a slider to a pivot, you will be able to add any sort of control to a pivot.  For additional takes on this “Don’t Try This At Home” topic you should read Derik Whittaker’s post as well as Miloud B’s post.

In a nutshell, the keys to making this work are to use the IsHitTestVisible property of the pivot control in order to disable swiping.  Then use the static Touch class’s FrameReported event to determine when to re-enable it.

Create a new project in Visual Studio.  If the Pivot control is not available in your toolbox, right click on the toolbox and select “Choose Items…”  Scroll until you find the Pivot and select it.  Open MainPage.xaml in design view.  Drag the Pivot control into the Content grid.  Grab the sizing handles for the Pivot and drag them around until the Pivot fills the Content grid (everything under the Application Title and Page Title textblocks).

Two pivot panels are initially stubbed in for the Pivot control.  Drag a Slider control into the first panel (“item1”).  If you run the application now, you will encounter strange behavior in which the slider bar is successfully moved when you swipe it, but at the same time the pivot panel also attempts to page to a new panel.

swipeme

To fix this, handle your slider control’s ManipulationStarted event and set the pivot’s IsHitTestVisible property to false in order to disable it while the swipe for the Slider is being handled. 

When the swipe is completed, you will need to re-enable the pivot.  You cannot do this on the MouseLeftButtonUp event since this gets disabled on all child controls when you set IsHitTestVisible to false on a container.  Putting it in the ManipulationCompleted event is possible, but results in inconsistent behavior.

Instead, take advantage of the lower level touch API.  Check to see when an up touch gesture occurs over your slider  and set the pivot’s IsHitTestVisible property to true when it does.  This can be hooked up in the page constructor like so:

Touch.FrameReported += (s, e) =>
{
    if (e.GetPrimaryTouchPoint(slider1).Action == TouchAction.Up)
    { 
        pivot1.IsHitTestVisible = true; 
    }
};

Here is the relevant XAML:

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <controls:Pivot  HorizontalAlignment="Stretch" Margin="6,6,0,0" 
                        Name="pivot1" Title="pivot" 
                        VerticalAlignment="Top" Height="595">
        <controls:PivotItem Header="item1">
            <Grid>
                <Slider  Height="107" HorizontalAlignment="Left" 
                            Margin="-4,109,0,0" Name="slider1" 
                            VerticalAlignment="Top" Width="460" 
                            SmallChange="1" 
                            Maximum="100" 
                            Value="30" 
            ManipulationStarted="slider1_ManipulationStarted" />
            </Grid>
        </controls:PivotItem>
        <controls:PivotItem Header="item2">
            <Grid />
        </controls:PivotItem>
    </controls:Pivot>
</Grid>

And here is the code-behind:

public MainPage()
{
    InitializeComponent();
    Touch.FrameReported += (s, e) =>
    {
        if (e.GetPrimaryTouchPoint(slider1).Action == TouchAction.Up)
        { 
            pivot1.IsHitTestVisible = true; 
        }
    };
}

private void slider1_ManipulationStarted(object sender
    , ManipulationStartedEventArgs e)
{
    pivot1.IsHitTestVisible = false;
}

The Minority Report Demo You’ve been Waiting For

James Ashley2 Comments

The Emerging Experiences Team at Razorfish has been working with NUI concepts on MS Surface for several years – and more recently on Windows Phone.  When the Kinect sensor became available we quickly grabbed the hardware and started exploring what could be done with it.  The above demo (coded and filmed by Steve Dawson) uses the Kinect and a physics engine to provide an experience that is Sorcerer’s Apprentice meets Minority Report.  Enjoy!

[Over the weekend we made it onto Endgadget and Gizmodo.]