Toggle Switch in Windows Phone 7 Messages via WCF Service

Today, in this article we will dig out on one more interesting implementation in WP7 which whereby gets cross messages from WCF Service based on Toggle Switch Operation.

So, let's get it started off!!!

Question Arises: What is Toggle Switch?

It is a kind of Switch which enables user to switch on to perform some task or switch off to perform nothing. For Instance: If you want to turn on or off WI-FI. It is similar to a checkbox type.

The Complete Code of 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 Toggle_Switch_WCF
{
    // 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]
        string ToggleOn();

        [OperationContract]
        string ToggleOff();
    }
}

The Complete Code of Service1.svc 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 Toggle_Switch_WCF
{
    // 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 string ToggleOn()
        {
            return "Hurray!!! I am From WCF Toggle On";
        }

        public string ToggleOff()
        {
            return "Hurray!!! I am From WCF Toggle Off";
        }
    }
}

The Complete Code of 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>

The Complete Code of MainPage.xaml looks like this:

<phone:PhoneApplicationPage xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"  xmlns:toolkitPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls.Toolkit" 
    x:Class="ToggleSwitch_Application.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Vijay's Toggle Switch" FontFamily="Verdana"  FontSize="22" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Windows 7 Phone"  Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <toolkit:ToggleSwitch  Header="Toggle Switch" IsChecked="true" Content="Toggle Switch is On" x:Name="toggle1" Checked="toggle1_Checked" Unchecked="toggle1_Unchecked" SwitchForeground="#FF18A6EF" />
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

The Complete Code of 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 Microsoft.Phone.Controls;
using ToggleSwitch_Application.ServiceReference1;

namespace ToggleSwitch_Application
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

        }

        private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
        {

        }

        static void ToggleOn(object sender, ToggleOnCompletedEventArgs e)
        {
            MessageBox.Show(e.Result.ToString());
        }
        static void ToggleOff(object sender, ToggleOffCompletedEventArgs e)
        {
            MessageBox.Show(e.Result.ToString());
        }
        private void toggle1_Checked(object sender, RoutedEventArgs e)
        {
            Service1Client objClient = new Service1Client();
            objClient.ToggleOnCompleted += new EventHandler<ToggleOnCompletedEventArgs>(ToggleOn);
            objClient.ToggleOnAsync();
            toggle1.Content = "ToggleSwitch On";
            toggle1.SwitchForeground = new SolidColorBrush(Colors.Green);
        }

        private void toggle1_Unchecked(object sender, RoutedEventArgs e)
        {
            Service1Client objClient = new Service1Client();
            objClient.ToggleOffCompleted += new EventHandler<ToggleOffCompletedEventArgs>(ToggleOff);
            objClient.ToggleOffAsync();
            toggle1.Content = "ToggleSwitch  Off";
            toggle1.SwitchForeground = new SolidColorBrush(Colors.Red);

         }

    }
}

The Output of the Application looks like this:

The Output of the Application when Toggle Switch is on looks like this:

The Output of the Application when Toggle Switch is off looks like this:

I hope this article is useful for you.