Offsetting element in complex UI

[Peter]

I've seen this post: http://www.telerik.com/forums/hotspot-for-pushpin-image-w-info-bubble but it doesn't quite meet my needs. The example uses InformationLayer but I want to use Visualization Layers - do hotspots work the same in both layer types? 

I'm trying display a collection of images on a map (on a VisualizationLayer). I also want to display a "label" for each image, and the label has various properties I can set (font size, color, offset, offset, enclosed by border, with line from border to image). The attached image gives an idea of what I'm trying to do.

I've tried binding the hotspot offsets to values in my viewmodel, but it seems like they get ignored, but it works if I put constant values for the hotspot in the xaml

e.g. this works:

<telerik:MapLayer.HotSpot>
    <telerik:HotSpot x:Name="hotSpot"
                     XUnits="Pixels"
                     YUnits="Pixels"
                     X="200"
                     Y="200"
                     ElementName="LabelText" />
</telerik:MapLayer.HotSpot>

but this doesn't:

<telerik:MapLayer.HotSpot>
   <telerik:HotSpot x:Name="hotSpot"
                    XUnits="Pixels"
                    YUnits="Pixels"
                    X="{Binding LabelOffsetX}"
                    Y="{Binding LabelOffsetY}"
                    ElementName="LabelText" />
</telerik:MapLayer.HotSpot>

 

I need a way to dynamically change the offsets for individual items. What am I doing something wrong? I've attached a sample app to show this problem.

Thanks,

Pete

 

 

[Petar Mladenov]

Hi Peter,

HotSpot works very similar in InformationLayer and VisualizationLayer (VL). In VL it has additional support provided by the default property accessor mechanism.
You cannot bind X Y because HotSpot is DependencyObject buty it is not FrameworkElement and that is why it does not have DataContext property.
However, you can add HotSpot property in your model:

public double LabelOffsetX { get; set; }
      public double LabelOffsetY { get; set; }

      public HotSpot HotSpot
      {
          get;set;
      }

viewModel.MapItems = new List<ItemViewModel>()
          {
              new ItemViewModel("Building1", location, 1, new ZoomRange(1, 20))
              {
                  HotSpot = new HotSpot() { XUnits = HotSpotUnit.Pixels, YUnits = HotSpotUnit.Pixels, Y = 200, X = 200, ElementName = "LabelText"}
              },
              new ItemViewModel("Building2", location2, 1, new ZoomRange(1, 20))
              {
                  HotSpot = new HotSpot() { XUnits = HotSpotUnit.Pixels, YUnits = HotSpotUnit.Pixels, Y = 200, X = 200, ElementName = "LabelText" }
              },
          };

and bind it in xaml like so:

<DataTemplate x:Key="MapItemAssetLabel" DataType="{x:Type local:ItemViewModel}" >
            <Border BorderThickness="0.5" BorderBrush="Red" telerik:MapLayer.Location="{Binding Location}"
                    telerik:MapLayer.HotSpot="{Binding HotSpot}"
                    >
                <TextBlock x:Name="LabelText"
                           Text="{Binding MapLabel}"
                           Foreground="Red"
                           FontSize="8">
                </TextBlock>
            </Border>
        </DataTemplate>

This last line filled in green is not necessary because this is a job that the default property accessor does internally.

I hope the provided solution could fit well in your scenario.

Regards,
Petar Mladenov
Progress Telerik

[Peter]

Hi Petar,

Thanks for your help. It was very useful and does allow to me do what I needed.

Pete