In this article we will consume a WCF SOAP Service in a C#/XAML based Metro Application. This is a level 100 article showing the basic steps to create a simple WCF Service and consume it in a Metro Application.
The very first thing to do is to create a WCF Service using VS2012. From the File menu create a new project by choosing the WCF Service Application project template from the WCF tab:
![WCFMtr1.jpg]()
Remove all the default code from IService1.cs and replace it with the following code. In the following service contract we are going to return a simple greeting message. From the client, a name (as string) will be entered into the service and the service will return a greeting message as a string.
IService1.cs
using System.ServiceModel;
namespace ServiceToConsumeinMetro
{
[ServiceContract]
public interface IService1
{
[OperationContract]
string GreetingMessage(string name);
}
}
The Service is implemented as follows. It concatenates two strings and returns that.
Service1.svc.cs
namespace ServiceToConsumeinMetro
{
public class Service1 : IService1
{
public string GreetingMessage(string name)
{
return "Welcome to Metro Word " + name;
}
}
}
We will go with the default binding and will not configure anything in Web.Config. Leave Web.config as it is and press F5 to run and host in the local server the WCF service that was created. After a successful run in your browser you should get the following output:
![WCFMtr2.jpg]()
Now let us create a Metro Application to consume this service. From the File menu in VS 2012 choose the Blank App project template from the Windows Metro Style tab.
![WCFMtr3.jpg]()
Next let us design the page. On the page we are going to use one TextBox, one Button and one TextBlock. The user will enter a name in the textbox and in the click event of the button, the service will be called. The output that is returned from the service will be displayed in the textblock. The XAML is as follows:
MainPage.xaml
<Page
x:Class="App1.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<TextBox x:Name="txtName" Margin="286,25,583,113" />
<Button x:Name="btnCallService" Content="Enter Name above and touch to call service" Height="100" Width="364" Grid.Row="1" Margin="367,10,0,90" Click="btnCallService_Click_1"/>
<TextBlock x:Name="textResult" Grid.Row="2" FontSize="30" FontWeight="Bold" />
</Grid>
</Page>
Next we need to add a Service Reference to the Metro project. For that right-click on the Metro Application project Reference tab and select Add Service Reference:
![WCFMtr4.jpg]()
Add the reference as follows. My Metro application name is App1. If your Metro application is named XYZ then you will be adding XYZ.ServiceReference1, provided you have not changed the reference name while adding it.
![WCFMtr5.jpg]()
In Metro word everything is asynchronous. So we need to make an async call to the service. When you add a reference automatically Visual Studio creates an async function for you.
![WCFMtr6.jpg]()
We can call this function from the service as in the following:
![WCFMtr7.jpg]()
If you notice we have used the await keyword before making a call to the service. Since the service is called using await, the function inside which we are calling service must be async. On the click event of the button, the service can be called as follows:
![WCFMtr8.jpg]()
Combining all discussions together, the code behind will look such as in the following:
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
using App1.ServiceReference1;
namespace App1
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private async void btnCallService_Click_1(object sender, RoutedEventArgs e)
{
Service1Client proxy = new Service1Client();
string result = await proxy.GreetingMessageAsync(txtName.Text);
textResult.Text = result;
}
}
}
On running you should be getting output as follows:
![WCFMtr9.jpg]()
I am sorry for my poor UI experience, but anyway, making the UI immersive was not the purpose of this article. I hope now you know the basics of consuming a WCF SOAP service in a Metro application.