Windows Phone Applications – Map, Pivot and Panorama controls


Today, I'll write about three new controls in Windows Phone Applications - the Map, Pivot and Panorama controls.  These controls should be in the next release of the free developer tools as they didn't make the beta.

The Silverlight Bing Map control allows you to integrate an immersive mapping solution with gestures-enabled zooming and panning in your Windows Phone applications.

The Pivot and Panorama are the navigation controls that are used extensively on Windows Phone 7.  The difference is that the Pivot is a lot like the TabControl designed for the phone, while the Panorama offers a unique way to view content by using a long horizontal canvas that extends beyond the confines of the screen.

 

A Map control:

 

 

A Pivot containing a WebBrowser and a TextBox:

 

And a Panorama containing a couple of TextBox controls: 

  

To use these controls, right-click on References in the Solution Explorer and add reference to Microsoft.Phone.Controls and Microsoft.Phone.Controls.Maps.  Then add the following xmlns declaration to your xaml:

xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

xmlns:map="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"

 

 

 Xaml for the Map control:

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <map:Map ZoomBarVisibility="Visible" ZoomLevel="12" Center="47.63641255621237, -122.13312149047851" />

    </Grid>

 

Xaml for the Pivot containing a WebBrowser and a TextBox:

 

         <controls:Pivot>

            <controls:Pivot.Background>

                <ImageBrush ImageSource="Lighthouse.jpg" />

            </controls:Pivot.Background>

            <controls:PivotItem Header="WebBrowser">

                <phone:WebBrowser Name="webBrowser1" Source="http://www.bing.com" />

            </controls:PivotItem>

            <controls:PivotItem Header="TextBox">

                <TextBox />

            </controls:PivotItem>

        </controls:Pivot>

 

Xaml for the Panorama containing a couple of TextBox controls:

 

        <controls:Panorama>

            <controls:Panorama.Background>

                <ImageBrush ImageSource="Lighthouse.jpg" />

            </controls:Panorama.Background>

            <controls:PanoramaItem Header="TextBox">

                <TextBox />

            </controls:PanoramaItem>

            <controls:PanoramaItem Header="More Text" >

                <TextBox />

            </controls:PanoramaItem>

        </controls:Panorama>

 

Note: I've omitted the CredentialsProvider property setting on the Map control, so if you run this xaml, you'll see some text on the map to sign up for a Bing Maps developer account.  You can sign up for free at https://www.bingmapsportal.com/.

Edit:  I've separated the Map, Pivot and Panorama controls.  Also added that these new controls will be in the next release of the free developer tools as they didn't make the beta.

 

 

Comments (6)
  1. robhelle says:

    I'm getting started with the Map, Pivot, and Panorama controls for Windows Phone 7applications.

    However, I am unable to locate the following assemblies :

    Microsoft.Phone.Controls, Microsoft.Phone.Controls.Maps

    Thanks in advance for any insight!  Best regards, Rob

  2. Ricky_T says:

    Hi Rob,

    These new controls did not make the beta, but should be in the next release of the free developer tools.

    Best regards,

    Ricky

  3. Megh says:

    It says the type contols:pivot was not found. Is it beacuse i'm in beta ? If that's that then when will be next release of these tools ?

  4. Will says:

    Thanks for the intro.  Can  you please let us know the date when these controls will be available?  Thanks,

  5. Ricky_T says:

    From the announcement at windowsteamblog.com/…/a-developer-s-roadmap-to-windows-phone-7-launch-timing.aspx, these controls will be available on Sept 16.

Comments are closed.

Skip to main content