Creating a Visual Studio LightSwitch Custom Silverlight Control (Using Infragistics Components)

[Infragistics] Mihail Mateev / Saturday, September 4, 2010

Using Visual Studio LightSwitch, you have a possibility in the use of Custom Silverlight Controls. With a Custom Silverlight Control, you can implement functionality that is outside the normal abilities of LightSwitch.

The first question if some company has an interest in Visual Studio LightSwitch applications is how to now be re-written as a regular Silverlight application because it “can’t perform the new requirements”.

To extent a Visual Studio LightSwitch application you may find that in most cases, you just need to create Silverlight Custom Controls, and plug them into LightSwitch.

Note: you need Visual Studio Professional (or higher) to create Custom Silverlight Controls.

This article demonstrates how to use a ready to use Silverlight Custom Control in Visual Studio LightSwitch.

The LightSwitch Sample Project

Requirements:

Software:
•    Visual Studio 2010
•    Visual Studio LightSwitch Beta 1: details.aspx-FamilyID=37551a54-bfd3-4af6-a513-676bbb2dfb69&displaylang=en
•    Infragistics XamMap component: NetAdvantage for Silverlight Data Visualization 2010 vol.2
http://ko.infragistics.com/dotnet/netadvantage/silverlight/data-visualization.aspx#Downloads

Sample data:

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

Demo application is based on an application, used for the article:"Introduction to Visual Studio LightSwitch”

Steps to cerate a sample application:

Get a sample from article: "Introduction to Visual Studio LightSwitch”
In the LightSwitch application add in IGCustomers table a field, named Country.
Add a new project from type Silverlight Class Library named XamMapLibrary
Add a new item (Silverlight User Control) to the project, named XamMapControl
Implement additional logic in the XamMapControl to highlight a country by name.
Add a new Silverlight User Control to the project, named LightSwitchMap. This control will contain
code for binding to specific properties from the screen DataContext.
Run the application

Get a sample from article: "Introduction to Visual Studio LightSwitch”

In the LightSwitch application add in IGCustomers table a field, named Country.

Add a new project from type Silverlight Class Library named XamMapLibrary

Add a new item (Silverlight User Control) to the project, named XamMapControl

Copy a code from a sample application for the article "Customizing the XamMap MapNavigationPane Control Template"

<UserControl x:Class="XamMapLibrary.XamMapControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ig="clr-namespace:Infragistics.Controls.Maps;assembly=InfragisticsSL4.Controls.Maps.XamMap.v10.2" mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>

        <LinearGradientBrush x:Key="PanCtrlBackgroundFill" EndPoint="0.5,1" StartPoint="0.5,0">

            <GradientStop Color="#FFffffff" Offset="0"/>

            <GradientStop Color="#FFf8f9fa" Offset="0.28888899087905884"/>

            <GradientStop Color="#FFd9dee2" Offset="0.7555559873580933"/>

            <GradientStop Color="#FFcfd5da" Offset="0.9833329916000366"/>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="NaviBorderFill" EndPoint="0.5,1" StartPoint="0.5,0">

            <GradientStop Color="#FFA3AEB9"/>

            <GradientStop Color="#FF617584" Offset="1"/>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="GenericBackgroundGradient" EndPoint=".7,1" StartPoint=".7,0">

            <GradientStop Color="#00000000" Offset="0"/>

            <GradientStop Color="#06000000" Offset="0.375"/>

            <GradientStop Color="#1a000000" Offset="0.625"/>

            <GradientStop Color="#39000000" Offset="1"/>

        </LinearGradientBrush>

        <Style x:Key="Arrow" TargetType="Button">

            <Setter Property="IsEnabled" Value="true"/>

            <Setter Property="IsTabStop" Value="true"/>

            <Setter Property="Background" Value="#FF003255"/>

            <Setter Property="Foreground" Value="#FF808080"/>

            <Setter Property="MinWidth" Value="12"/>

            <Setter Property="MinHeight" Value="8"/>

            <Setter Property="Margin" Value="0"/>

            <Setter Property="HorizontalContentAlignment" Value="Center"/>

            <Setter Property="VerticalContentAlignment" Value="Center"/>

            <Setter Property="Cursor" Value="Arrow"/>

            <Setter Property="FontSize" Value="11"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Grid x:Name="grid" Background="#00FFFFFF">

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Normal">

                                        <Storyboard/>

                                    </VisualState>

                                    <VisualState x:Name="MouseOver">

                                        <Storyboard>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="pathMouseOver">

                                                <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="-3"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="pathMouseOver">

                                                <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path">

                                                <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="3"/>

                                            </DoubleAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Pressed">

                                        <Storyboard>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="pathMouseOver">

                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-3"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="pathMouseOver">

                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path">

                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF00A8FF"/>

                                            </ColorAnimationUsingKeyFrames>

                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="pathMouseOver">

                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF00A8FF"/>

                                            </ColorAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path">

                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="3"/>

                                            </DoubleAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Disabled"/>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Stretch" Margin="4,5,4,4" Visibility="Collapsed" VerticalAlignment="Stretch" d:IsHidden="True"/>

                            <Path x:Name="path" Data="M 68,30 C68,30 62,36 62,36 62,36 64,38 64,38 64,38 68,34 68,34 68,34 72,38 72,38 72,38 74,36 74,36 74,36 68,30 68,30 z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" Height="8" Opacity="1" RenderTransformOrigin="0.5,0.5" Stretch="Fill" VerticalAlignment="Center" Width="12">

                                <Path.RenderTransform>

                                    <TransformGroup>

                                        <ScaleTransform/>

                                        <SkewTransform/>

                                        <RotateTransform/>

                                        <TranslateTransform/>

                                    </TransformGroup>

                                </Path.RenderTransform>

                            </Path>

                            <Path x:Name="pathMouseOver" Data="M 68,30 C68,30 62,36 62,36 62,36 64,38 64,38 64,38 68,34 68,34 68,34 72,38 72,38 72,38 74,36 74,36 74,36 68,30 68,30 z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" Height="8" Opacity="0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" VerticalAlignment="Stretch" Width="12" d:LayoutOverrides="Height">

                                <Path.RenderTransform>

                                    <TransformGroup>

                                        <ScaleTransform/>

                                        <SkewTransform/>

                                        <RotateTransform/>

                                        <TranslateTransform/>

                                    </TransformGroup>

                                </Path.RenderTransform>

                            </Path>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <LinearGradientBrush x:Key="FitBtnGlyphForegroundFill" EndPoint="0.7009506225585938,0.8659271240234375" StartPoint="0.4,0.2">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FF666666" Offset="0"/>

                    <GradientStop Color="#FF8695a4" Offset="1"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="FitBtnOuterBevelFill" EndPoint="0.5,1" StartPoint="0.5,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FFa7afb6" Offset="0"/>

                    <GradientStop Color="#FFffffff" Offset="0.5"/>

                    <GradientStop Color="#FFffffff" Offset="1"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="FitBtnCenterFill" EndPoint="0.5,1" StartPoint="0.5,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FFf6f7f8" Offset="0"/>

                    <GradientStop Color="#FF8f9da9" Offset="1"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <SolidColorBrush x:Key="FitBtnCenterBorderFill" Color="#FF8594A3"/>

        <Style x:Key="FitBtn" TargetType="Button">

            <Setter Property="IsEnabled" Value="true"/>

            <Setter Property="IsTabStop" Value="true"/>

            <Setter Property="Background" Value="#FF003255"/>

            <Setter Property="Foreground" Value="{StaticResource FitBtnGlyphForegroundFill}"/>

            <Setter Property="MinWidth" Value="5"/>

            <Setter Property="MinHeight" Value="5"/>

            <Setter Property="Margin" Value="0"/>

            <Setter Property="HorizontalContentAlignment" Value="Center"/>

            <Setter Property="VerticalContentAlignment" Value="Center"/>

            <Setter Property="Cursor" Value="Arrow"/>

            <Setter Property="FontSize" Value="11"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Grid>

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Normal"/>

                                    <VisualState x:Name="MouseOver">

                                        <Storyboard/>

                                    </VisualState>

                                    <VisualState x:Name="Pressed">

                                        <Storyboard/>

                                    </VisualState>

                                    <VisualState x:Name="Disabled">

                                        <Storyboard/>

                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="4,5,4,4" Visibility="Collapsed"/>

                            <Ellipse x:Name="OuterBevel" Fill="{StaticResource FitBtnOuterBevelFill}"/>

                            <Ellipse Fill="{StaticResource FitBtnCenterFill}" Margin="1,1,1,1" Stroke="{StaticResource FitBtnCenterBorderFill}"/>

                            <Path x:Name="pathShdw" Data="M2,0 L3,0 L3,2 L5,2 L5,3 L3,3 L3,5 L2,5 L2,3 L0,3 L0,2 L2,2 L2,0 z" Fill="#99FFFFFF" HorizontalAlignment="Stretch" Margin="6,6,4,4" Stretch="Fill" VerticalAlignment="Stretch"/>

                            <Path x:Name="path" Data="M2,0 L3,0 L3,2 L5,2 L5,3 L3,3 L3,5 L2,5 L2,3 L0,3 L0,2 L2,2 L2,0 z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" Margin="5,5,5,5" Stretch="Fill" VerticalAlignment="Stretch"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <LinearGradientBrush x:Key="BorderFill" EndPoint="0.5,1" StartPoint="0.5,0">

            <GradientStop Color="#FFA3AEB9"/>

            <GradientStop Color="#FF8399A9" Offset="0.375"/>

            <GradientStop Color="#FF718597" Offset="0.375"/>

            <GradientStop Color="#FF617584" Offset="1"/>

        </LinearGradientBrush>

        <Style x:Key="ZoomOut" TargetType="Button">

            <Setter Property="IsEnabled" Value="true"/>

            <Setter Property="IsTabStop" Value="true"/>

            <Setter Property="Background" Value="#FF003255"/>

            <Setter Property="Foreground" Value="{StaticResource BorderFill}"/>

            <Setter Property="MinWidth" Value="5"/>

            <Setter Property="MinHeight" Value="5"/>

            <Setter Property="Margin" Value="0"/>

            <Setter Property="HorizontalContentAlignment" Value="Center"/>

            <Setter Property="VerticalContentAlignment" Value="Center"/>

            <Setter Property="Cursor" Value="Arrow"/>

            <Setter Property="FontSize" Value="11"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Grid Background="#00FFFFFF">

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Normal">

                                        <Storyboard/>

                                    </VisualState>

                                    <VisualState x:Name="MouseOver">

                                        <Storyboard/>

                                    </VisualState>

                                    <VisualState x:Name="Pressed">

                                        <Storyboard/>

                                    </VisualState>

                                    <VisualState x:Name="Disabled"/>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Stretch" Visibility="Collapsed" VerticalAlignment="Stretch"/>

                            <Rectangle x:Name="rectangleShdw" Fill="#FFFFFFFF" HorizontalAlignment="Center" Height="2" VerticalAlignment="Center" Width="10"/>

                            <Rectangle x:Name="rectangle" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" Height="2" Margin="0,0,0,2" VerticalAlignment="Center" Width="10"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <LinearGradientBrush x:Key="ZoomPaneSliderOuterBevelTopFill" EndPoint="1,1" StartPoint="0,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FFc2cad0" Offset="0"/>

                    <GradientStop Color="#FFFFFFFF" Offset="1"/>

                    <GradientStop Color="#FFDCE0E4" Offset="0.605"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <Style x:Key="ZoomIn" TargetType="Button">

            <Setter Property="IsEnabled" Value="true"/>

            <Setter Property="IsTabStop" Value="true"/>

            <Setter Property="Background" Value="#FF003255"/>

            <Setter Property="Foreground" Value="{StaticResource BorderFill}"/>

            <Setter Property="MinWidth" Value="5"/>

            <Setter Property="MinHeight" Value="5"/>

            <Setter Property="Margin" Value="0"/>

            <Setter Property="HorizontalContentAlignment" Value="Center"/>

            <Setter Property="VerticalContentAlignment" Value="Center"/>

            <Setter Property="Cursor" Value="Arrow"/>

            <Setter Property="FontSize" Value="11"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Grid Background="#00FFFFFF">

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Normal">

                                        <Storyboard/>

                                    </VisualState>

                                    <VisualState x:Name="MouseOver">

                                        <Storyboard/>

                                    </VisualState>

                                    <VisualState x:Name="Pressed">

                                        <Storyboard/>

                                    </VisualState>

                                    <VisualState x:Name="Disabled"/>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Stretch" Visibility="Collapsed" VerticalAlignment="Stretch"/>

                            <Path x:Name="pathShdw" Data="M2,0 L3,0 L3,2 L5,2 L5,3 L3,3 L3,5 L2,5 L2,3 L0,3 L0,2 L2,2 L2,0 z" Fill="#FFFFFFFF" HorizontalAlignment="Stretch" Height="10" Margin="0,1,0,0" Stretch="Fill" VerticalAlignment="Stretch" Width="10"/>

                            <Path x:Name="path" Data="M2,0 L3,0 L3,2 L5,2 L5,3 L3,3 L3,5 L2,5 L2,3 L0,3 L0,2 L2,2 L2,0 z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" Height="10" Stretch="Fill" VerticalAlignment="Stretch" Width="10"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <LinearGradientBrush x:Key="ZoomPaneSliderOuterBevelBottomFill" EndPoint="1,1" StartPoint="0,.5">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FFD4DADE" Offset="0.2"/>

                    <GradientStop Color="#FFFFFFFF" Offset="0.577"/>

                    <GradientStop Color="#FFD4DADE" Offset="0.95"/>

                    <GradientStop Color="#FFFFFFFF" Offset="0.655"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="ZoomPaneSliderBorderFill" EndPoint="0,1" StartPoint="0,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FF8594a3" Offset="0"/>

                    <GradientStop Color="#FFa3aeb9" Offset="1"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="ZoomPaneSliderOverlayFill" EndPoint="0.5,1" StartPoint="0.5,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FFffffff" Offset="0"/>

                    <GradientStop Color="#f1ffffff" Offset="0.3700000047683716"/>

                    <GradientStop Color="#e4ffffff" Offset="0.6299999952316284"/>

                    <GradientStop Color="#ccffffff" Offset="1"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="SliderTrackBackgroundFill" EndPoint="1,0" StartPoint="0,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FFd3d8dd" Offset="1"/>

                    <GradientStop Color="#FFfafafb" Offset="0"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <SolidColorBrush x:Key="SliderTrackRailBorderFill" Color="#FFA2ACB7"/>

        <LinearGradientBrush x:Key="SliderTrackRailBackgroundFill" EndPoint="1,0" StartPoint="0,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FFd3d9dd" Offset="0"/>

                    <GradientStop Color="#FFffffff" Offset="0.75"/>

                    <GradientStop Color="#FFffffff" Offset="1"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="ZoomRangeThumbCenterFill" EndPoint="0.5,1" StartPoint="0.5,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FFffffff" Offset="0"/>

                    <GradientStop Color="#FFa3aeb9" Offset="1"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <SolidColorBrush x:Key="ZoomRangeThumbBorderFill" Color="#FF8399A9"/>

        <SolidColorBrush x:Key="ZoomRangeThumbHighlightFill" Color="#FFFFFFFF"/>

        <ControlTemplate x:Key="ZoomRangeThumb" TargetType="Thumb">

            <Grid>

                <Ellipse Fill="{StaticResource ZoomRangeThumbCenterFill}" Stroke="{StaticResource ZoomRangeThumbBorderFill}"/>

                <Ellipse HorizontalAlignment="Stretch" Margin="1,1,1,1" Stroke="{StaticResource ZoomRangeThumbHighlightFill}" VerticalAlignment="Stretch"/>

            </Grid>

        </ControlTemplate>

        <Style x:Key="ZoomRange" TargetType="Slider">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Slider">

                        <Grid x:Name="Root">

                            <Grid.Resources>

                                <ControlTemplate x:Key="RepeatButtonTemplate">

                                    <Grid x:Name="Root" Background="Transparent" Opacity="0"/>

                                </ControlTemplate>

                            </Grid.Resources>

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualStateGroup.Transitions>

                                        <VisualTransition GeneratedDuration="0"/>

                                    </VisualStateGroup.Transitions>

                                    <VisualState x:Name="Normal">

                                        <Storyboard/>

                                    </VisualState>

                                    <VisualState x:Name="MouseOver">

                                        <Storyboard/>

                                    </VisualState>

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>

                                            <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="FocusStates">

                                    <VisualStateGroup.Transitions>

                                        <VisualTransition GeneratedDuration="0"/>

                                    </VisualStateGroup.Transitions>

                                    <VisualState x:Name="Unfocused">

                                        <Storyboard/>

                                    </VisualState>

                                    <VisualState x:Name="Focused">

                                        <Storyboard>

                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <Grid x:Name="HorizontalTemplate">

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="Auto"/>

                                    <ColumnDefinition Width="Auto"/>

                                    <ColumnDefinition Width="*"/>

                                </Grid.ColumnDefinitions>

                                <Rectangle Grid.ColumnSpan="3" Grid.Column="0" Fill="#FFE6EFF7" Height="3" Margin="5,0,5,0" Stroke="Black" StrokeThickness="0.5"/>

                                <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}"/>

                                <Thumb x:Name="HorizontalThumb" Grid.Column="1" Height="18" Width="11"/>

                                <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}"/>

                            </Grid>

                            <Grid x:Name="VerticalTemplate" Visibility="Collapsed">

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="*"/>

                                    <RowDefinition Height="Auto"/>

                                    <RowDefinition Height="Auto"/>

                                </Grid.RowDefinitions>

                                <Border BorderBrush="{StaticResource SliderTrackRailBorderFill}" BorderThickness="1,0,0,0" Background="{StaticResource SliderTrackRailBackgroundFill}" CornerRadius="4,4,4,4" Height="Auto" Grid.Row="0" Grid.RowSpan="3" VerticalAlignment="Stretch" Width="8"/>

                                <RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Grid.RowSpan="3" Template="{StaticResource RepeatButtonTemplate}"/>

                                <Thumb x:Name="VerticalThumb" Height="12" Grid.Row="1" Template="{StaticResource ZoomRangeThumb}" Width="12"/>

                                <RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Grid.Row="0" Template="{StaticResource RepeatButtonTemplate}"/>

                            </Grid>

                            <Rectangle x:Name="FocusVisual" IsHitTestVisible="false" Opacity="0" StrokeDashCap="Round" Stroke="#666666" StrokeDashArray=".2 5" Visibility="Collapsed"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

            <Setter Property="Orientation" Value="Vertical"/>

        </Style>

        <SolidColorBrush x:Key="ZoomBtnBorderFill" Color="#FFA3AEB9"/>

        <LinearGradientBrush x:Key="ZoomBtnCenterFill" EndPoint="1,1" StartPoint="0,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FFfbfcfc" Offset="0"/>

                    <GradientStop Color="#FFc2c9d0" Offset="1"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <ig:SRProvider x:Key="SR"/>

        <LinearGradientBrush x:Key="PanPaneInnerBorderFill" EndPoint="0.5,1" StartPoint="0.5,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FFffffff" Offset="0"/>

                    <GradientStop Color="#bfffffff" Offset="0.5"/>

                    <GradientStop Color="#00ffffff" Offset="1"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="BaseBgDarkInnerBorder" EndPoint="0.5,1" StartPoint="0.5,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FF8594a3" Offset="0"/>

                    <GradientStop Color="#FFc8cfd5" Offset="1"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="BaseBgCenterCircleLightBorderFill" EndPoint="0.5,1" StartPoint="0.5,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#00ffffff" Offset="0"/>

                    <GradientStop Color="#FFffffff" Offset="0.75"/>

                    <GradientStop Color="#FFffffff" Offset="1"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="BaseBgCenterCircleBackgroundFill" EndPoint="0,1" StartPoint="0,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FFc8cfd5" Offset="0"/>

                    <GradientStop Color="#FF5a6978" Offset="1"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="BasebgCenterCircleOverlay" EndPoint="0,0.9863013698630136" StartPoint="0,0">

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="#FFffffff" Offset="0"/>

                    <GradientStop Color="#FFffffff" Offset="0.20000000298023224"/>

                    <GradientStop Color="#f1ffffff" Offset="0.3700000047683716"/>

                    <GradientStop Color="#DAffffff" Offset="0.6299999952316284"/>

                    <GradientStop Color="#ccffffff" Offset="0.800000011920929"/>

                    <GradientStop Color="#8cffffff" Offset="1"/>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

        <Style x:Key="MapNavigationPaneCustomStyle" TargetType="ig:MapNavigationPane">

            <Setter Property="Background" Value="{StaticResource PanCtrlBackgroundFill}"/>

            <Setter Property="BorderBrush" Value="{StaticResource NaviBorderFill}"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ig:MapNavigationPane">

                        <Grid>

                            <Grid x:Name="HorizontalRoot">

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="auto"/>

                                    <ColumnDefinition Width="auto"/>

  

                                    <ColumnDefinition Width="auto"/>

                                    <ColumnDefinition Width="auto"/>

                                    <ColumnDefinition Width="*"/>

                                </Grid.ColumnDefinitions>

                                <Rectangle Grid.ColumnSpan="5" Grid.Column="0" Fill="White" RadiusY="4" RadiusX="4"/>

                                <Rectangle Grid.ColumnSpan="5" Grid.Column="0" Fill="{StaticResource GenericBackgroundGradient}" RadiusY="4" RadiusX="4" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1.3"/>

                                <Grid x:Name="HorizontalPanControl" Grid.Column="0">

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="*"/>

                                        <ColumnDefinition Width="*"/>

                                        <ColumnDefinition Width="*"/>

                                    </Grid.ColumnDefinitions>

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="*"/>

                                        <RowDefinition Height="*"/>

                                        <RowDefinition Height="*"/>

                                    </Grid.RowDefinitions>

                                    <Button x:Name="HorizontalPanWestButton" Content="W" Grid.Column="0" Height="20" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Style="{StaticResource Arrow}" Width="20">

                                        <Button.RenderTransform>

                                            <TransformGroup>

                                                <ScaleTransform/>

                                                <SkewTransform/>

                                                <RotateTransform Angle="-90"/>

                                                <TranslateTransform/>

                                            </TransformGroup>

                                        </Button.RenderTransform>

                                    </Button>

                                    <Button x:Name="HorizontalPanSouthButton" Content="S" Grid.Column="1" Height="20" Grid.Row="2" RenderTransformOrigin="0.5,0.5" Style="{StaticResource Arrow}" Width="20">

                                        <Button.RenderTransform>

                                            <TransformGroup>

                                                <ScaleTransform ScaleY="-1"/>

                                                <SkewTransform/>

                                                <RotateTransform/>

                                                <TranslateTransform/>

                                            </TransformGroup>

                                        </Button.RenderTransform>

                                    </Button>

                                    <Button x:Name="HorizontalPanEastButton" Content="E" Grid.Column="2" Height="20" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Style="{StaticResource Arrow}" Width="20">

                                        <Button.RenderTransform>

                                            <TransformGroup>

                                                <ScaleTransform/>

                                                <SkewTransform/>

                                                <RotateTransform Angle="90"/>

                                                <TranslateTransform/>

                                            </TransformGroup>

                                        </Button.RenderTransform>

                                    </Button>

                                    <Button x:Name="HorizontalPanNorthButton" Content="N" Grid.Column="1" Height="20" Grid.Row="0" Style="{StaticResource Arrow}" Width="20"/>

                                    <Button x:Name="HorizontalFitButton" Grid.Column="1" Height="20" Grid.Row="1" Style="{StaticResource FitBtn}" Width="20"/>

                                </Grid>

                                <Button x:Name="HorizontalZoomOutButton" Grid.Column="1" HorizontalAlignment="Center" Height="20" Style="{StaticResource ZoomOut}" VerticalAlignment="Center" Width="20"/>

                                <!--Slider x:Name="HorizontalZoomRange" Grid.Column="4" HorizontalAlignment="Stretch" MinWidth="80" Orientation="Horizontal" VerticalAlignment="Center"/-->

                                <ProgressBar HorizontalAlignment="Left" Grid.Column="5" Visibility="Visible" Margin="0,20,0,20"  Foreground="Red" x:Name="HorizontalZoomRange" Width="100" Background="{StaticResource ZoomPaneSliderOuterBevelTopFill}"/>

                                <Button x:Name="HorizontalZoomInButton" Grid.Column="2" HorizontalAlignment="Center" Height="20" Style="{StaticResource ZoomIn}" VerticalAlignment="Center" Width="20"/>

                                <Button x:Name="HorizontalBackButton"  Grid.Column="3" Content="Back" Width="40" Margin="0,20,0,20" HorizontalAlignment="Right" d:LayoutOverrides="Width"/>

                            </Grid>

                            <Grid x:Name="VerticalRoot">

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="Auto"/>

                                    <RowDefinition Height="*"/>

                                </Grid.RowDefinitions>

                                <Grid x:Name="ZoomControl" Grid.Column="0" Margin="0,-3,0,0" Grid.Row="1" Width="42">

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="32"/>

                                        <RowDefinition Height="*"/>

                                        <RowDefinition Height="32"/>

                                    </Grid.RowDefinitions>

                                    <Border x:Name="StrokeAndCenter" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1" Background="{TemplateBinding Background}" CornerRadius="0,0,21,21" Margin="0,-7,0,0" Grid.Row="0" Grid.RowSpan="3"/>

                                    <Border x:Name="HighlightStroke" BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="0,0,20,20" Margin="1,-5,1,1" Grid.RowSpan="3"/>

                                    <Border x:Name="SliderBvlTop" Background="{StaticResource ZoomPaneSliderOuterBevelTopFill}" CornerRadius="14,14,0,0" Margin="6,6,6,0" Grid.RowSpan="1"/>

                                    <Border x:Name="SliderBvlMid" CornerRadius="0,0,0,0" Height="Auto" Margin="6,0,6,0" Grid.Row="1" Grid.RowSpan="1">

                                        <Border.Background>

                                            <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">

                                                <GradientStop Color="#FFD3D9DE" Offset="0"/>

                                                <GradientStop Color="#FFFFFFFF" Offset="1"/>

                                            </LinearGradientBrush>

                                        </Border.Background>

                                    </Border>

                                    <Border x:Name="SliderBvlBtm" Background="{StaticResource ZoomPaneSliderOuterBevelBottomFill}" Grid.Column="0" CornerRadius="0,0,14,14" Margin="6,0,6,6" Grid.Row="2" Grid.RowSpan="1"/>

                                    <Border x:Name="SliderStroke" Background="{StaticResource ZoomPaneSliderBorderFill}" CornerRadius="13,13,13,13" Margin="8,8,8,8" Grid.RowSpan="3"/>

                                    <Border x:Name="SliderOverlay" Background="{StaticResource ZoomPaneSliderOverlayFill}" CornerRadius="12,12,12,12" Margin="9,9,9,9" Grid.RowSpan="3"/>

                                    <Rectangle Fill="{StaticResource SliderTrackBackgroundFill}" Margin="10,0,10,0" Grid.Row="1" Grid.RowSpan="1"/>

                                    <Slider x:Name="VerticalZoomRange" BorderBrush="#FFFFFFFF" HorizontalAlignment="Center" Margin="0,3,0,3" MinHeight="50" Orientation="Vertical" Grid.Row="1" Style="{StaticResource ZoomRange}" VerticalAlignment="Stretch"/>

                                    <Grid x:Name="ZoomIn">

                                        <Border BorderBrush="{StaticResource ZoomBtnBorderFill}" BorderThickness="0,0,0,1" Background="{StaticResource ZoomBtnCenterFill}" CornerRadius="11,11,0,0" Margin="10,10,10,1"/>

                                        <Rectangle Fill="#FFFFFFFF" Height="1" Margin="10,0,10,0" VerticalAlignment="Bottom"/>

                                        <Button x:Name="VerticalZoomInButton" Content="+" FontWeight="Normal" FontFamily="Arial" HorizontalAlignment="Stretch" Margin="10,10,10,0" Style="{StaticResource ZoomIn}" ToolTipService.ToolTip="{Binding ZoomIn, Source={StaticResource SR}}" VerticalAlignment="Stretch"/>

                                    </Grid>

                                    <Grid x:Name="ZoomOut" Grid.Row="2">

                                        <Border BorderBrush="{StaticResource ZoomBtnBorderFill}" BorderThickness="0,1,0,0" Background="{StaticResource ZoomBtnCenterFill}" CornerRadius="0,0,11,11" Margin="10,0,10,10"/>

                                        <Rectangle Fill="#FFFFFFFF" Height="1" Margin="10,1,10,0" VerticalAlignment="Top"/>

                                        <Button x:Name="VerticalZoomOutButton" Content="-" FontWeight="Normal" FontFamily="Arial" HorizontalAlignment="Stretch" Margin="10,0,10,10" RenderTransformOrigin="0.5,0.5" Style="{StaticResource ZoomOut}" ToolTipService.ToolTip="{Binding ZoomOut, Source={StaticResource SR}}" VerticalAlignment="Stretch"/>

                                    </Grid>

                                </Grid>

                                <Grid x:Name="PanControl" HorizontalAlignment="Center" Height="Auto" VerticalAlignment="Center" d:LayoutOverrides="Width, Height">

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="Auto"/>

                                        <ColumnDefinition Width="Auto"/>

                                        <ColumnDefinition Width="Auto"/>

                                    </Grid.ColumnDefinitions>

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="Auto"/>

                                        <RowDefinition Height="Auto"/>

                                        <RowDefinition Height="Auto"/>

                                    </Grid.RowDefinitions>

                                    <Ellipse x:Name="BaseBg" Grid.ColumnSpan="3" Fill="{TemplateBinding Background}" Margin="0,0,0,0" Grid.RowSpan="3" Stroke="{TemplateBinding BorderBrush}"/>

                                    <Ellipse x:Name="BaseInnerBorder" Grid.ColumnSpan="3" Margin="1,1,1,1" Grid.RowSpan="3" Stroke="{StaticResource PanPaneInnerBorderFill}"/>

                                    <Ellipse x:Name="CenterCircle" Grid.ColumnSpan="3" Fill="{StaticResource BaseBgDarkInnerBorder}" Margin="10,10,10,10" Grid.RowSpan="3" Stroke="{StaticResource BaseBgCenterCircleLightBorderFill}"/>

                                    <Ellipse x:Name="CenterCircleBg" Grid.ColumnSpan="3" Fill="{StaticResource BaseBgCenterCircleBackgroundFill}" Margin="12,12,12,12" Grid.RowSpan="3"/>

                                    <Ellipse x:Name="CenterCircleBgOverlay" Grid.ColumnSpan="3" Fill="{StaticResource BasebgCenterCircleOverlay}" Margin="12,12,12,12" Grid.RowSpan="3"/>

                                    <Button x:Name="VerticalPanNorthButton" Content="N" Grid.Column="1" HorizontalAlignment="Center" Margin="0,19,0,3" Style="{StaticResource Arrow}" ToolTipService.ToolTip="{Binding PanNorth, Source={StaticResource SR}}" VerticalAlignment="Center"/>

                                    <Button x:Name="VerticalPanWestButton" Content="W" HorizontalAlignment="Center" Margin="17,0,3,0" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Style="{StaticResource Arrow}" ToolTipService.ToolTip="{Binding PanWest, Source={StaticResource SR}}" VerticalAlignment="Center">

                                        <Button.RenderTransform>

                                            <TransformGroup>

                                                <ScaleTransform/>

                                                <SkewTransform/>

                                                <RotateTransform Angle="-90"/>

                                                <TranslateTransform/>

                                            </TransformGroup>

                                        </Button.RenderTransform>

                                    </Button>

                                    <Button x:Name="VerticalPanEastButton" Content="E" Grid.Column="2" HorizontalAlignment="Center" Margin="3,0,17,0" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Style="{StaticResource Arrow}" ToolTipService.ToolTip="{Binding PanEast, Source={StaticResource SR}}" VerticalAlignment="Center">

                                        <Button.RenderTransform>

                                            <TransformGroup>

                                                <ScaleTransform/>

                                                <SkewTransform/>

                                                <RotateTransform Angle="90"/>

                                                <TranslateTransform/>

                                            </TransformGroup>

                                        </Button.RenderTransform>

                                    </Button>

                                    <Button x:Name="VerticalPanSouthButton" Content="S" Grid.Column="1" HorizontalAlignment="Center" Margin="0,3,0,19" Grid.Row="2" RenderTransformOrigin="0.5,0.5" Style="{StaticResource Arrow}" ToolTipService.ToolTip="{Binding PanSouth, Source={StaticResource SR}}" VerticalAlignment="Center">

                                        <Button.RenderTransform>

                                            <TransformGroup>

                                                <ScaleTransform ScaleY="-1"/>

                                                <SkewTransform/>

                                                <RotateTransform/>

                                                <TranslateTransform/>

                                            </TransformGroup>

                                        </Button.RenderTransform>

                                    </Button>

                                    <Button x:Name="VerticalFitButton" Content="*" Grid.Column="1" HorizontalAlignment="Stretch" Height="22" Margin="5,8,5,8" Grid.Row="1" Style="{StaticResource FitBtn}" ToolTipService.ToolTip="{Binding FitWindow, Source={StaticResource SR}}" Visibility="Visible" VerticalAlignment="Stretch" Width="22"/>

                                </Grid>

                            </Grid>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </UserControl.Resources>

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

        <ig:XamMap x:Name="xamMapCtrt"  d:LayoutOverrides="Width, Height" >

            <ig:XamMap.Layers>

                <ig:MapLayer 

                    x:Name="World" Brushes="#4C2C42C0 #4C218B93 #4CDC1C1C #4C3D7835 #4C701B51" 

                    FillMode="Choropleth" Imported="World_Imported">

                    <ig:MapLayer.Reader>

                        <ig:ShapeFileReader Uri="ShapeFiles\Cntry00\Cntry00" 

                            DataMapping="Name=CNTRY_NAME; Value=POP_CNTRY; Caption=CNTRY_NAME; ToolTip=CNTRY_NAME" />

                    </ig:MapLayer.Reader>

                    <ig:MapLayer.ValueScale>

                        <ig:LinearScale IsAutoRange="True"/>

                    </ig:MapLayer.ValueScale>

                </ig:MapLayer>

            </ig:XamMap.Layers>

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

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

        </ig:XamMap>

    </Grid>

</UserControl>

Create a new DependencyProperty named SelectedItemName and add code to highlight a selected MapElement.

#region Properties

#region SelectedItemName

  

/// <summary>

/// SelectedItemName Dependency Property

/// </summary>

public static readonly DependencyProperty SelectedItemNameProperty =

    DependencyProperty.Register("SelectedItemName", typeof(string), typeof(XamMapControl),

        new PropertyMetadata("",

            new PropertyChangedCallback(OnSelectedItemNameChanged)));

  

/// <summary>

/// Gets or sets the SelectedItemName property. This dependency property 

/// indicates ....

/// </summary>

public string SelectedItemName

{

    get { return (string)GetValue(SelectedItemNameProperty); }

    set { SetValue(SelectedItemNameProperty, value); }

}

  

/// <summary>

/// Handles changes to the SelectedItemName property.

/// </summary>

private static void OnSelectedItemNameChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

    XamMapControl target = (XamMapControl)d;

    string oldSelectedItemName = (string)e.OldValue;

    string newSelectedItemName = target.SelectedItemName;

    target.OnSelectedItemNameChanged(oldSelectedItemName, newSelectedItemName);

}

  

/// <summary>

/// Provides derived classes an opportunity to handle changes to the SelectedItemName property.

/// </summary>

protected virtual void OnSelectedItemNameChanged(string oldSelectedItemName, string newSelectedItemName)

{

    if (!newSelectedItemName.Equals(oldSelectedItemName))

    {

        RestoreMapLayerSettings();

        InitMap(newSelectedItemName);

    }

  

}

  

#endregion //SelectedItemName

#endregion //Properties

  

#region Methods

#region InitMap

private void InitMap(string newSelectedItemName)

{

    MapLayer world = this.xamMapCtrt.Layers["World"];

  

    foreach (MapElement el in world.Elements)

    {

  

        if (el.Name.Equals(newSelectedItemName))

        {

            el.Fill = new SolidColorBrush(Colors.Red);

            this.xamMapCtrt.WindowRect = el.WorldRect;

        }

    }

}

#endregion //InitMap

  

#region RestoreMapLayerSettings

private void RestoreMapLayerSettings()

{

    MapLayer layer = this.xamMapCtrt.Layers["World"];

    layer.DataSource = null;

  

    layer.DataMapping = null;

  

    layer.Reader.ImportAsync(layer);

  

    xamMapCtrt.ZoomIn();

    xamMapCtrt.WindowFit();

}

#endregion //RestoreMapLayerSettings 

#endregion //Methods

  

#region EventgHandlers

#region World_Imported

private void World_Imported(object sender, MapLayerImportEventArgs e)

{

    InitMap(this.SelectedItemName);

}

