Offsetting element in complex UI

3 posts, 1 answers
  1. Peter
    Peter avatar
    48 posts
    Member since:
    Oct 2016

    Posted 12 Oct 2017 Link to this post

    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

     

     

  2. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    3086 posts

    Posted 17 Oct 2017 Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Peter
    Peter avatar
    48 posts
    Member since:
    Oct 2016

    Posted 30 Oct 2017 in reply to Petar Mladenov Link to this post

    Hi Petar,

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

    Pete

Back to Top