Color Picker in Windows Phone 7 Via WCF Service

Introduction

First before we get to start working with Color Picker, we need to download the Coding4Fun Toolkit from http://coding4fun.codeplex.com/. Later add Coding4Fun.Phone.Controls.dll as a reference for our newly created project.

Today, in this article let's dicuss another new concept related to Windows Phone 7, whereby communicating with WCF Service to perform some operation.

Question: What is a Color Picker?

In simple terms "It enables user to choose specific color from color space with slider. Provides rich UI based color chooser ".

Let's get this started off now!!!

Step 1: The complete code for 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;
using System.Drawing;
using SilverlightApplication1;
namespace Color_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 colorName(string a);
    }
}

Step 2: The complete code for 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;
using System.Drawing;
using SilverlightApplication1;
 
namespace Color_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 colorName(string a)
        {
            return a;
        }
    }
}

Step 3: The complete code for 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 for the MainPage.xaml looks like this:

<phone:PhoneApplicationPage x:Class="Color_Picker_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="Color Picker Application" 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">
            <TextBlock Height="30" FontFamily="Verdana" FontSize="22" HorizontalAlignment="Left" Margin="15,27,0,0" Name="textBlock1" Text="Your Selected Color #:" VerticalAlignment="Top" />
            <TextBox Height="75" Width="177" HorizontalAlignment="Left" Margin="273,6,0,0" Name="textBox1" VerticalAlignment="Top" />
            <Rectangle Height="58" HorizontalAlignment="Left" Margin="273,87,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="177" />
            <TextBlock FontFamily="Verdana" FontSize="22" Height="30" HorizontalAlignment="Left" Margin="12,101,0,0"
Name="textBlock2" Text="Your Selected Color is: " VerticalAlignment="Top" />
        </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>

Step 5: The complete code for 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 Microsoft.Phone.Controls;
using Coding4Fun.Phone.Controls;
using Color_Picker_Application.ServiceReference1;
using SilverlightApplication1;

namespace Color_Picker_Application
{
    public partial class MainPage : PhoneApplicationPage
    {
    // Constructor
    public MainPage()
    {
        InitializeComponent();
    }
        private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
        {
            objPicker.Height = 450;
            objPicker.Width = 500;
            objPicker.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
            objPicker.VerticalAlignment = System.Windows.VerticalAlignment.Bottom;
            objPicker.ColorChanged +=new ColorBaseControl.ColorChangedHandler(picker_Color);
            this.ContentPanel.Children.Add(objPicker);
        }
        private void colorname_Call(object sender, colorNameCompletedEventArgs e)
        {
            textBox1.Text = e.Result;
        }
        private void picker_Color(object sender, System.Windows.Media.Color newcolor)
        {
            objClient.colorNameCompleted +=new EventHandler<colorNameCompletedEventArgs>(colorname_Call);
            objClient.colorNameAsync(newcolor.ToString());
            rectangle1.Fill = new SolidColorBrush(newcolor);
        }
        #region Instance Variables ColorPicker objPicker = new ColorPicker();
        Service1Client objClient = new Service1Client();
        #endregion
    }
}

Step 6: The output of the application looks like this:



Step 7: The output of the Color Picked Application looks like this:



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