| Comments

Today the Bing team announced the release of their WinRT Bing Maps control (BETA) for XAML applications.  First the goods:

If you are familiar with the Silverlight control, it is similar in nature to how you would use it in your XAML Metro style app.  Here’s some helpful tips that are in the docs but just wanted to elevate them because we have a tendency not to read docs :-).


Installing is simple for Visual Studio.  Download the VSIX file and double-click it.  If you have both Express and Ultimate installed it will prompt you to install it for both installations.  That’s it…you are done.  If you had VS running while you did this, it would be a good idea to restart VS.

Creating a .NET XAML application with maps

Once you restart VS, you can create a new C# Metro style application.  Once you have this, just right click on the project and choose Add Reference and then navigate to the Windows\Extensions section and you will see Bing Maps:

Bing Maps Reference

When you do this you will also want to add a reference to the VCLibs Extension at this time.  Why?  Well, the Map control is a native control.  Adding the VCLibs dependency at this time will add the necessary information in your app’s package manifest noting the dependency and it will install any required package dependencies from the store when your user’s install it.

If you compile your application immediately you will notice an exception during build:

   1: 1>------ Build started: Project: Application17, Configuration: Debug Any CPU ------
   2: 1>C:\Windows\Microsoft.NET\Framework\v4.0.30319\Microsoft.Common.targets(1667,5): error MSB3774: Could not find SDK "Microsoft.VCLibs, Version=11.0".
   3: 1>C:\Windows\Microsoft.NET\Framework\v4.0.30319\Microsoft.Common.targets(1667,5): error MSB3778: "APPX" attributes were found in the SDK manifest file however none of the attributes matched the targeted configuration and architecture and no "APPX" attribute without configuration and architecture could be found. If an appx is required then the project will fail at runtime.
   4: ========== Build: 0 succeeded, 1 failed, 0 up-to-date, 0 skipped ==========

This is because by default the managed applications are “AnyCPU” configuration and the native control doesn’t have that configuration.  Change your app to be either x86 or amd64 and your build will succeed.  This means that yes, you will want to create multiple architecture-specific packages for your app.  The good thing is during package creation, the tools in Visual Studio make this easy for you.

Creating a C++ XAML application with maps

For C++ the step is to just reference the Bing Maps extension SDK and you are done.  C++ projects are always architecture-specific so you don’t have the AnyCPU situation here.

Using the Map control

You’ll need to get set up with an API key, which the getting started docs inform you about.  Once you have that you are ready to use the control.  I’m a fan of putting the API key in my App.xaml as a resource:

   1: <Application.Resources>
   2:     <ResourceDictionary>
   3:         <ResourceDictionary.MergedDictionaries>
   4:             <ResourceDictionary Source="Common/StandardStyles.xaml"/>
   5:         </ResourceDictionary.MergedDictionaries>
   6:         <x:String x:Key="BingMapsApiKey">YOUR KEY HERE</x:String>
   7:     </ResourceDictionary>
   8: </Application.Resources>

And then in my Map control I can just refer to it:

   1: <Page
   2:     x:Class="Application17.BlankPage"
   3:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   5:     xmlns:local="using:Application17"
   6:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   7:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   8:     xmlns:bing="using:Bing.Maps"
   9:     mc:Ignorable="d">
  11:     <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
  12:         <bing:Map x:Name="MyMap" Width="640" Height="480" 
  13:             Credentials="{StaticResource BingMapsApiKey}" />
  14:     </Grid>
  15: </Page>

Once I have those pieces in place, I’m done and can run my app and get full map interactivity.  Notice the xmlns declaration in my Page with the “using:Bing.Maps” notation.  Now when I run:

Bing Maps

I can quickly add location to my app by setting the capability in the Package.appxmanifest and then wiring up the map to center on my current location…

   1: async protected override void OnNavigatedTo(NavigationEventArgs e)
   2: {
   3:     Geolocator geo = new Geolocator();
   4:     geo.DesiredAccuracy = PositionAccuracy.Default;
   5:     var currentPosition = await geo.GetGeopositionAsync();
   7:     Location loc = new Location() { Latitude = currentPosition.Coordinate.Latitude, 
   8:         Longitude = currentPosition.Coordinate.Longitude };
  10:     MyMap.SetView(
  11:         loc, // location
  12:         13, // zoom level
  13:         true); //show animations)
  15: }

I’m excited about what the Bing team has done here and you should go grab it, read the docs and start incorporating location visualization into your Metro style XAML apps today!

Hope this helps!

| Comments

A while back immediately after MIX10 I started messing with Microsoft Translator APIs for Silverlight applications.  I also got some people asking about Windows Phone 7 stuff and messed around with that a bit.  Here’s some post for reference:

In talking with the Translator team following MIX (where they announced they were working on a Silverlight class library for the API.  It was good to interact with their team to understand their direction and provide some feedback on how they were approaching it.  In the meantime, with their direction, I had started working on a simple wrapper for myself while writing the Translator for Seesmic plugin I was writing.  I’ve received a few inquiries on Translator so I thought I’d post my library here for you to see/use.

NOTE: This comes with a ‘works on my machine’ warranty – which means no warranty.  There are some things that should be done to make this a more proper async API (noted below).  You will also need your own Microsoft Translator application ID (API key) in order to use it.

The API is fairly simple and maps to some of the functions of the Translator HTTP-based API.  The following methods are implemented:

  • Detect
  • GetLanguagesForSpeak
  • GetLanguagesForTranslate
  • Speak
  • Translate

You’ll notice that not all the API endpoints are implemented.  Honestly I picked what I was using myself but also what I think would be most useful to application developers. 

Because this is a service, the wrapper implements the above functions as asynchronous methods, so you will see:

  • DetectAsync
  • GetLanguagesForSpeakAsync
  • GetLanguagesForTranslateAsync
  • SpeakAsync
  • TranslateAsync

Clever naming, huh?  It’s very simple to use and here’s a snippet of a BASIC translation implementation:

   1: using System;
   2: using System.Windows;
   3: using System.Windows.Controls;
   4: using TimHeuer.Silverlight;
   6: namespace SilverlightApplication147
   7: {
   8:     public partial class MainPage : UserControl
   9:     {
  10:         TranslatorClient _translator;
  12:         public MainPage()
  13:         {
  14:             InitializeComponent();
  16:             _translator = new TranslatorClient("YOUR_APP_ID");
  17:             _translator.TranslateCompleted += new EventHandler<TranslateCompletedEventArgs>(OnTranslateCompleted);
  18:         }
  20:         void OnTranslateCompleted(object sender, TranslateCompletedEventArgs e)
  21:         {
  22:             Dispatcher.BeginInvoke(() =>
  23:                 {
  24:                     MessageBox.Show(e.TranslatedText);
  25:                 });
  26:         }
  28:         private void TranslateButton_Click(object sender, RoutedEventArgs e)
  29:         {
  30:             // if you needed to detect the source language first you would run DetectAsync to get the Source Language
  31:             // below is an example of TranslateAsync("Du bist wie eine Blume", "de", "en")
  32:             _translator.TranslateAsync(TextToTranslateTextBox.Text, SourceLanguageTextBox.Text, TargetLanguageTextBox.Text);
  33:         }
  34:     }
  35: }

So that’s it.  What are the plans here?  We have been exploring shipping an official translator extension as a part of the Silverlight Toolkit perhaps if folks find it useful.  As I mentioned there are a few things that should probably be changed in this library here, namely making the event arguments be AsyncEventArgs to better match what they are with the Silverlight networking stacks, etc.

I also was messing around with the InstallShield Limited Edition that comes with Visual Studio 2010 so I wrapped all these into an installer for easier deployment (it also includes the source) that you can get here: TimHeuerTranslatorClientSetup.exe

Hope this helps and let me know if you have feedback!

| Comments

Two SDK libraries have released this week, helping developers integrate Silverlight experiences into their applications.

Bing Maps Silverlight Control

At TechEd Europe, the Bing Maps team released version 1.0 of the official Bing Maps Silverlight Control!  This is a replacement for the previous Virtual Earth Javascript control and provides a great DeepZoom experience for using the mapping platform.  Here’s some of the great features for Silverlight developers:

  • Built on Silverlight 3!
  • Designer support for Expression Blend
  • Support for out-of-browser
  • Vector in Pushpin class
  • Data binding – much needed and welcomed
  • UI enhancements (animations for simple features)
  • Embeddable maps

Great release, and a great addition to any Silverlight developer’s toolbox.

Bing Maps in Silverlight using Layer shapes

Download the SDK here: Bing Maps Silverlight Control SDK and check out the interactive SDK.

Facebook .NET SDK

An updated (actually 3.0) release of the Facebook .NET SDK was also released.  Are you a .NET developer writing Facebook applications or desiring to integrate the social network into your applications?  Check out the Facebook .NET SDK which provides:

  • Silverlight-compatible assembly for handling all the logic to communicate with Facebook platform and has specific support for XAML data binding.
  • Web API for Facebook IFrame/FBML applications
  • Using ASP.NET MVC?  There’s an assembly to support that model as well

The Facebook .NET SDK encapsulates the interaction with the developer platform for Facebook and should help .NET developers in web or client get started in a familiar way with Facebook.  I’m excited to see what folks might do with Silverlight and Facebook!

Download the Facebook .NET SDK here and get links to getting started with the Facebook API.