ArcGIS for Windows Phone - Scaling the map

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 would appear much larger than is expected, but on the phone the service would be 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 ContentGrid XAML should look as follows:

<Grid x:Name="ContentGrid" 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 will show 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:
Go back to your code and add some attributes onto the Map element in the MainPage.xaml file, as specified in the code below. The first attribute, SizeChanged, specifies an event handler for resizing the Map control. The second, RenderTransformOrigin, sets the center point around which the transformation will take place. Since we are doubling the size, we 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 in a RenderTransform to the Map element in the MainPage.xaml. Using a ScaleX and ScaleY of 2 will double 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 will be called when the RenderTransform is applied. In the XAML, right-click on 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, will leave 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;
    }
}
```
Run the application again and notice that the text, symbols, and graphics are all more readable, while the extent of the map is unchanged:

12/1/2010