As you cannot have missed in the news recently Microsoft has re-branded its search offering to be called “Bing”. This means Virtual Earth is now called Bing Maps for Enterprise.
Yesterday Microsoft automatically updated the Ajax Virtual Earth control to use the new Bing logo and you may have wondered why the Silverlight map control was not also updated? The reason is that the logo is a resource in the Silverlight control assembly and is not pointing to an external file.
So does that mean we have to wait for a new release of the Bing Silverlight map control before the logo will get changed? Well yes and no, if you want it to be automatically changed you will have to wait for the next release but there is nothing stopping you changing it yourself now by following the steps below.
Step 1 – Getting your project setup
If you don’t already have a Silverlight project setup with the Bing silverlight maps (Virtual Earth) control working see Chris Pietschmann’s excellent getting started tutorial.
Step 2 - Getting the new logo
You can download the new Bing logo from the url below:
https://www.bing.com/maps/i/logo_powered_by.pngSave this to a folder in your Silverlight project (for example Images) and then in Visual Studio ensure you include the new image in your Silverlight project and set it to be “Content” so that it gets included in the Silverlight xap file.
Step 3 – Hiding the existing logo
You may be asking how we turn off the existing logo? Well luckily the current Silverlight control allows us to hide the logo using the “LogoVisbility” attribute. You can do this in the XAML code as follows:
1: <UserControl x:Class="BingLogoDemo.Page"
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 2:</span> xmlns=<span style="color: #006080">"https://schemas.microsoft.com/winfx/2006/xaml/presentation"</span> </pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 3:</span> xmlns:x=<span style="color: #006080">"https://schemas.microsoft.com/winfx/2006/xaml"</span> </pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 4:</span> xmlns:m=<span style="color: #006080">"clr-namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl"</span>></pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 5:</span> <Grid x:Name=<span style="color: #006080">"LayoutRoot"</span> Background=<span style="color: #006080">"White"</span>></pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 6:</span> <m:Map x:Name=<span style="color: #006080">"mainmap"</span> LogoVisibility=<span style="color: #006080">"Collapsed"</span>></pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 7:</span> </pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 8:</span> </m:Map></pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 9:</span> </Grid></pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 10:</span> </UserControl></pre>
Step 4 – Adding the new logo
Now we need to add the new Bing logo. This is done by adding an image control and setting its “Source” attribute to point to the new logo file we downloaded in step 2. With a little alignment and margins we can get the logo to be in the same position as the original one. Below is the XAML showing you how to do this.
1: <UserControl x:Class="BingLogoDemo.Page"
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 2:</span> xmlns=<span style="color: #006080">"https://schemas.microsoft.com/winfx/2006/xaml/presentation"</span> </pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 3:</span> xmlns:x=<span style="color: #006080">"https://schemas.microsoft.com/winfx/2006/xaml"</span> </pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 4:</span> xmlns:m=<span style="color: #006080">"clr-namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl"</span>></pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 5:</span> <Grid x:Name=<span style="color: #006080">"LayoutRoot"</span> Background=<span style="color: #006080">"White"</span>></pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 6:</span> <m:Map x:Name=<span style="color: #006080">"mainmap"</span> LogoVisibility=<span style="color: #006080">"Collapsed"</span>></pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 7:</span> </pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 8:</span> </m:Map></pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 9:</span> <Image Source=<span style="color: #006080">"/Images/logo_powered_by.png"</span> Width=<span style="color: #006080">"93"</span> Height=<span style="color: #006080">"29"</span> Margin=<span style="color: #006080">"7 0 0 25"</span> VerticalAlignment=<span style="color: #006080">"Bottom"</span> HorizontalAlignment=<span style="color: #006080">"Left"</span> /></pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 10:</span> </Grid></pre>
<pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060"> 11:</span> </UserControl></pre>
That’s it your all done.
Summary
Hopefully this tutorial has shown you just how easy this is to update. We could of course have used the online image file as the source of the image control, rather than including the new file in our application, but that might cause issues in future if Microsoft change the name of the file, or resize it. You can download a sample project showing the new logo below:
