Introduction
In this article we show how to consume a WCF service in a Windows Metro Style Application with Visual Studio 2011. So, first we are going to explore a WCF service in a Metro Style Application in Visual Studio 2011 on Windows 8. In Windows Metro Style, we have to select a RadioButton, Textbox, Hyperlink and Button and interact with a WCF service in .NET Framework 4.5. This application, upon button click event, loads the data. It is a useful and fully functional web service in Metro Style Apps and it can save efforts (make things easier).
First we have to make a simple WCF service and Metro Style Application customer. So, lets make a WCF service:
- Open Visual Studio 2011
- New>File>Asp.Net Empty Web Application
- Rename this Application
![aspwebsite.jpg]()
After creating the application, the service interface will look like as:
Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "ISimpleService" in both code and config file together.
[ServiceContract]
public interface ISimpleService
{
[OperationContract]
[WebGet(UriTemplate = "Data", ResponseFormat = WebMessageFormat.Json)]
List<string> getsomedata();
}
We have to implement the service with the following code.
Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "SimpleService" in code, svc and config file together.
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("total number{0}",i + 1));
}
return lst;
}
}
Output : Here is the web service output.
![serviceoutput.gif]()
Here we have to return a list of strings.
Now, we have to publish a WCF service and access this service in a Metro Style Application on the local host.
So, We have to create a Metro Style Application to access this service. We have to follow these steps such as given below.
- Right-click on Solution Item
- Add a new project
- Select Metro Style Application in the template bar
![metrostyleapp.jpg]()
Now, we have to add a service reference.
![addservicereference.gif]()
In the GridView we have to add the Textbox, RadioButton, Hyperlink, Button and set the format in the GridView. The XAML code will look like as in the following:
Code
<UserControl x:Class="WCFCoustmer.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170*"/>
<ColumnDefinition Width="335*"/>
<ColumnDefinition Width="225*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="82*"/>
<RowDefinition Height="189*"/>
<RowDefinition Height="69*"/>
</Grid.RowDefinitions>
<GridView x:Name="griddata" Grid.ColumnSpan="2" Margin="-34,37,352,148" Grid.RowSpan="2" RenderTransformOrigin="0.474999994039536,0.474999994039536" />
<HyperlinkButton Content="Button for Hyperlink" Grid.Column="1" VerticalAlignment="Bottom" Height="74" Margin="144,0,0,74" HorizontalAlignment="Left" Width="312"/>
<Button Content="Button" Grid.Column="1" HorizontalAlignment="Right" Height="45" Margin="0,60,231,0" Grid.Row="2" VerticalAlignment="Top" Width="179"/>
<TextBox HorizontalAlignment="Stretch" Height="29" Margin="85,200,121,191" Grid.Row="1"
Text="Textbox" VerticalAlignment="Center" Width="112"/>
<RadioButton Content="RadioButton" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="141,84,0,0"/>
</Grid>
</UserControl>
Here, we have to show the designing page look like as.
![designepage.gif]()
Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
namespace WCFCoustmer
{
partial class MainPage
{
public MainPage()
{
InitializeComponent();
}
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
ServiceReference1.SimpleServiceClient client = new
ServiceReference1.SimpleServiceClient();
var servicedata = client.getsomedataAsync();
griddata.ItemsSource = servicedata.Result;
}
}
}
On the MainPage.XAML we have the loaded event and the GetSomeDataAsync method used for asynchronous and the await C# keyword and assign the data in the GridView.ItemSource insert the following code. After running this code the data is loaded asynchronously on the button click.