Please give me a sample of adding a custom tooltip to the XamWebMap MapLayer that would be attached to an .shp file and would have a TextBlock bound to a DataMapping item.
Hi flowerdj,
By default you could use Caption inside DataMapping:
<ig:MapLayer
Name="World" Brushes="#4C2C42C0 #4C218B93 #4CDC1C1C #4C3D7835 #4C701B51"
FillMode="Choropleth" WorldRect="{Binding ElementName=MainWindow, Path=WorldRect}"
>
<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>
If you want a custom tooltip you need to create a DataTemplate inside ValueTemplate and attach a ToolTip to some of the elements in your DataTaplete.Here is an appropriate sample:
DataMapping="Name=CNTRY_NAME; Value=POP_CNTRY; Caption=CNTRY_NAME" />
<ig:MapLayer.ValueTemplate>
<DataTemplate>
<Border CornerRadius="4" BorderBrush="#00666666" BorderThickness="2" Background="#00cccccc" Padding="8">
<StackPanel>
<TextBlock FontSize="10" FontWeight="Bold" Text="{Binding Path=Name, StringFormat='Name: {0}'}" />
<ToolTipService.ToolTip>
<TextBlock FontSize="10" FontWeight="Bold" Text="{Binding Path=Value, StringFormat='Population: {0}'}" />
</StackPanel>
</Border>
</ToolTipService.ToolTip>
</DataTemplate>
</ig:MapLayer.ValueTemplate>
Hope this can help :-)
Cheers!
Mihail
This works for a tooltip for the TextBlock within the DataTemplate however, I was hoping to have a tooltip available for the whole element so that if I hovered over any part of it I would see the tooltip. Is there a way to do that?
Here's another way to approach things. You can provide a control for each item to use as the ToolTip using this strategy:The Xaml:
<UserControl.Resources> <DataTemplate x:Key="ToolTipTemplate"> <Border BorderThickness="3" CornerRadius="5" BorderBrush="Azure" Background="AliceBlue"> <Grid Margin="5"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <TextBlock Text="Name:" Margin="0,0,5,0"/> <TextBlock Text="Quantity:" Grid.Row="1" Margin="0,0,5,0" /> <TextBlock Text="{Binding TopSalesperson}" Grid.Column="1" /> <TextBlock Text="{Binding Quantity}" Grid.Row="1" Grid.Column="1" /> </Grid> </Border> </DataTemplate> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <igMap:XamMap x:Name="theMap" > <igMap:XamMap.Layers> <igMap:MapLayer x:Name="theLayer" Imported="theLayer_Imported" DataMapping="Name = Name; ToolTip = ToolTip"> <igMap:MapLayer.Reader> <igMap:ShapeFileReader x:Name="reader" Uri="ShapeFiles/usa_st" DataMapping="Name=STATE_NAME"/> </igMap:MapLayer.Reader> </igMap:MapLayer> </igMap:XamMap.Layers> </igMap:XamMap> </Grid>
And the code behind:
public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); TestDataItem.Template = (DataTemplate)Resources["ToolTipTemplate"]; } private void theLayer_Imported( object sender, Infragistics.Controls.Maps.MapLayerImportEventArgs e) { MapLayer layer = sender as MapLayer; if (layer == null) { return; } if (e.Action != MapLayerImportAction.End) { return; } layer.DataSource = new TestData(); } } public class TestData : ObservableCollection<TestDataItem> { public TestData() { Add(new TestDataItem() { Name = "New Jersey", ToolTipValue = new OtherData() { TopSalesperson = "Jessie", Quantity = 300 } }); } } public class OtherData { public string TopSalesperson { get; set; } public int Quantity { get; set; } } public class TestDataItem { internal static DataTemplate Template { get; set; } public string Name { get; set; } public object ToolTipValue { get; set; } public object ToolTip { get { DataTemplate template = Template; ContentControl control = new ContentControl(); control.ContentTemplate = template; control.Content = ToolTipValue; return control; } } }
Hope this helps!-Graham