Consuming WCF in Windows 8 Metro style app


Asynchronous programming is introduced in a new version of programming languages (C++, C# and JavaScript) which are part of the WinRT and .NET. If you are programming in C# you can program asynchronous by using async and await keyword. In fact when you program with async and await you actually program as ordinary synchronous code. That’s the big thing about this type of programming model.
More information about C# asynchronous programming you can found in my previous posts.
Since we have asynchronous programming model in all languages calling service operations asynchrony is not relevant at all. We can just forget it and start writing code like synchronous. To see hot new pattern is reflected in WCF lets implement simple service and simple metro style app consumer.
Implementation of the WCF Simple Service:

  • Create new ASP.NET Empty Web App
  • Add new Item-> WCF Service
  • Name it as SimpleService.svc


Service Interface looks like the following implementation:

[ServiceContract]
public interface ISimpleService
{
    [OperationContract]
    [WebGet(UriTemplate="AllData",ResponseFormat= WebMessageFormat.Json)]
    List<string> GetSomeData();
}

Implement one operation in the service like the following code implementation:

public class SimpleService : ISimpleService
{
    public List<string> GetSomeData()
    {
        List<string> lst = new List<string>();
        for (int i = 0; i < 10; i++)
        {
            System.Threading.Thread.Sleep(100);
            lst.Add(string.Format("Item number {0}", i + 1));
        }
        return lst;
    }
}

The mentioned operation returns list of string but between populating the collection we sleep the current thread for 0,5 second in order to simulate log running operation.

It is necessary to publish the WCF service on remote host, in order to consume it. I still dont know why WCF service cannot be consumed by Metro app on the localhost. After the service is published on remoter host, we are ready to create Metro style Consumer app.

  • Right click on solution item
  • Add New Project
  • Choose Application template from the Metro Style app
  • Name it WCFConsumer

  • Add service reference to C# Metro Stryle app.
  • Add the GridView and some other input controls (buttons, editbox , etc) that we can test application responsiveness. Add the following XAML code in MainPage.xaml:
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="151*"/>
        <ColumnDefinition Width="326*"/>
        <ColumnDefinition Width="207*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="74*"/>
        <RowDefinition Height="185*"/>
        <RowDefinition Height="68*"/>
    </Grid.RowDefinitions>
    <GridView x:Name="gridData" Grid.Column="1" Grid.Row="1" />
    <HyperlinkButton Content="HyperlinkButton"   Grid.Column="1" HorizontalAlignment="Left" Height="25" Margin="58,30,0,0" VerticalAlignment="Top" Width="126"/>
    <Button Content="Button" Grid.Column="1" HorizontalAlignment="Left" Height="40" Margin="69,8,0,0" Grid.Row="2" VerticalAlignment="Top" Width="182"/>
    <TextBox Grid.Column="2" HorizontalAlignment="Left" Height="27" Margin="21,79,0,0" Grid.Row="1" Text="TextBox" VerticalAlignment="Top" Width="161"/>
    <TextBox HorizontalAlignment="Left" Height="15" Margin="24,79,0,0" Grid.Row="1" Text="TextBox" VerticalAlignment="Top" Width="102"/>
    <Image Grid.ColumnSpan="2" Grid.Column="1" HorizontalAlignment="Left" Height="100" Margin="312,240,0,-272" Grid.Row="2" VerticalAlignment="Top" Width="100"/>
</Grid>

The picture below shows the example ot the mainPage.

  • Implement Loaded event in to MainPage.xaml and insert the following code.
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
        SimpleServiceNamespace.SimpleServiceClient client = new SimpleServiceNamespace.SimpleServiceClient();
        var servicedata = client.GetSomeDataAsync();
        gridData.ItemsSource = servicedata.Result;
}

Even if GetSomeDataAsync method is asynchronous we don’t implement callback because this operation is implemented based on the async and await C# keyword and no need to do that.
Just assign the result of the servicedata to the GridView.ItemsSource.
If we run the app, we can see that the data is loaded asynchronously and UI is not blocked. We can click on buttons, tipe some texts while data is loading. This is awesome and now we can think about application logic instead of callback service implementation. This programming pattern works not just for Metro style apps, in fact it works for all .NET 4.5 based applications.

About Bahrudin Hrnjica

PhD in Mechanical Engineering, Microsoft MVP for .NET. Likes .NET, Math, Mechanical Engineering, Evolutionary Algorithms, Blogging.

Posted on 26/09/2011, in .NET, C#, Metro style App, Windows 8 and tagged , , , . Bookmark the permalink. 19 Comments.

  1. What version of Visual Studio did you use for this? To my knowledge, the only version that supports Metro app development is the Express version that came bundled with the Windows Developer Preview. But that version doesn’t support WCF projects. If there’s a version that allows Metro and WCF projects in the same solution I’d love to know what it is. Thanks!

  2. wow. This is really helpful article.
    I have one more question, how we can do callback from WCF to metro app?

  3. Doesn’t work for me. I get an exception:
    Call to UIASendMessageTimeout failed

  4. Great job!

    Concise and short & sweet. Right on the target without overflows.
    Thank’s

  5. Hello, I have empty Reference.cs file after adding reference to my client project. How can I fix this issue? (put a tick “Reuse all …” gives me lot of errors in Reference.cs file, but it’s not empty)

  6. The reason why WCF service cannot be consumed by Metro app on the localhost is that Metro Client access to the loopback address (localhost) is blocked by default as stated here by MSDN: http://msdn.microsoft.com/en-us/library/hh556233%28v=vs.110%29 so the solution would be changing this default by configuring manifest file and a few settings which is described here: http://www.microsoft.com/en-us/download/details.aspx?id=27534 , here : http://msdn.microsoft.com/en-us/library/hh768193(v=vs.110).aspx and here http://msdn.microsoft.com/en-us/library/windows/apps/hh780593.aspx

  7. hope that with the many beautiful things in this metro style

  8. Dinesh Kumar

    Hi Bahrudin,
    I created a WCF WebService(WCFService) using Visual Studio Express 2012 for WEB and trying to Consume it from a WebSite(WCFConsumer) Website which i created using Visual Studio Express 2012 for Windows8. Iam facing below error. Thanks in Advance.

    The document at the url
    file:///C:/SamplePrograms/Windows8/WebService1/SimpleService.svc
    was not recognized as a known document type.

    Thanks,
    -Dinesh.

  9. With Google and Windows Mobile dial, you can bundle services and applications into one small, powerful device.
    Secondly, your Google Page Rank is obviously an indication of the number of
    websites linking back to yours but also an excellent indicator of
    how your website is performing on search engine results pages and what type of presence you
    have within you industry sector. After you run your search, you’ll find the PPC ads on the right-hand side of the screen.

  10. I was wondering if you ever thought of changing the page layout of your blog?
    Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so
    people could connect with it better. Youve got an awful lot of text for only having 1 or two images.
    Maybe you could space it out better?

  11. Dental Implants Houston provides its clients the smiles they consistently
    wanted!

  1. Pingback: Asynchronous Call of Entity Framework in C# 5.0 « Bahrudin Hrnjica Blog

  2. Pingback: Thoughtful Tech | My First Win8app, WCF, Entity, SQL, and Azure

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s