DeepEarth control creation guide

General Parts of the Project

1) You should create folder for your control named as follows:
where %ToolKit% is path to the deep earth toolkit, and {YourControlName} is the name of your control.
e.g. %ToolKit%\Client\DeepEarth.BingMapsToolkit.Client.Controls.Minimap

2) Next you should create a Silverlight class library project in visual studio. Name your project Client.Controls.{YourControlName} .

3) Make sure that default namespace and assembly name of your project are
Default Namespace: DeepEarth.BingMapsToolkit.Client.Controls
Assembly Name: DeepEarth.BingMapsToolkit.Client.Controls.{YourControlName})

4) Remove Class1.cs from this project.

5) Add Silverlight Templated Control to this project.
folder will be created automatically, and it will contain generic.xaml (which will contain template of your control)

Adding functionality to your control

If you need to add control (e.g. button, textblock) to your template control you should place it in generic.xaml.
After adding this new control you should make following steps:
1) Call it PART{YourControlName} (e.g. PARTxCoordTextBlock)

2) Add addtribute to your project’s templated control class:
[TemplatePart(Name = PART_{YourControlName}, Type = typeof({YourControlType}))]
(e.g. [TemplatePart(Name = PART_xCoordTextBlock, Type = typeof(TextBlock))] )

3) Create private const string field call PART_{YourControlName} as follows:
private const string PART{YourControlName} = "PART{YourControlName}";
(e.g. private const string PARTxCoordTextBlock = "PARTxCoordTextBlock";)

4) Create private field to represent your control as follows:
private private {YourControlType} {YourControlName}
(e.g. private TextBlock xCoordTextBlock;)

5) In the constructor of the control you should manually bind the template as a style:
DefaultStyleKey = typeof ({YourControlClass});
(e.g. DefaultStyleKey = typeof (CoordinatePanel))

6) In method OnApplyTemplate() add code to find you control in default style:
{YourControlName} = ({YourControlType}) GetTemplateChild(PART_{ YourControlName})
(e.g. xCoordTextBlock = (TextBlock) GetTemplateChild(PART_xCoordTextBlock);)

For creating animation you should use Visual State Manager ( please see )

After adding VisualStateManager, VisualStateGroup and VisualStates in you generic.xaml you sould make following steps:

1) Add attribute to your project’s templated control class:
[TemplateVisualState(Name = VSM_{YourStateName}, GroupName = VSM_{YourStateGroupName})]
(e.g. [TemplateVisualState(Name = VSM_MouseOver, GroupName = VSM_CommonStates)] )

2) For all Visual states create private const string field call VSM_{YourStateName} as follows:
private const string VSM_{YourStateName}= "{YourStateName}";
(e.g. private const string VSM_Normal = "Normal";)

3) For all Visual State Groups create also create const string field call VSM_{YourStateGroupdName}as follows:
private const string VSM_{YourStateGroupdName}= "{YourStateGroupdName}";
(e.g. private const string VSM_CommonStates = "CommonStates";)

4) Now you can activate your animation using VisualStateManager like this:
VisualStateManager.GoToState(this, VSM_OptionsOpened, useTransitions);

Connection to Map

If your control needs to be connected with instance of MapCore(e.g. your control needed to track the center of map), then do as follows:
1) Add reference in your control to DeepEarth.BingMapsToolkit.Client.Common project
2) Add reference to Microsoft.Maps.MapControl.dll
3) Implement interface DeepEarth.BingMapsToolkit.Client.Common.IMapControl<Microsoft.Maps.MapControl.Core.MapCore>
#region IMapControl<MapCore> Members
		public string MapName {
			get { return mapName; }
			set {
				mapName = value;
		public MapCore MapInstance {
			get { return mapInstance; }
			set {
                                                     //Here attach or deattach to mapInstance nesessary events				
                                                      mapInstance = value;
		public void Dispose() {
                                                //Don’t forget free resources
			MapInstance = null;

4) Insert realization (code bottom) of setMapInstance(string mapname) method in your control class code. It’s method responsible for searching MapCore by name in Visual Tree.
private void setMapInstance(string mapname)
	MapInstance = Utilities.FindVisualChildByName<MapCore> (Application.Current.RootVisual, mapname);

5) Add call to setMapInstance in control Loaded event handler
private void MiniMap_Loaded(object sender, RoutedEventArgs e)

6) MapName can be set in xaml
<c:CoordinatePanel Name="coordPanel" MapName="map" />

Creating example control:

1) Add a new Silverlight User Control in ExampleControl project under the "ControlDemos" folder and call it {YourControlName}Example
2) In {YourControlName}Example.xaml add your control, and all necessary controls to demonstrate control possibilities
e.g. ScalePanelExample
<UserControl x:Class="ExampleControlBing.ControlDemos.ScalePanelExample"
    <Grid x:Name="LayoutRoot">
        <m:Map x:Name="map" CredentialsProvider="{StaticResource MyCredentials}" />
        <s:ScalePanel Name="scalePanel" MapName="map" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="4,4,4,4"/>

3) Add a text file under the "ControlDemos" folder and call it {YourControlName}Example.txt. Put content of {YourControlName}Example.xaml file in {YourControlName}Example.txt.
4) Set the Build Action in the property section of the {YourControlName}Example.txt file to "Resource"
5) In ExampleControl project in page.xaml.cs file in Page_Loaded metod in ExampleControlList.ItemsSource initialization should add new instance of Example class as follows:
new Example {
ControlType = typeof
(" YourControlNameExample),
Source = "" YourControlNameExample.txt",
Title = "YourTitle "

E.g.(Minimap) :
new Example
ControlType = typeof
Source = "MiniMapExample.txt",
Title = "Mini Map"

Last edited Feb 18, 2010 at 5:46 AM by soulsolutions, version 1


No comments yet.