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.
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.
3. Now open the MainPage.xaml file. Add the following attribute to the root UserControl tag
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"/>
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;
3: using Microsoft.Live;
4: using Microsoft.Live.Controls;
6: namespace HelloWorldCSharp
8: partial class MainPage
10: private LiveConnectClient liveClient;
12: public MainPage()
15: this.btnSignin.SessionChanged += OnSessionChanged;
18: private void OnSessionChanged(object sender, LiveConnectSessionChangedEventArgs e)
20: if (e.Session != null && e.Session.Status == LiveConnectSessionStatus.Connected)
22: this.liveClient = new LiveConnectClient(e.Session);
28: this.liveClient = null;
32: private void GetMe()
34: this.liveClient.GetCompleted += OnGetMe;
35: this.liveClient.GetAsync("me", null);
38: private void OnGetMe(object sender, LiveOperationCompletedEventArgs e)
40: this.liveClient.GetCompleted -= OnGetMe;
41: if (e.Error == null)
43: dynamic result = e.Result;
44: this.tbGreeting.Text = "Hello " + result.first_name + " " + result.last_name;
48: this.tbError.Text = e.Error.ToString();
Let’s go through what’s happening here.
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.
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.
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.
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.