Customizing the XamMap MapNavigationPane Control Template

XamMap control is a powerful component for the visualization of geographic data.
Often users want to change the style of components and in particular the style of MapNavigationPane.
Many people want to have navigation on the map similar to the Bing Maps or other applications.
This article demonstrates how to do custom style in MapNavigationPane XamMap:

Bing Maps navigation pane

This article demonstrates how to change the style of MapNavigationPane changing some settings and
restyling the control, using the main template parts

Requirements:

Software:

• Visual Studio 2010
• Microsoft Expression Blend 4
• Infragistics XamMap component:

For Silverlight Demo:

• NetAdvantage for Silverlight Data Visualization 2010 vol.2

http://ko.infragistics.com/dotnet/netadvantage/silverlight/data-visualization.aspx#Downloads

For WPF Demo:

• NetAdvantage for Silverlight Data Visualization 2010 vol.2

http://ko.infragistics.com/dotnet/netadvantage/wpf/data-visualizationdownloads.aspx#Downloads

Sample data:

• Free shapefiles for this demo could be downloaded from http://www.cdc.gov/epiinfo/shape.htm

Steps to reproduce:

For Silverlight Demo:

1. Create a Silverlight application with WEB site (with Expression Blend 4.0 ).
2. Change a MapNavigationPane settings.
3. Retemplate a MapNavigationPane control.
4. Run the sample application

• Create a Silverlight application with WEB site (with Expression Blend 4.0 ).

Start Microsoft Expression Blend 4 and create a new Silverlight Application + Website

Add a XamMap control with a MapNavigationPane inside it:

<ig:MapNavigationPane Name="navPane" Margin="0"

HorizontalAlignment="Center" VerticalAlignment="Bottom" Orientation="Horizontal"/>

Rebuild a solution.

Create a folder , named ShapeFIles in the ClienBin folder of the WEB Project.

Add a shapefiles in this folder.

Add a MapLayer, named World with a ShapeFileReader, that uses a data from shapefile with world countries:

  

 

Rebuild and Run the sample application.

• Change a MapNavigationPane settings.

Change MapNavigationPane.Orientation property to Horizontal, VerticalPosition to Bottom,
HorizontalPosition to Center and remove Width, Height and Margin settings:

 

Run the sample application:

<ig:MapNavigationPane Name="navPane" Margin="0"

HorizontalAlignment="Center" VerticalAlignment="Bottom" Orientation="Horizontal" Style="{StaticResource MapNavigationPaneCustomStyle}"/>

• Retemplate a MapNavigationPane control.

 

Edit a copy of the current MapNavigationPane style, named MapNavigationPaneCustomStyle

 

Retemplate a MapNavigationPane control.

There are two main parts in the MapNavigationPane control template:

HorizontalRoot from type FrameworkElement, used when the orientation is horizontal and
VerticalRoot from type FrameworkElement, used whenthe orientation is vertical .

By default HorizontalRoot and VerticalRoot are from type Grid:

 

There are several additional template parts inside a HorizontalRoot and a VerticalRoot elements:

Inside HorizontalRoot :

• ButtonBase HorizontalPanWestButton: ButtonBase inheritor, used for pan West.
• ButtonBase HorizontalPanSouthButton: ButtonBase inheritor, used for pan South.
• ButtonBase HorizontalPanEastButton: ButtonBase inheritor, used for pan East.
• ButtonBase HorizontalPanNorthButton: ButtonBase inheritor, used for pan North.
• ButtonBase HorizontalZoomInButton: ButtonBase inheritor, used for zoom in.
• ButtonBase HorizontalZoomOutButton: ButtonBase inheritor, used for used for zoom out.
• ButtonBase HorizontalFitButton: ButtonBase inheritor, used for zoom to fit.
• ButtonBase HorizontalBackButton: ButtonBase inheritor, uset for zoom back.
• RangeBase HorizontalZoomRange: RangeBase inheritor that represents current scale, min scale and max scale

Inside VerticalRoot: 

 

• ButtonBase VerticalPanWestButton: ButtonBase inheritor, used for pan West.
• ButtonBase VerticalPanSouthButton: ButtonBase inheritor, used for pan South.
• ButtonBase VerticalPanEastButton: ButtonBase inheritor, used for pan East.
• ButtonBase VerticalPanNorthButton: ButtonBase inheritor, used for pan North.
• ButtonBase VerticalZoomInButton: ButtonBase inheritor, used for zoom in.
• ButtonBase VerticalZoomOutButton: ButtonBase inheritor, used for used for zoom out.
• ButtonBase VerticalFitButton: ButtonBase inheritor, used for zoom to fit.
• ButtonBase VerticalBackButton: ButtonBase inheritor, uset for zoom back.
• RangeBase VerticalZoomRange: RangeBase inheritor that represents current scale, min scale and max scale.

In this demo application are modified only elements for horizontalorientation.

Change the control template in the MapNavigationPaneCustomStyle:

Change the number of columns to 5 in the HorizontalRoot Grid. Edit Rectangle elements,
used to represent the background to cover all columns:

 <Grid x:Name="HorizontalRoot">

Change a Slider with a ProgressBar and add a Button for back navigation:

  

• Run the sample application.

 

  

 A new MapNavigationPane UI.

Run the sample application.

This sample demonstrates the flexibility of MapNavigationPane control inside a XamMap components.
It can give very different components XamMap style, giving it a new interface.

For WPF implementation could be used an article: Using Infragistics XamMap Silverlight/WPF control with SQL Server Spatial

Example application code can be found here: