Click here to Skip to main content
15,882,017 members
Articles / Mobile Apps / Windows Phone 7

Horoscope Program in Windows Phone 7

Rate me:
Please Sign up or sign in to vote.
4.81/5 (12 votes)
4 Nov 2010CPOL5 min read 50.2K   1.2K   21   10
How to create a horoscope application in Windows Phone 7

Introduction

Zodiac_Phone/StartScreen.png

The smart-phone future is: build phone applications for single people. Many smart-phone developers will act as a software for advertising agencies or to broadcast to a new website.
Microsoft now points to developers that can to do union using Framework.NET together with good ideas for simple people.

Now I show in my article a possibility to create a good product for Windows Phone with the simplicity of framework.NET technologies.

This article can help developers that want to know what they can do after installing the Windows Phone developer package. They can have a question: I already know .NET and I have installed the necessary programs, how to start?
This article shows a way.

Developers want to know how to implement WCF to communicate with cloud. This article is a good example.

Business-people want to have a new future business segment, the simplicity of this article shows how you can to have it.

Background

This article shows how to create a Horoscope Application in Windows Phone 7. The technologies used are XAML, WCF, LINQ and C#.

Image 2

The XAML will act only in Windows Phone to interact with the user.

User will request a prevision of choosing a sign. The WCF Proxy will organize the request parameters and request to WCF Service by Internet, published in a Web-server.

The Web-server will receive the request parameters, organize to call RSS Horoscope passing the sign parameter.

The RSS will return the XML Response, the WCF Service will extract in XML only the prevision in Item tag using LINQ and return the prevision in event Completed of the Proxy.

The Prevision Response will be written on the Windows Phone screen.

Zodiac_Phone/Horoscope.png

Using the Code

Start a Windows Phone Application project. Select the template into Visual C#, Silverlight for Windows Phone. Select Windows Phone Application.

Image 4

Create a Title Panel to show the title of Application and a short explanation.

Zodiac_Phone/3_Title.png

TextBlock shows a label in your screen with the predefined text that is in Text Property.

Code of Title Panel:

HTML
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
     <TextBlock x:Name="ApplicationTitle" Text="The future in your hand" 
		Style="{StaticResource PhoneTextNormalStyle}"/> 
     <TextBlock x:Name="PageTitle" Text="Zodiac Phone" Margin="9,-7,0,0" 
		Style="{StaticResource PhoneTextTitle1Style}"/> 
</StackPanel> 

Insert the ContentPanel that has all controls of this application (Sign Buttons and Prevision Panel).

Insert 12 images that represent the Zodiac Signs. Determine the position, image source and size of images to have good appearance. Mount the MouseLeftButtonDown as click event equals all images and for each image determine a parameter Code and Name in property Tag.

Each image has a button function, that in the click (MouseLeftButtonDown) will call the WCF Proxy and pass the Zodiac Sign Code of the Tag Property.

Zodiac_Phone/4_Content.png

Code of images:

HTML
<Image Name="iAries" Cursor="Hand" Height="128" Width="128" 
HorizontalAlignment="Left" Margin="10,24,0,0" Stretch="Fill" VerticalAlignment="Top" 
Source="/ZodiacPhone;component/img/aries.png" 
MouseLeftButtonDown="callPrevision_MouseLeftButtonDown" Tag="1|Aries" />
<Image Name="iTaurus" Cursor="Hand" Height="128" Width="128" 
HorizontalAlignment="Left" Margin="165,24,0,0" Stretch="Fill" 
VerticalAlignment="Top" Source="/ZodiacPhone;component/img/touro.png" 
MouseLeftButtonDown="callPrevision_MouseLeftButtonDown" Tag="2|Taurus"/>
<Image Name="iGemini" Cursor="Hand" Height="128" Width="128" 
HorizontalAlignment="Left" Margin="322,24,0,0" Stretch="Fill" 
VerticalAlignment="Top" Source="/ZodiacPhone;component/img/gemeos.png" 
MouseLeftButtonDown="callPrevision_MouseLeftButtonDown" Tag="3|Gemini"/>
<Image Name="iCancer" Cursor="Hand" Height="128" Width="128" 
HorizontalAlignment="Left" Margin="10,172,0,0" Stretch="Fill" 
VerticalAlignment="Top" Source="/ZodiacPhone;component/img/cancer.png" 
MouseLeftButtonDown="callPrevision_MouseLeftButtonDown" Tag="4|Cancer"/>
<Image Name="iLeo" Cursor="Hand" Height="128" Width="128" 
HorizontalAlignment="Left" Margin="165,172,0,0" Stretch="Fill" 
VerticalAlignment="Top" Source="/ZodiacPhone;component/img/leao.png" 
MouseLeftButtonDown="callPrevision_MouseLeftButtonDown" Tag="5|Leo"/>
<Image Name="iVirgo" Cursor="Hand" Height="128" Width="128" 
HorizontalAlignment="Left" Margin="322,172,0,0" Stretch="Fill" 
VerticalAlignment="Top" Source="/ZodiacPhone;component/img/virgem.png" 
MouseLeftButtonDown="callPrevision_MouseLeftButtonDown" Tag="6|Virgo"/>
<Image Name="iLibra" Cursor="Hand" Height="128" Width="128" 
HorizontalAlignment="Left" Margin="10,330,0,0" Stretch="Fill" 
VerticalAlignment="Top" Source="/ZodiacPhone;component/img/libra.png" 
MouseLeftButtonDown="callPrevision_MouseLeftButtonDown" Tag="7|Libra"/>
<Image Name="iScorpio" Cursor="Hand" Height="128" Width="128" 
HorizontalAlignment="Left" Margin="165,330,0,0" Stretch="Fill" 
VerticalAlignment="Top" Source="/ZodiacPhone;component/img/escorpiao.png" 
MouseLeftButtonDown="callPrevision_MouseLeftButtonDown" Tag="8|Scorpio"/>
<Image Name="iSagitarius" Cursor="Hand" Height="128" Width="128" 
HorizontalAlignment="Left" Margin="322,330,0,0" Stretch="Fill" 
VerticalAlignment="Top" Source="/ZodiacPhone;component/img/sagitario.png" 
MouseLeftButtonDown="callPrevision_MouseLeftButtonDown" Tag="9|Sagittarius"/>
<Image Name="iCapricorn" Cursor="Hand" Height="128" Width="128" 
HorizontalAlignment="Left" Margin="10,481,0,0" Stretch="Fill" 
VerticalAlignment="Top" Source="/ZodiacPhone;component/img/capricornio.png" 
MouseLeftButtonDown="callPrevision_MouseLeftButtonDown" Tag="10|Capricorn"/>
<Image Name="iAquarius" Cursor="Hand" Height="128" Width="128" 
HorizontalAlignment="Left" Margin="165,481,0,0" Stretch="Fill" 
VerticalAlignment="Top" Source="/ZodiacPhone;component/img/aquario.png" 
MouseLeftButtonDown="callPrevision_MouseLeftButtonDown" Tag="11|Aquarius"/>
<Image Name="iPisces" Cursor="Hand" Height="128" Width="128" 
HorizontalAlignment="Left" Margin="322,481,0,0" Stretch="Fill" 
VerticalAlignment="Top" Source="/ZodiacPhone;component/img/peixes.png" 
MouseLeftButtonDown="callPrevision_MouseLeftButtonDown" Tag="12|Pisces"/>

Prevision Grid has controls to show the Sign name, Prevision text and the Back Button.

One Textblock will show the Sign Name as Title of prevision screen. The second TextBlock will show the prevision text. This screen will open only when the event Completed of the Proxy fires.

A button with back function will be shown below prevision.

Image 7

Code of Prevision Grid:

HTML
<Grid x:Name="TextGrid" Visibility="Collapsed" Background="#FF144B0D" Opacity="0.97">
     <TextBlock Name="txtPrevisionTitle" Width="452" FontSize="20" Opacity="1">
     </TextBlock>
     <TextBlock Name="txtPrevision" Width="400" Height="500" TextWrapping="Wrap" 
	FontSize="24" />
     <Button Name="btnHome" VerticalAlignment="Bottom" Width="90" 
	Height="90" Cursor="Hand" BorderBrush="#FF70A1E2" Click="btnHome_Click">
          <Button.Background>
               <ImageBrush ImageSource="/ZodiacPhone;component/img/back_button.png" 
		Stretch="None" />
          </Button.Background>
     </Button>
