Splash Screen in Windows Phone 7 Via WCF Service Messaging

Introduction

Today, in this article let's play around with one more interesting concept in Windows Phone whereby communication with a WCF Service is used to get a message after the phone's main screen is displayed.

The Question Arises: What is a Splash Screen?

In simple terms a "Splash Screen is Rich UI Enabled Screen which is shown to the phone user. It is shown when the user has to wait for process to execute or perform some operation which takes long time. So instead of being idle empty screen, the Windows Phone 7 has integrated with some new feature which enables to show some good screen in the meanwhile. So the user wouldn't get distracted or irritated until the whole task is completed".

I think we are now good to go and implement this interesting concept!!!

Step 1: 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 WCF_Splash_Screen

{

    // 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 Splash();

    }

}

Step 2: The Complete Code of 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_Splash_Screen

{

    // 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 Splash()

        {

            return "Whoomp!!!...This is Message from WCF for Splash";

 

        }

    }

}

Step 3: 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>

Step 4: The Complete Code of the Splas_Screen.xaml(User Control) looks like this.

<UserControl x:Class="Splash_Screen_Application.Splas_Screen"

    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"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    d:DesignHeight="800" d:DesignWidth="480">

   

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">

        <Image Source="/SplashScreenImage.jpg" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="UniformToFill" Margin="0,166,0,-166" />

        <TextBlock FontFamily="Verdana" FontSize="22" Text="Please Wait...." Margin="148,465,136,299" />

<ProgressBar Height="30" Margin="0,516,121,254" HorizontalAlignment="Right" Width="246"  Name="Progress1" IsIndeterminate="True"  Foreground="Red"/>

    </Grid>

</UserControl>

Step 5: The Complete Code of the Splas_Screen.xaml.cs(User Control) 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;

 

namespace Splash_Screen_Application

{

    public partial class Splas_Screen : UserControl

    {

        public Splas_Screen()

        {

            InitializeComponent();

        }

    }

}

Step 6: The Complete Code of MainPage.xaml looks like this.

<phone:PhoneApplicationPage

    x:Class="Splash_Screen_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 Splash Screen 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"></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 7: 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 System.Windows.Controls.Primitives;

using System.ComponentModel;

using System.Threading;

using Splash_Screen_Application.ServiceReference1;

 

namespace Splash_Screen_Application

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

 

        public MainPage()

        {

            InitializeComponent();

            obj_Pop.Child = obj_Splash;

            obj_Pop.IsOpen = true;

            obj_Worker.DoWork += new DoWorkEventHandler(do_Work);

            obj_Worker.RunWorkerCompleted += new RunWorkerCompletedEventHandler(run_Worker);

            obj_Worker.RunWorkerAsync();

        }

        void do_Work(object sender, DoWorkEventArgs e)

        {

            Thread.Sleep(10000);

        }

        static void splash_Call(object sender, SplashCompletedEventArgs e)

        {

            MessageBox.Show(e.Result);

        }

        void run_Worker(object sender, RunWorkerCompletedEventArgs e)

        {

            Dispatcher.BeginInvoke(() =>

            {

                this.obj_Pop.IsOpen = false;

            });

        }

        #region Object Variables

        Popup obj_Pop = new Popup();

        Splas_Screen obj_Splash = new Splas_Screen();

        BackgroundWorker obj_Worker = new BackgroundWorker();

        #endregion

        private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)

        {

            Service1Client obj_Client = new Service1Client();

            obj_Client.SplashCompleted += new EventHandler<SplashCompletedEventArgs>(splash_Call);

            obj_Client.SplashAsync();

        }

    }

}

 

Step 8: The splash screen output of the application looks like this.

Step 9: The main page output of the application looks like this.

 

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