In my previous post, I showed how to create a Live Connect powered Windows Metro style app using JavaScript. In this post, I will go through the steps for creating the same app using C#.

If you’re a VB developer, follow the same steps in this post but change the code behind to use VB.

If you’re a Windows Phone developer, this post is for you.

If you haven’t downloaded and installed the Windows Developer Preview, you got to check it out.  It’s a brand new Windows unlike anything before.

If you haven’t downloaded and installed the Live SDK, please do that before taking the following steps. Sign up for the Live Connect technical preview, download and install the LiveSDK.msi.

Sign into your new PC using a Live ID account.  If you must use a domain account or a local account, you can connect your domain or local account to a Live ID account through Control Panel -> Users, click “Connect your Windows Live ID” and following the instructions.

Now you’re ready.  Let’s write our first Metro style app in C# together.

The Managed application UI framework for Metro style apps carries forward the WPF programming paradigm that most .Net UI developers are familiar with.  Application UI is defined in XAML and business logic is implemented in code behind using managed languages like C# and VB.  If you’ve worked with WPF or Silverlight, this should be very intuitive to you.  With that said, let see how we can add Live Connect to your app.

1. Start Visual Studio 11 Express and create a new project called HelloWorldCSharp.  Choose the Visual C# -> Windows Metro style -> Application project template.

CSharpNewProj

2. Bring up the “Add Reference” dialog and choose “Live SDK for Windows Metro style XAML applications” under the Windows -> Extension SDKs tab.  Click “Add” and then “Close”.  Notice that a reference to LiveSDKXAML SDK is added to you project. 

CSharpAddRef

3. Now open the MainPage.xaml file.  Add the following attribute to the root UserControl tag

xmlns:live="using:Microsoft.Live.Controls"

This adds a namespace declaration for the sign-in control we will be using in this xaml file.

4. In the root <Grid> element, add a Canvas control that hosts the sign-in button and two TextBlock controls.

<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
  <Canvas HorizontalAlignment="Left" Height="217" Margin="100,100,0,0" VerticalAlignment="Top" Width="742">
    <live:SignInButton Name="btnSignin" Scopes="wl.signin wl.basic" Margin="100,20,0,0" Foreground="White" Background="Black" />
    <TextBlock Name="tbGreeting" Margin="100,100,0,0" Text="" Width="300" Height="50" FontSize="32"/>
    <TextBlock Name="tbError" Margin="100,150,0,0" Text="" Width="300" Height="50" FontSize="32"/>
  </Canvas>
</Grid> 

You will notice that adding the SignInButton control causes the designer to invalidate the xaml and fail to load. Unfortunately this is an issue that cannot be resolved in the Windows Developer Preview build of Visual Studio. Design time support for custom control is still absent in VS. To work around that, I replace the SignInButton with a regular Button control, do my design work and then replace the SignInButton back when I’m ready to run the app.

You will also notice that I have added the Scopes attribute to the SignInButton. The value “wl.signin wl.basic” indicates that this app will ask the user for permission to access his basic profile information. For more information about different scopes supported by Live Services, visit here.

5. Once we have the markup, now let’s go to MainPage.xaml.cs and add some code. This is what I have:

   1: using System;
   2:  
   3: using Microsoft.Live;
   4: using Microsoft.Live.Controls;
   5:  
   6: namespace HelloWorldCSharp
   7: {
   8:     partial class MainPage
   9:     {
  10:         private LiveConnectClient liveClient;
  11:  
  12:         public MainPage()
  13:         {
  14:             InitializeComponent();
  15:             this.btnSignin.SessionChanged += OnSessionChanged;
  16:         }
  17:  
  18:         private void OnSessionChanged(object sender, LiveConnectSessionChangedEventArgs e)
  19:         {
  20:             if (e.Session != null && e.Session.Status == LiveConnectSessionStatus.Connected)
  21:             {
  22:                 this.liveClient = new LiveConnectClient(e.Session);
  23:  
  24:                 this.GetMe();
  25:             }
  26:             else
  27:             {
  28:                 this.liveClient = null;
  29:             }
  30:         }
  31:  
  32:         private void GetMe()
  33:         {
  34:             this.liveClient.GetCompleted += OnGetMe;
  35:             this.liveClient.GetAsync("me", null);
  36:         }
  37:  
  38:         private void OnGetMe(object sender, LiveOperationCompletedEventArgs e)
  39:         {
  40:             this.liveClient.GetCompleted -= OnGetMe;
  41:             if (e.Error == null)
  42:             {
  43:                 dynamic result = e.Result;
  44:                 this.tbGreeting.Text = "Hello " + result.first_name + " " + result.last_name;
  45:             }
  46:             else
  47:             {
  48:                 this.tbError.Text = e.Error.ToString();
  49:             }
  50:         }
  51:     }
  52: }

Let’s go through what’s happening here.

  • First, I add a OnSessionChanged event handler to the SignInButton’s SessionChanged event, right after InitializeComponent. When the user clicks the sign in button and gives consent to the app, the SessionChanged event is fired indicating user has successfully signed in.
  • When the OnSessionChanged event handler is called, I create a new instance of LiveConnectClient class, passing in the Session object.  The session object contains the access token that the app needs to request data from Live Services.
  • The LiveConnectClient class make it easy to call the Live Service REST API and retrieve user data from the Window Live cloud. Here I’m retrieving the user’s basic profile information by calling GET on “me”.  “me” is a special token used to identify the current user.  You can retrieve other types of user data by passing in the relative url to the resource.  You can find out more about what data is available in the documentation file you download through the Live Connect website.
  • When the GET request complete, my event handler OnGetMe is called.

6. We’re almost done.  Before you can run this app, you need to register it with Windows Live.  You can register your app by going to the application management site and the following the instructions there.

7. After your app is registered you’re ready to go.  Hit F5 in VS.  You will see that a sign-in button shows up.

WWASigninButton

Wait, why is that busy cursor keeps whirling?  I know, but we’re working on it… For now, just ignore the busy cursor.

Click the button, a dialog comes up asking user if they would allow the app to access their data.

CSharpConsent

8. Click yes.  The dialog disappears and the sign-in button changes to “Sign Out” state.  At the same time a greeting is displayed with the user’s name.  Hey, your app has just successfully connected to Live and obtained the user’s profile information.

CSharpSuccess

9. Just like the JavaScript app we created in this post, the Single-Sign-On feature is also available in C# and VB.  Shut down the app, restart it and watch the sign in button change to “Sign Out” state automatically. 

Hope this is helpful to get your first Live Connected app up and running.

For more Live SDK samples, visit our github site at https://github.com/liveservices/LiveSDK.