</Grid>

Now create the WCF Project. I do separate because I use the Express Version. If the Visual Studio is not Express, you can make in the same solution a new WCF project.

Choose WCF Service Application. Type a name like WcfService, choose location and click Ok.

Zodiac_Phone/6_Choose_WCF_Template.png

A WCF needs work with interface because the WCF methods can be called remotely by many different applications, all applications need to comply a contract that will call the WCF correctly. So a way in which WCF Service does that is by Interface.

A default interface is created in the new WCF project, called IService1. You can modify this default interface to have the correct contracts. In this article, I make changes to have a contract to method GetPrevision.

Clear all example code that opens with template. Rename the interface from IService1 to IZodiacPhone.

Zodiac_Phone/7_Clear_Interface.png

Create the interface method GetPrevision with ServiceContract to be used by the main class in WCF.

Zodiac_Phone/8_WCF_Interface.png

The code of WCF Service Interface is as follows:

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace WcfService
{
     [ServiceContract]
     public interface IZodiacPhone
     {
          // TODO: Add your service operations here
          [OperationContract]
          string GetPrevision(int value);
     }
}

The main class default is created by default with name Service1. In this article, I make changes in this class to implement the GetPrevision method.

The Interface needs to be used for this class, because this class and your methods will be called remote, and need to supply a contract to be complied by applications.

Open the main class Service1. Rename the class to ZodiacPhone, change the interface used to IZodiacPhone, and clear the examples code.

Zodiac_Phone/9_Clear_WCF.png

Now the main class in WCF will process the received information, call RSS, extract the prevision and return as result.

To continue, call in scope reference to System.XML.Linq, create the GetPrevision method that manages the Sign call, open the correct RSS address and capture the Sign Description.

I use XMLDoc to open the RSS and use LINQ to extract the content of tag Description in tag Item.

Zodiac_Phone/10_WCF_GetPrevision.png

The WCF code:

