Silverlight applications cannot access server-side classes or variables without mediator like Web Service or WCF Service or WCF RIA. Now I will walk through how we can call WCF Service in Silverlight4 application.

We need to install silverlight4 SDK to work on Silverlight projects. Please follow this blog post for more details on Silverlight Tool KIT installation.

To create a Silverlight application, Go to File- >New-> Silverlight-> Silverlight Application

Name it as demo; Silverlight Application requires a web application project or website to host it.

You can view Client-Bin Folder here in the web application that will be empty initially.

But when we compile the application, Silverlight project gets compiled into an assembly, and this assembly gets wrapped into the XAP file, This XAP file gets copied under client-bin folder.

Now right click on the project and add new item-> Silverlight-> Select silverlightenabled WCF Service.

Now we need to define DataContract and Operation Contract for WCF Service.

Create a class to define datacontract and datamembers.

 [DataContract]
    public class  BeyondRelational
    {
         [DataMember]
        public string Name { get; set; }
                 [DataMember]
        public string Country { get; set; }
                 [DataMember]
        public string Location{ get; set; }
                 [DataMember]
        public string Article {get;set; }
                 [DataMember]
        public string Author { get; set; }
     }

In the Service1.svc.cs file define operation contract under the service contract

 public class Service1
    {        
        [OperationContract]
        public List GetAuthors()
        {
           return new List
           {
               new BeyondRelational
               {
                   Country ="India",
                    Name = "Hima",
                    Location ="hyderbad",
                    Article ="SilverlightApplication"
               } ,
            new BeyondRelational
               {
                    Country ="USA",
                    Name = "Himda",
                    Location ="Philly",
                   Article ="WPF Application"
               },
               new BeyondRelational
               {
                    Country ="Yuganda",
                    Name = "Sonia",
                    Location ="Efficu",
                   Article ="SqlServer 2008 Spacial Data"
               }
               ,
                new BeyondRelational
               {
                    Country ="Belgium",
                    Name = "Sonia",
                    Location ="Efficu",
                    Article ="WCF Application"
               },
                new BeyondRelational
               {
                    Country ="Srilanka",
                    Name = "Pinal",
                    Location ="Columbo",
                    Article ="SharePoint Application"
               },
                new BeyondRelational
               {
                    Country ="France",
                    Name = "Sonisa",
                    Location ="Paris",
                    Article ="BING"
               }
           };
        }                       
    }   

Note: Operation contract attribute can be added to the operations that can be invoked by clients on the service. Service Contract attribute defines the functionality that service exposes.

Build the application.

Now we need to consume this service in silverlight project and display the author’s details in beyond relational.

MainPage.XAML is where we write the code ,that gets integrated to service and calls it dynamically.

This is the silverlightUI

<Grid x:Name="LayoutRoot"  Width="400" Height="300" Background="AliceBlue" VerticalAlignment="Center" DataContext="{Binding}">
        <Grid.RowDefinitions>
            <RowDefinition Height="160" ></RowDefinition>
            <RowDefinition></RowDefinition>

        </Grid.RowDefinitions>
        <TextBlock x:Name= "NameTextBlocks"  Text="Beyond Relational Author LIST "  VerticalAlignment="top"></TextBlock>
        <ComboBox Height="23" HorizontalAlignment="Left"  x:Name="BRComboBox" VerticalAlignment="Top" Width="250" SelectionChanged="BRComboBox_SelectionChanged" DisplayMemberPath="Name" />
        <Grid x:Name="BRDetailGrid"  Grid.Row="1" VerticalAlignment="Top">
        <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <TextBlock x:Name= "NameTextBlock" Grid.Row ="0" Grid.Column="0" FontWeight="Bold" FontFamily="Verdna" Text="Author Name:" HorizontalAlignment="Right" ></TextBlock>
            <TextBlock x:Name="NameValue" Grid.Row="0" FontFamily="Verdna" FontWeight="bold" Grid.Column="1" Text="{Binding Name}" HorizontalAlignment="right" />
            <TextBlock x:Name= "LocationTextBlock" Grid.Row ="1" Grid.Column="0" FontWeight="Bold" Text="Location:" HorizontalAlignment="Right" ></TextBlock>
            <TextBlock x:Name="LocationValue" Grid.Column="1" Grid.Row="1" FontFamily="Verdna" FontWeight="bold" Text="{Binding Location}"  HorizontalAlignment="Right"></TextBlock>
            <TextBlock x:Name="CountryTextBlock" Grid.Row="2"   Grid.Column="0" FontFamily="Verdna" FontWeight="bold" Text="Country"  HorizontalAlignment="Right"></TextBlock>
            <TextBlock x:Name="CountryValue" Grid.Row="2" Grid.Column="1"  FontFamily="Verdna" FontWeight="bold" Text="{Binding Country}"  HorizontalAlignment="Right"></TextBlock>
            <TextBlock x:Name="PriceTextBlock" Grid.Row="3" Grid.Column="0"   FontFamily="Verdna" FontWeight="bold" Text="Article Title"  HorizontalAlignment="Right"></TextBlock>
            <TextBlock x:Name="PriceValue"  Grid.Row="3" Grid.Column="1"   FontFamily="Verdna" FontWeight="bold" Text="{Binding Article}"  HorizontalAlignment="Right"></TextBlock>
        </Grid>
       
    </Grid>

} is used to bind corresponding data dynamically from the service.

Calling the service in code behind mainpage.xaml.cs

 public MainPage()
        {
            InitializeComponent();
            BRService.Service1Client proxy = new BRService.Service1Client();
            proxy.GetAuthorsCompleted += new EventHandler(proxy_GetAuthorsCompleted);
            proxy.GetAuthorsAsync();
        }

Code to dynamically render authors from the dropdownlist selection

        private void BRComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            BRDetailGrid.DataContext = (sender as ComboBox).SelectedItem as BRService.BeyondRelational;
        }

Services need to be accessed asynchronously in Silverlight.

Calling a proxy class event to dynamically

       void proxy_GetAuthorsCompleted(object sender, Demos.BRService.GetAuthorsCompletedEventArgs e)
        {
            BRComboBox.ItemsSource = e.Result;
        }

Results

Now we get the author details based on selection of author name from the dropdown.