Reader Level:
ARTICLE

Telerik Rad RibbonView in SilverLight 5 Via WCF Service

Posted by Vijay Prativadi Articles | Silverlight with C# March 31, 2012
Today, in this article let’s concentrate on another SilverLight application, whereby communicating with a WCF Service to perform some operation
  • 0
  • 0
  • 3436

Introduction

Today, in this article let's concentrate on another SilverLight application, whereby communicating with a WCF Service to perform some operation.

The Telerik Rad Controls for SilverLight can be found from:

http://www.telerik.com/products/silverlight/controls.aspx.

 

The Rad Window is used to display the output in a nice and enhanced UI.

 

Question: What is RadRibbonView ?

 

In simple terms "It allows to integrate some controls into ribbon group with enhanced uI, it provides valuable features like codeless ribbon organization, dynamic resizing, easy user friendly customization and many more".

Let's get this implemented practically for a better idea of this!!!

 

Step 1: The complete code of the IService1.cs looks like this.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace Wcf_Ribbon_View
{
    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file
together.
    [ServiceContract]
    public interface IService1
    {
        [OperationContract]
        double add(double a, double b);
        [OperationContract]
        double sub(double a, double b);
        [OperationContract]
        double mul(double a, double b);
        [OperationContract]
        double div(double a, double b);
    }
}

 

Step 2: The complete code of the Service1.svc.cs looks like this.


using
System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace Wcf_Ribbon_View
{
    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service1" in code, svc and config file together.
    public class Service1 : IService1
    {
        public double add(double a, double b)
        {
            return a + b;
        }
        public double sub(double a, double b)
        {
            return a - b;
        }
        public double mul(double a, double b)
        {
            return a * b;
        } 
        public double div(double a, double b)
        {
            return a / b;
        }
    }
}

 

Step 3: The complete code of the Web.Config looks like this.

<?xml version="1.0"?>
<configuration>
  <
system.web>
    <
compilation debug="true" targetFramework="4.0" />
  </system.web>
  <
system.serviceModel>
    <
behaviors>
      <
serviceBehaviors>
        <
behavior>
          <!--
To avoid disclosing metadata information, set the value below to false and remove the metadata endpoint above before deployment -->
          <
serviceMetadata httpGetEnabled="true"/>
          <!-- To receive exception details in faults for debugging purposes, set the value below to true.  Set to false before deployment to
avoid disclosing exception information
-->
          <
serviceDebug includeExceptionDetailInFaults="false"/>
        </behavior>
      </
serviceBehaviors>
    </
behaviors>
    <
serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
  </system.serviceModel>
 <
system.webServer>
    <
modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
</
configuration>

Step 4: The complete code of the Clientaccesspolicy.xml looks like this (to avoid cross domain problem in SilverLight).


<?xml version="1.0" encoding="utf-8"?>
<access-policy>
  <
cross-domain-access>
    <
policy>
      <
allow-from http-request-headers="SOAPAction">
        <domain uri="*"/>
      </allow-from>
      <
grant-to>
        <
resource path="/" include-subpaths="true"/>
      </grant-to>
    </
policy>
  </
cross-domain-access>
</
access-policy>

 

Step 5: The complete code of the MainPage.xaml looks like this.

<UserControl x:Class="Rad_Ribbon_Application.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"
              xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
              mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight
="480">
    <Grid x:Name="LayoutRoot" Width="622">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto">
            </RowDefinition>
            <RowDefinition>
            </RowDefinition>
        </Grid.RowDefinitions>
        <telerik:RadRibbonView x:Name="ribbonView1"
                               ApplicationName="Rad Ribbon Arthmetic - WCF Service"
                               Title="Telerik"
                               IsMinimized
="False">
            <telerik:RadRibbonTab Header="Telerik Rad Ribbon View - WCF service">
                <telerik:RadRibbonGroup Name="ribbonGroup1"
                                        Header="Rad Ribbon Add"
                                        HorizontalAlignment
="Center">
                    <telerik:RadRibbonButton Content="Addition"
                                             Name="btnAdd"
                                             Click
="btnAdd_Click" >
                    </telerik:RadRibbonButton>
                </telerik:RadRibbonGroup >
                <telerik:RadRibbonGroup Name="ribbonGroup2"
                                       Header="Rad Ribbon Sub"
                                       HorizontalAlignment
="Center" >
                    <telerik:RadRibbonButton Content="Subtraction" 
                                             Name="btnSub"
                                             Click