#endregion //World_Imported 

#endregion //EventgHandlers

Add a new Silverlight User Control to the project, named LightSwitchMap.

This control will contain code for binding to specific properties from the screen DataContext.

Edit a LightSwitchMap.xaml file:

<UserControl x:Class="XamMapLibrary.LightSwitchMap"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:local="clr-namespace:XamMapLibrary"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    

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

        <local:XamMapControl SelectedItemName="{Binding Screen.IGCustomersCollection.SelectedItem.Country}"/>

    </Grid>

</UserControl>

Edit the screen IGCustomersListDetail.

From menu select: Add Layout Item –> Custom Control.

Add a reference to XamMapLibrary. From XamMapLibrary
select LightSwitchMap control.

Custom control with a name ScreenContent is added in the IGCustomersListDetail screen.
Leave all properties with a default values.

Open the default startup folder %Projects Folder%\InfraOrdersCustom\InfraOrders\Bin\Debug\Web
and add there a folder ShapeFiles with files, used as a data source
from XamMap control

Run the application

Select from the navigation pane: Customers Detail List

Detail list for the customers contains a map with a country of the customer in the detail part
of the screen.

Select a different customer.

In the detail part is displayed the country of the selected customer.

Conclusion:

Visual Studio LightSwitch custom Silverlight controls proposes a quick way to
extend LightSwitch application. It is very easy to use existing Silverlight controls in the
LightSwitch custom controls.

Source code of the demo application you could download here: