How to set opacity of Bing Map API layer but retain full 100% opacity for PushPins objects?

Question

I'd like to fade the Aerial map layer by setting the opacity. BUT, i'd like to retain no alpha (no opacity) for any objects (i.e. pushpins) that are rendered on top of the map.

Anyone know if this is feasible (does API support this in some way)?

Thanks!

score 1 · Accepted Answer · answered May 07 '11 at 13:46

What is needed is a way to style the internal MapTileLayer that the Map control uses to display the map itself. Unfortunately the API does not provide that level of access.

However we can use the VisualTreeHelper to gain access to the MapTileLayer. I use the extensions class in this blog to help with that. With this class present in the project we could do something cludgy like this:-

        MapTileLayer tileLayer = myMapControl.Descendents().OfType<MapTileLayer>().FirstOrDefault();
        if (tileLayer != null)
        {
            tileLayer.Opacity = 0.5;  // set the opacity desired.
        }

However its probably best to do it properly by creating a new class that derives from Map and assigning a style instead of a single property like Opacity.

[StyleTypedProperty(Property = "TileLayerStyle", StyleTargetType = typeof(MapTileLayer))]
public class MapEx : Map
{
    #region public Style TileLayerStyle
    public Style TileLayerStyle
    {
        get { return GetValue(TileLayerStyleProperty) as Style; }
        set { SetValue(TileLayerStyleProperty, value); }
    }

    public static readonly DependencyProperty TileLayerStyleProperty =
        DependencyProperty.Register(
            "TileLayerStyle",
            typeof(Style),
            typeof(MapEx),
            new PropertyMetadata(null, OnTileLayerStylePropertyChanged));

    private static void OnTileLayerStylePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        MapEx source = d as MapEx;
        source.SetTileLayerStyle();
    }
    #endregion public Style TileLayerStyle

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        SetTileLayerStyle();
    }

    private void SetTileLayerStyle()
    {
        MapTileLayer tileLayer = this.Descendents().OfType<MapTileLayer>().FirstOrDefault();
        if (tileLayer != null)
        {
            tileLayer.Style = TileLayerStyle;
        }
    }

With this derivative in place we can do this:-

<UserControl x:Class="HostBingMaps.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:HostBingMaps"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
    xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl">
  <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <Style x:Key="TileLayerStyle" TargetType="m:MapTileLayer">
                <Setter Property="Opacity" Value="0.2" />
            </Style>
        </Grid.Resources>
        <local:MapEx Mode="Aerial" TileLayerStyle="{StaticResource TileLayerStyle}" AnimationLevel="UserInput" UseInertia="True"  CredentialsProvider="__creds_here__">
              <!-- Pushpins here --> 
      </local:MapEx>
    </Grid>
</UserControl>

The pushpins will remain fully opaque but the map image itself will be faded out.

Sweet! I'll check this out next week when i get a chance to play around with this extension. But tell me one thing. What is VisualTreeHelper? — AlvinfromDiaspar, May 08 '11 at 06:44
@AlvinfromDiaspar: See http://msdn.microsoft.com/en-us/library/system.windows.media.visualtreehelper%28VS.95%29.aspx — AnthonyWJones, May 08 '11 at 07:59
Cool. Thanks. But this visual tree helper doesnt look very helpful at all. I've written recursive visual tree crawlers that seem more robust than this. Am i missing something useful about this? — AlvinfromDiaspar, May 11 '11 at 04:48
@AlvinfromDiaspar: Are you refering the "VisualTreeEnumerator"? If so in what way is it not robust? — AnthonyWJones, May 11 '11 at 11:42
is there a way to do just the opposite? I mean, make the pushpins non visible for example when zooming out a lot. thx! — Daniel Perez, Apr 09 '12 at 18:16

How to set opacity of Bing Map API layer but retain full 100% opacity for PushPins objects?

1 Answers1