C#
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.Xml.Linq;
namespace WcfService
{
    // 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 ZodiacPhone : IZodiacPhone
    {
        public string GetPrevision(int p_nSign) 
        { 
            try 
            { 
                string sReturn = "";
                switch (p_nSign) 
                { 
                    case 1:                        
                        sReturn = "Aries"; 
                        break; 
                    case 2:                        
                        sReturn = "Taurus"; 
                        break; 
                    case 3:                        
                        sReturn = "Gemini"; 
                        break; 
                    case 4:                        
                        sReturn = "Cancer"; 
                        break; 
                    case 5:                        
                        sReturn = "Leo"; 
                        break; 
                    case 6:                        
                        sReturn = "Virgo"; 
                        break; 
                    case 7:                        
                        sReturn = "Libra"; 
                        break; 
                    case 8:                        
                        sReturn = "Scorpio"; 
                        break; 
                    case 9:                        
                        sReturn = "Sagittarius"; 
                        break; 
                    case 10:                        
                        sReturn = "Capricorn"; 
                        break; 
                    case 11:                        
                        sReturn = "Aquarius"; 
                        break; 
                    case 12:                        
                        sReturn = "Pisces"; 
                        break; 
                    default:                        
                        sReturn = "service off..."; 
                        break; 
                }
                //XDocument xml = XDocument.Load
		(@"http://www.horoscopofree.com/pt/misc/partnership/Horoscopo.xml?
		HFPTS=526bf73c3babbce8ed5371f7633e3a5e"); 
                XDocument xml = XDocument.Load(@"http://www.findyourfate.com/rss/
		dailyhoroscope-feed.asp?sign=" + sReturn); 
                var Horoscope = from rss in xml.Descendants("item") 
                                //where (rss.Element("title").Value.Contains("sReturn")) 
                                select new 
                                { 
                                    Description = (string)rss.Element("description").Value 
                                }; 
                foreach (var dados in Horoscope) 
                { 
                    sReturn = dados.Description; 
                } 
                return sReturn; 
            } 
            catch (Exception ex) 
            { 
                throw ex; 
            } 
        }
    }
}

Publish the WCF Service in a Webserver. In my example, I only run the WCF Project and use the local address.

Back to the Windows Phone XAML project, in Solution Explorer, right-click in Service References, and choose Add Service Reference.

Type the published WCF Service address, click on Go.

Type a namespace, like ZodiacPhoneService, and click on Ok.

Zodiac_Phone/11_Reference_to_WCF.png

Open the C# code to XAML Windows Phone project.

Call the WCF Service by a proxy variable. Implement the methods to front-end side (call prevision, show, hide and update).

The methods in the front-end are:

  • callPrevision: Call the remote method by the Proxy.
  • closePrevision: Clear and hide all controls in prevision screen.
  • callPrevision_MouseLeftButtonDown: Fired when any image is clicked. Into this event, I extract the parameters to call method callPrevision.
  • proxy_GetPrevisionCompleted: Fired when the proxy has a result from the last call. When this method fires, I open the prevision screen and show the prevision text.
  • btnHome_Click: Fired when the Home button is clicked. Call the method closePrevision doing the application back to the original state.

Zodiac_Phone/12_XAML_Code.png

The front-end C# code:

C#
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;
namespace ZodiacPhone
{
    public partial class MainPage : PhoneApplicationPage
    {
        ZodiacPhoneService.ZodiacPhoneClient proxy = 
			new ZodiacPhoneService.ZodiacPhoneClient();
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }
        private void callPrevision(int sign, string signName)
        {
            proxy.GetPrevisionCompleted += new EventHandler
	<ZodiacPhoneService.GetPrevisionCompletedEventArgs>(proxy_GetPrevisionCompleted);
            proxy.GetPrevisionAsync(sign);
            txtPrevisionTitle.Text = signName;
        }
        private void closePrevision()
        {
            TextGrid.Visibility = System.Windows.Visibility.Collapsed;
            txtPrevisionTitle.Text = "";
            txtPrevision.Text = "";
        }
        private void callPrevision_MouseLeftButtonDown
			(object sender, MouseButtonEventArgs e)
        {
            string[] response = ((Image)sender).Tag.ToString().Split('|');
            int sign = Convert.ToInt16(response[0]);
            string signName = response[1];
            callPrevision(sign, signName);
        }
        void proxy_GetPrevisionCompleted
	(object sender, ZodiacPhoneService.GetPrevisionCompletedEventArgs e)
        {
            string resultado = e.Result;
            TextGrid.Visibility = System.Windows.Visibility.Visible;
            txtPrevision.Text = resultado;
        }
        private void btnHome_Click(object sender, RoutedEventArgs e)
        {
            closePrevision();
        }
    }
}

Points of Interest

It is very good to develop in Windows Phone. This platform is strong, with many tools to create powerful applications. The possibilities to use XAML, WCF and work with framework 4.0 open a big future for Windows Phone.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Brazil Brazil
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Holger Sinn18-Oct-14 3:59
Holger Sinn18-Oct-14 3:59 
GeneralZodiacPhone will not start on emulator Pin
Stef Heyenrath9-Dec-10 11:41
Stef Heyenrath9-Dec-10 11:41 
GeneralThe MouseLeftButtonDown event is fired multiple times Pin
Stef Heyenrath9-Dec-10 11:38
Stef Heyenrath9-Dec-10 11:38 
GeneralMy vote of 4 Pin
Andre' Gardiner10-Nov-10 15:17
professionalAndre' Gardiner10-Nov-10 15:17 
GeneralMy vote of 1 Pin
Juan Pablo G.C.4-Nov-10 5:30
Juan Pablo G.C.4-Nov-10 5:30 
GeneralRe: My vote of 1 Pin
João da Costa from Brazil4-Nov-10 7:02
João da Costa from Brazil4-Nov-10 7:02 
GeneralGood, but.... Pin
clew_bel4-Nov-10 4:31
clew_bel4-Nov-10 4:31 
GeneralRe: Good, but.... Pin
Juan Pablo G.C.4-Nov-10 5:28
Juan Pablo G.C.4-Nov-10 5:28 
GeneralRe: Good, but.... Pin
João da Costa from Brazil4-Nov-10 7:01
João da Costa from Brazil4-Nov-10 7:01 
GeneralRe: Good, but.... Pin
clew_bel4-Nov-10 7:27
clew_bel4-Nov-10 7:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.