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!

Answer 1

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.