Change Border, Background, Leader Line of Callout

DJurgella

Runtime SDK 100.5.

I'm using callouts to show information after a user clicks on the map (MyMapView.ShowCalloutAt), and I've set the content as a custom element, but the callout still has a white border around it, and the leader line is white.  How can I customize the border and leader line of the callout?

ThadTilton

Hi!

You can't set the properties of the callout shown using GeoView.ShowCalloutAt. You can, however, create a Callout object, set its display properties, and add it to the map view. Here's an example:

<SPAN class="comment token">// Create a Callout (FrameworkElement), set its content and appearance.</SPAN>
Callout customCallout <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Callout</SPAN>
<SPAN class="punctuation token">{</SPAN>
    Background <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">System<SPAN class="punctuation token">.</SPAN>Windows<SPAN class="punctuation token">.</SPAN>Media<SPAN class="punctuation token">.</SPAN>SolidColorBrush</SPAN><SPAN class="punctuation token">(</SPAN>System<SPAN class="punctuation token">.</SPAN>Windows<SPAN class="punctuation token">.</SPAN>Media<SPAN class="punctuation token">.</SPAN>Colors<SPAN class="punctuation token">.</SPAN>CornflowerBlue<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
    BorderBrush <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">System<SPAN class="punctuation token">.</SPAN>Windows<SPAN class="punctuation token">.</SPAN>Media<SPAN class="punctuation token">.</SPAN>SolidColorBrush</SPAN><SPAN class="punctuation token">(</SPAN>System<SPAN class="punctuation token">.</SPAN>Windows<SPAN class="punctuation token">.</SPAN>Media<SPAN class="punctuation token">.</SPAN>Colors<SPAN class="punctuation token">.</SPAN>PaleVioletRed<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
    BorderThickness <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">System<SPAN class="punctuation token">.</SPAN>Windows<SPAN class="punctuation token">.</SPAN>Thickness</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">5</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">5</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">5</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
    Content <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Custom content goes here"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// Set the callout location on the display using an attached property on GeoView.</SPAN>
GeoView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">SetViewOverlayAnchor</SPAN><SPAN class="punctuation token">(</SPAN>customCallout<SPAN class="punctuation token">,</SPAN> mapLocation<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// Add the callout to the map view overlay collection.</SPAN>
MyMapView<SPAN class="punctuation token">.</SPAN>Overlays<SPAN class="punctuation token">.</SPAN>Items<SPAN class="punctuation token">.</SPAN><SPAN class="token function">Add</SPAN><SPAN class="punctuation token">(</SPAN>customCallout<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I hope that helps! -Thad