ArcGIS API for Windows Phone

When working on a mobile device, the resolution of the screen is a fixed value and must be taken into account when developing applications. On a Windows Phone 7 device, the resolution, or dots per inch (dpi) is about double that of the default resolution on a desktop computer. This means that on a Windows Phone 7 device, each pixel is about half the size of a pixel on your computer screen, providing a higher resolution.

Many map services are designed for a computer screen, and have text and graphics designed to be shown at half the dpi that is used by the Windows Phone 7 devices. As a developer, you can choose how to adjust your applications to make the services you display human-readable:

You can publish services designed for the resolution of mobile devices. If viewed on a computer screen, the fonts and graphics appear larger than is expected, but on the phone, the service is scaled appropriately.
You can use a render transform on the map to display the services as if they are designed to fit a different screen size. This option allows you to use more of the currently available public services and just change the rendering once they are used on a Windows Phone 7 device.

This topic teaches the second approach: scaling the map in your application so that services are rendered more appropriately for the screen size.

Applying a render transform to the map

To scale your map so that the symbology is more appropriately sized on the Windows Phone 7 screen, take the following steps:

Create an ArcGIS API for Windows Phone application with a map as described in the topic Creating a map. Your ContentPanel XAML should resemble the following:

<Grid x:Name="ContentPanel" Grid.Row="1">
    <esri:Map x:Name="MyMap" Extent="-120, 20, -100, 40">
        <esri:Map.Layers>
            <esri:ArcGISTiledMapServiceLayer ID="StreetMapLayer"
                Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer">
            </esri:ArcGISTiledMapServiceLayer>
        </esri:Map.Layers>
    </esri:Map>
</Grid>

Add a feature layer to the map by placing a FeatureLayer element below the ArcGISTiledMapServiceLayer in the Map element. This shows how graphics scale as well:
```
<esri:FeatureLayer Url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/0" />
```
Run the application and notice that the text, symbols, and graphics are all very small:
Return to your code and add some attributes onto the Map element in the MainPage.xaml file, as specified in the following code. The first attribute, SizeChanged, specifies an event handler for resizing the Map control. The second, RenderTransformOrigin, sets the center point around which the transformation takes place. Since you are doubling the size, use an origin with both x and y of 0.5 to keep the center the same:
```
<esri:Map x:Name="MyMap" Extent="-120, 20, -100, 40"
           SizeChanged="MyMap_SizeChanged"
           RenderTransformOrigin="0.5 0.5">
```

Add a RenderTransform to the Map element in the MainPage.xaml file. Using a ScaleX and ScaleY of 2 doubles the size of the Map control element:

<esri:Map x:Name="MyMap" Extent="-120, 20, -100, 40" 
          SizeChanged="MyMap_SizeChanged" RenderTransformOrigin="0.5,0.5">
    <esri:Map.RenderTransform>
        <ScaleTransform ScaleX="2" ScaleY="2" />
    </esri:Map.RenderTransform>

You also need to add code to the MyMap_SizeChanged event handler, which is called when the RenderTransform is applied. In the XAML, right-click the SizeChanged property, and select Navigate to Event Handler to go to the event handler in the MainPage.xaml.cs code-behind. Update the event handler to set the map to half the height and width, which (since ScaleX and ScaleY were set to 2 to double the size of the Map control element) leaves the Map control the same size it was before the transformation. This leaves the placement and size of the map in the Windows Phone page unchanged from the original design, while making the fonts and symbols within it larger. See the following code:
```
private void MyMap_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (e.PreviousSize.Height == 0)
    {
        MyMap.Width = e.NewSize.Width / 2;
        MyMap.Height = e.NewSize.Height / 2;
    }
}
```
Rerun the application. Notice that the text, symbols, and graphics are all more readable, while the extent of the map is unchanged:

1/23/2012

Scaling the map

Applying a render transform to the map