How to open a MapTip programmatically

ae

Hi,

Is it possible to open a MapTip programmatically in code-behind? Alternatively, is it possible to make use of a different event than MouseEnter to open the MapTip for a graphic? The reason I ask is that I need to get MapTips working on touchdevices. 

Cheers

AnttiKajanus1

Did you remove BorderPath definition from Template? The control is expecting it.

 <Path x:Name="BorderPath" StrokeLineJoin="Round"          Fill="{TemplateBinding Background}"      Stroke="{TemplateBinding BorderBrush}"      StrokeThickness="{TemplateBinding StrokeThickness}" />

One hack that you can do here is to set BorderPath's Opacity to 0 to get it away from UI and then define correct margin in InfoWindows ContentTemplate.

Something like this:

 <Style TargetType="esri:InfoWindow">             <Setter Property="Background" Value="White" />             <Setter Property="BorderBrush" Value="Black" />             <Setter Property="HorizontalAlignment" Value="Left" />             <Setter Property="VerticalAlignment" Value="Top" />             <Setter Property="Padding" Value="0" />             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate TargetType="esri:InfoWindow">                         <Grid x:Name="Root" RenderTransformOrigin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=RenderTransformOrigin}">                             <VisualStateManager.VisualStateGroups>                                 <VisualStateGroup x:Name="CommonStates">                                     <VisualState x:Name="Show">                                         <Storyboard>                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="Root">                                                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">                                                     <EasingDoubleKeyFrame.EasingFunction>                                                         <BackEase EasingMode="EaseOut" Amplitude=".5"/>                                                     </EasingDoubleKeyFrame.EasingFunction>                                                 </EasingDoubleKeyFrame>                                             </DoubleAnimationUsingKeyFrames>                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="Root">                                                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">                                                     <EasingDoubleKeyFrame.EasingFunction>                                                         <BackEase EasingMode="EaseOut" Amplitude=".5"/>                                                     </EasingDoubleKeyFrame.EasingFunction>                                                 </EasingDoubleKeyFrame>                                             </DoubleAnimationUsingKeyFrames>                                         </Storyboard>                                     </VisualState>                                     <VisualState x:Name="Hide">                                         <Storyboard>                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="Root">                                                 <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0">                                                     <EasingDoubleKeyFrame.EasingFunction>                                                         <CircleEase EasingMode="EaseIn" />                                                     </EasingDoubleKeyFrame.EasingFunction>                                                 </EasingDoubleKeyFrame>                                             </DoubleAnimationUsingKeyFrames>                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="Root">                                                 <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0">                                                     <EasingDoubleKeyFrame.EasingFunction>                                                         <CircleEase EasingMode="EaseIn" />                                                     </EasingDoubleKeyFrame.EasingFunction>                                                 </EasingDoubleKeyFrame>                                             </DoubleAnimationUsingKeyFrames>                                         </Storyboard>                                     </VisualState>                                 </VisualStateGroup>                             </VisualStateManager.VisualStateGroups>                             <Grid.RenderTransform>                                 <ScaleTransform ScaleX="0" ScaleY="0" />                             </Grid.RenderTransform>                               <Path x:Name="BorderPath" StrokeLineJoin="Round"                                  Fill="{TemplateBinding Background}"                                  Stroke="{TemplateBinding BorderBrush}"                                  StrokeThickness="{TemplateBinding StrokeThickness}"                                  Opacity="0" />                               <ContentPresenter                                 ContentTemplate="{TemplateBinding ContentTemplate}"                                 Content="{TemplateBinding Content}"                                 Margin="{TemplateBinding Margin}" />                           </Grid>                     </ControlTemplate>                 </Setter.Value>             </Setter>         </Style>

Then you can use ContentTemplate like this:

 <DataTemplate x:Key="MyFeatureLayerInfoWindowTemplate">                     <Grid Background="Blue" Width="100" Height="20" Margin="0,0,0,-10">                     <TextBlock Text="{Binding Attributes[Number]}" Foreground="White" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" />                 </Grid>             </DataTemplate>

Notice Margin that lowers control by 10. This is default size of "anchor" path (BorderPath) that was hidden from UI. In this case I set to -10 to start from graphics point to up, but if you set that -20 (middle of point) then it will crash. -19 works fine thou.

Usage of InfoWindow:

  <esri:InfoWindow x:Name="MyInfoWindow"                                                   Padding="0"                          CornerRadius="0"                                                    Map="{Binding ElementName=_map}"                           ContentTemplate="{StaticResource MyFeatureLayerInfoWindowTemplate}" />

Notice CornerRadious value that is set to 0. This is used internally to calculate position of InfoWindow.

This example should look about like this:
[ATTACH=CONFIG]27011[/ATTACH]

I haven't tested this solution in production. Honestly I think that the neatest option would be writing your own control to handle this use case but you can do that with InfoWindow. In this solution just style DataTemplate as you like but play around with Positions to see how Margins affect each.

Hope this helped. Here is a code how I set graphic to InfoWindow in this test.

private void OpenOnMouseClick(object sender, Map.MouseEventArgs e)         {             var layer = _map.Layers["Graphics"] as GraphicsLayer;             var graphics = layer.FindGraphicsInHostCoordinates(e.ScreenPoint);             if (graphics.Count() == 1)             {                 var graphic = graphics.ToList()[0];                 MyInfoWindow.Anchor = graphic.Geometry as MapPoint;                 MyInfoWindow.IsOpen = true;                 MyInfoWindow.Content = graphic;             }         }

InfowindowStyling.JPG