Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Display Value Template

The xamMap™ control offers the ability to use a Data Template to customize the look of MapElement objects. The template may be set for a layer by using the ValueTemplate property of the MapLayer object. Any controls that you place inside the template are positioned on each Map Element; therefore, you can use this feature to display any kind of custom information for each element of xamMap. Further, using a Value Template allows you to bind to the Value property of each element. This makes displaying the value in a custom fashion very simple and straight forward.

The following code shows you how to use TextBlocks to display information for the Map Elements.

In XAML:

<igMap:XamMap x:Name="map1">
   <igMap:XamMap.Layers>
      <igMap:MapLayer x:Name="statesLayer">
         <igMap:MapLayer.Reader>
            <igMap:ShapeFileReader Uri="/../../Shapefiles/usa_st" DataMapping="Caption=STATE_ABBR; Value=POP90_SQMI" />
         </igMap:MapLayer.Reader>
         <!-- Using a Value Template to display the Value in a TextBlock -->
         <igMap:MapLayer.ValueTemplate>
            <DataTemplate>
				<StackPanel Orientation="Horizontal" >
					<TextBlock Margin="2" Text="{Binding Value}"
					Foreground ="White" FontWeight="Bold" FontSize="15"
					HorizontalAlignment="Center" VerticalAlignment="Center" >
						<TextBlock.Effect>
							<DropShadowEffect ShadowDepth="1" BlurRadius="10"/>
						</TextBlock.Effect>
					</TextBlock>
					<StackPanel Orientation="Vertical" VerticalAlignment="Center">
						<TextBlock Text="people" FontSize="10" />
						<Rectangle Height="0.5" Fill="Black" HorizontalAlignment="Stretch"></Rectangle>
						<TextBlock Text="sqmi" FontSize="10" />
					</StackPanel>
				</StackPanel>
			</DataTemplate>
         </igMap:MapLayer.ValueTemplate>
      </igMap:MapLayer>
   </igMap:XamMap.Layers>
</igMap:XamMap>
SL DV XamMap Customize XamMap with Value Templates 01.png