="btnSub_Click" />
                </telerik:RadRibbonGroup>
                <telerik:RadRibbonGroup Name="ribbonGroup3"
                                        Header="Rad Ribbon Mul"
                                        HorizontalAlignment
="Center">
                    <telerik:RadRibbonButton Content="Multiplication" 
                                             Name="btnMul"
                                             Click
="btnMul_Click"/>
                </telerik:RadRibbonGroup> 
                <telerik:RadRibbonGroup Name="ribbonGroup4"
                                        Header
="Rad Ribbon Div" >
                    <telerik:RadRibbonButton Content="Division"
                                             Name="btnDiv"
                                             Click
="btnDiv_Click" />
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
        </telerik:RadRibbonView> 
        <TextBlock Grid.Row="1"
                   Height="23"
                   HorizontalAlignment="Left"
                   Margin="72,61,0,0" |
                   Name="textBlock1"
                   FontFamily="Verdana"
                   FontSize="15"
                   Text="Please Enter First Number: "
                   VerticalAlignment="Top"
                   Width
="214" />
        <TextBox Grid.Row="1"
                 Height="23"
                 HorizontalAlignment="Left"
                 Margin="320,60,0,0"
                 Name="textBox1"
                 VerticalAlignment="Top"
                 Width="120" /> 
        <TextBlock Grid.Row="1"
                   Height="23"
                   HorizontalAlignment="Left"
                   Margin="58,121,0,0"
                   FontFamily="Verdana"
                   FontSize="15" 
                   Name="textBlock2"
                   Text="Please Enter Second Number: "
                   VerticalAlignment="Top"
                   Width
="228" />
        <TextBox Grid.Row="1"
                 Height="23"
                 HorizontalAlignment="Left"
                 Margin="320,120,0,0"
                 Name="textBox2"
                 VerticalAlignment="Top"
                 Width
="120" />
    </Grid>
</
UserControl>

 

Step 6: The complete code of the MainPage.xaml.cs looks like this.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Rad_Ribbon_Application.ServiceReference1;
using Telerik.Windows.Controls;
namespace Rad_Ribbon_Application
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
        private void add_Call(object sender, addCompletedEventArgs e)
        {
            RadWindow.Alert("Addition Result is: " + e.Result.ToString());
        } 
        private void btnAdd_Click(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
            {
                RadWindow.Alert("Please Enter Some Values");
            }
            else
            {
                objClient.addCompleted += new EventHandler<addCompletedEventArgs>(add_Call);
                objClient.addAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
                textBox1.Text = "";
                textBox2.Text = "";
            }
        }
        private void sub_Call(object sender, subCompletedEventArgs e)|
        {
            RadWindow.Alert("Subtraction Result is: " + e.Result.ToString());
        }
        private void btnSub_Click(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
            {
                RadWindow.Alert("Please Enter Some Values");
            }
            else
            {
                objClient.subCompleted += new EventHandler<subCompletedEventArgs>(sub_Call);
                objClient.subAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
                textBox1.Text = "";
                textBox2.Text = "";
            }
        }
        private void mul_Call(object sender, mulCompletedEventArgs e)
        {
            RadWindow.Alert("Multiplication Result is: " + e.Result.ToString());
        } 
        private void btnMul_Click(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
            {
                RadWindow.Alert("Please Enter Some Values");
            }
            else
            {
                objClient.mulCompleted += new EventHandler<mulCompletedEventArgs>(mul_Call);
                objClient.mulAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
                textBox1.Text = "";
                textBox2.Text = "";
            }
        }
        private void div_Call(object sender, divCompletedEventArgs e)
        {
            RadWindow.Alert("Division Result is: " + e.Result.ToString());
        }
        private void btnDiv_Click(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
            {
                RadWindow.Alert("Please Enter Some Values");
            }
            else
            {
                objClient.divCompleted += new EventHandler<divCompletedEventArgs>(div_Call);
                objClient.divAsync(Convert.ToDouble(textBox1.Text), Convert.ToDouble(textBox2.Text));
                textBox1.Text = "";
                textBox2.Text = "";
            }
        }
        #region Instance Variables
        Service1Client objClient = new Service1Client();
        #endregion

    }
}

Step 7: The output of the application looks like this.

 

  vijay1.jpg

Step 8: The output of the Nothing Entered Application looks like this.


vijay2.jpg 
 

Step 9: The output of the Addition Operation Application looks like this.

  vijay3.jpg


 

vijay4.jpg
 

I hope this article is useful for you ...I look forward to your comments and feedback....Thanks.

COMMENT USING

Trending up