Below, on the left, is a screen shot of a grass and dirt tile without the use of an opacity mask. As you can see, the straight line does not make for a very real looking transition! On the right is the result with an opacity mask applied, making for a much more realistic transition.

So how does this work? What we do is we put down a grass layer followed by a layer of dirt on the same tile location. We then apply an Opacity mask to the dirt image which tells Silverlight what level of rendering to do on each pixel within the dirt image.

Example:

Layer 1	+	Layer 2	+	Opacity Mask	=	Final Result

The checker boxes in the opacity image (image #3) above represent the areas that are transparent in the PNG opacity mask. In this area, the image will not be drawn allowing any image below it show through.

Here’s how it looks in our XAML code:

<Image Source="grass.png"></Image>

<Image Source="dirt.png" >

    <Image.OpacityMask >

        <ImageBrush ImageSource="opacityMask.png"></ImageBrush>

    </Image.OpacityMask>

</Image>

Using a PNG image file, transparency is represented by the alpha value only. All the other colors in this image have no impact. Each color is represented by “#AARRGGBB” where AA=alpha hex value, RR=red hex value, GG=green hex value and BB= blue hex value.  Transparency in a pixel increases starting at #00000000 (completely non-transparent) to #FF000000 (completely transparent.

If you do not want to use an image for your opacity mask, you can also use a Brush. For example, this tile shows a transition using a LinearImageBrush:

Layer 1	+	Layer 2	+	Opacity Mask	=	Final Result

Here is the XAML code:

<Image Source="grass.png"></Image>

<Image Source="dirt.png">

    <Image.OpacityMask >

        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">

            <GradientStop Color="#FF000000" Offset="0.0" />

            <GradientStop Color="#00000000" Offset="1.0" />

        </LinearGradientBrush>

    </Image.OpacityMask>

</Image>

Using other brush types, such as the RadialGradientBrush, you can do a lot of other cool effects.

Example:

Layer 1	+	Layer 2	+	Opacity Mask	=	Final Result

XAML Code:

<Image Source="grass.png"></Image>

<Image Source="dirt.png">

    <Image.OpacityMask >

        <RadialGradientBrush GradientOrigin="1,0">

            <GradientStop Color="#FF000000" Offset="0.0" />

            <GradientStop Color="#FF000000" Offset="0.25" />

            <GradientStop Color="#AE000000" Offset="0.75" />

            <GradientStop Color="#00000000" Offset="1.0" />

        </RadialGradientBrush>

    </Image.OpacityMask>

</Image>

Thank you,

–Mike Snow

Once installed, follow these steps to get Bing Maps loaded in your Silverlight application:

1. Open your Silverlight application.
2. In the Solution Explorer, right click on Reference for your Silverlight app and add a reference to: Microsoft.Maps.MapControl.dll as well as Microsoft.Maps.MapControl.Common.dll. Both of these DLL’s where in my C:\Program Files (x86)\Bing Maps Silverlight Control\V1\Libraries folder.
3. Open MainPage.xaml. Add a reference to these assemblies in your UserControl:

xmlns:m="clr-namespace:Microsoft.Maps.MapControl; assembly=Microsoft.Maps.MapControl" 

Next, declare the Map control like this:

<Grid x:Name="LayoutRoot" Background="White">     

   <m:Map CredentialsProvider="" Name="myMap" /> 

</Grid> 

At this point you will see the Map rendering in the designer as seen in the screenshot below:

CrendentialsProvider is the API key you get when you register with the Bing Maps Account center. This is a easy, straight forward process that can be done here: https://www.bingmapsportal.com/. Once on the site click on the Create a Bing Maps account in the left hand side of the page. Once you create the account the key will be automatically provided for you.

Demo:

[silverlight: Tip19_BingMaps.xap]

Thank you,

–Mike