Overview

In this article we will learn how simply a Windows Phone Application can be developed. So for this article we will create a demo app for a puzzle, named FLAMES.

As we know FLAMES is a puzzle to calculate the relationship between two persons. We learn more about this puzzle because most boys and girls have played this puzzle during school. So it's time for us to convert these puzzles into a phone application, so that the people of this era can play the same puzzle(s) in a modern way.

Note

Basically this puzzle is used to match the relationship between a male and female. Let's learn more about FLAMES here:
  • F: Friend
  • L: Lover
  • A: Affection
  • M: Marriage
  • E: Enemy
  • S: Sister

Let's see the following procedure to create the Windows Phone app for FLAMES using Visual Studio 2012 and Visual C# as a language for this article.

Step 1

To create a new Windows Phone Application use the following procedure to create the Windows Phone 8.0 application.

Open Visual Studio 2012 then select File --> New project.

And select "Visual C#" from the language template and "Windows Phone App" from the project template.

newproject

Now select the version 8.0 because we will develop this application for Windows Phone 8.0.

version

Step 2
We now need to design the UI for this puzzle. In this puzzle we have the requiement of two TextBoxes for the input of two peole's names, a button and a result box to display the relation. So use the following code to design the UI for this application.
  1. <Grid x:Name="LayoutRoot" Background="RoyalBlue">
  2. <phone:Pivot Title="" >
  3. <!--First Page-->
  4. <phone:PivotItem Header="flames">
  5. <Grid>
  6. <Grid.RowDefinitions>
  7. <RowDefinition Height="Auto"/>
  8. <RowDefinition Height="Auto"/>
  9. <RowDefinition Height="Auto"/>
  10. <RowDefinition Height="*"/>
  11. </Grid.RowDefinitions>
  12. <StackPanel Grid.Row="0" >
  13. <TextBlock Visibility="Collapsed" Text="FLAMES" FontSize="60" Padding="15,0,0,0" />
  14. <StackPanel Background="White" Height="0" />
  15. </StackPanel>
  16. <StackPanel Grid.Row="1" >
  17. <TextBlock Text="First Name (Male)" FontSize="28"
  18. Margin="15,0,0,0" Foreground="White"/>
  19. <TextBox x:Name="txtFirstName" Padding="5" FontSize="28"
  20. Background="White"/>
  22. <TextBlock Text="Second Name (Female)" FontSize="28"
  23. Margin="15,0,0,0" Foreground="White"/>
  24. <TextBox x:Name="txtSecondName" Padding="5" FontSize="28"
  25. Background="White"/>
  27. <Button x:Name="btnMatchRelation" Content="Match Relation"
  28. Padding="10" FontFamily="Segoe UI" FontSize="30"
  29. Background="Green" BorderThickness="0" Width="300"
  30. Click="btnMatchRelation_Click"/>
  32. </StackPanel>
  34. <StackPanel x:Name="panelOutput" Grid.Row="2" Visibility="Collapsed" >
  35. <TextBlock x:Name="txtResultDescription" Text=""
  36. Foreground="Orange" FontSize="30" TextWrapping="Wrap" />
  37. <TextBlock x:Name="txtRelation" Foreground="Red"
  38. FontSize="35" Text=""/>
  39. </StackPanel>
  40. </Grid>
  41. </phone:PivotItem>
  43. <!--Second Page-->
  44. <phone:PivotItem Header="about" >
  45. <Grid>
  46. <Grid.RowDefinitions>
  47. <RowDefinition Height="Auto" />
  48. <RowDefinition Height="Auto" />
  49. </Grid.RowDefinitions>
  50. <TextBlock TextWrapping="Wrap" Grid.Row="0" FontSize="30"
  51. Foreground="Wheat"
  52. Text="FLAMES : It's a puzzle to calculate the relation type between two persons."/>
  54. <StackPanel Grid.Row="1">
  55. <TextBlock Text="F : Friend" FontSize="30" />
  56. <TextBlock Text="L : Lover" FontSize="30" />
  57. <TextBlock Text="A : Affection" FontSize="30" />
  58. <TextBlock Text="M : Marriage" FontSize="30" />
  59. <TextBlock Text="E : Enemy" FontSize="30" />
  60. <TextBlock Text="S : Sister" FontSize="30" />
  61. </StackPanel>
  62. </Grid>
  63. </phone:PivotItem>
  64. </phone:Pivot>
  65. </Grid>
Notes

Please note that in the preceding code we have written the code inside the "pivot page" where the pivot page is the kind of page used to design multiple pages in a single XAML page (for examle MainPage.xaml).

At run time, the preceding code will be divided into to separate pages because this pivot page has two "PivotItem" as in the following:

  1. flames page
  2. about page
twopages
Fig. Page1 Fig. Page2

Step 3

Write the following code to calculate the relationship. But before writing the code I would like to share the logic to calculate FLAMES.

  1. First remove the common letters from both names

    For example:

    TINKU & RINKI

    These names have three common letters so remove the common letters i, n and k from both names. (Remove only one letter for each one).

  2. After removing the common letter put together the remaining letters. So the preceding name will look like the following:
    "TURI"

  3. Now count the letters of the remaining letters. (For the example the count is 4.)

  4. Now we will traverse the string FLAMES in a circular way by counting 1, 2, 3, 4 and removing the letter in the 4th place and again traverse on the remaining letters of FLAMES until a single letter remains.

  5. The last letter will denote the relation between these two names.

    For example suppose "F" is the last letter after traversing then show the obtained relation, FRIEND.

Use the following code for the Button Click:

  1. private void btnMatchRelation_Click(object sender, RoutedEventArgs e)
  2. {
  3. if (txtFirstName.Text.Trim() != "" && txtSecondName.Text.Trim() != "")
  4. {
  5. int restCharsCount = CalculateFlamesCount(txtFirstName.Text.Trim().ToLower(), txtSecondName.Text.Trim().ToLower());
  6. char letter = CalculateRelation(restCharsCount);
  7. txtRelation.Text = ShowRelationshipResult(letter);
  8. txtResultDescription.Text = String.Format(txtFirstName.Text.ToUpper().Trim() + " & " + txtSecondName.Text.ToUpper().Trim( ) + "{0}" + "share a relationship :", Environment.NewLine);
  9. panelOutput.Visibility = Visibility.Visible;
  1. }
  2. else
  3. {
  4. MessageBox.Show("Name could not be empty ! Please enter both name and press show button !!");
  5. }
  6. }
//Flames Count:
Basically this "CalculateFlamesCount" returns the number of remaining characters after the removal of the common characters among both names.
  1. private int CalculateFlamesCount(string s1, string s2)
  2. {
  3. List<char> lst1 = s1.ToList();
  4. List<char> lst2 = s2.ToList();
  6. int count = 0;
  7. int j = 0;
  8. while (j < lst2.Count)
  9. {
  11. if (lst1.Contains(lst2[j]))
  12. {
  13. lst1.Remove(lst2[j]);
  14. lst2.Remove(lst2[j]);
  15. if (j == 0)
  16. j = 0;
  17. else
  18. j--;
  20. }
  21. else
  22. j++;
  23. }
  24. count = lst1.Count + lst2.Count;
  25. return count;
  26. }

  29. //RELATIONSHIP CALCULATION : It return the Flame result in single char like (F,L,A,M,E or S)
  30. private char CalculateRelation(int count)
  31. {
  33. bool gameover = true;
  34. string list = "FLAMES";
  35. var list1 = list.ToList();
  36. int runcount;
  37. int traversing;
  38. while (gameover)
  39. {
  40. runcount = 0;
  41. traversing = 0;
  43. while (traversing < list1.Count)
  44. {
  45. if (runcount == count)
  46. {
  47. if (traversing != 0)
  48. list1.Remove(list1[--traversing]);// = '*';
  49. else
  50. {
  51. list1.Remove(list1[list1.Count - 1]);
  52. traversing = 0;
  53. }
  55. runcount = 0;
  57. }
  58. else
  59. {
  60. runcount++;
  63. if (traversing < list1.Count - 1)
  64. {
  65. traversing++;
  66. }
  67. else
  68. {
  69. traversing = 0;
  70. }
  71. }
  74. if (list1.Count == 1)
  75. traversing = list1.Count;
  76. }
  78. gameover = false;
  79. }
  81. return list1[0];
  82. }
  1. //Relation : It takes the output of just above method as input letter and return the relation type in word like Friend, Lover or other
  2. private string ShowRelationshipResult(char flamesChar)
  3. {
  4. string relation = string.Empty;
  6. switch (flamesChar)
  7. {
  8. case 'F':
  9. relation = "FRIEND";
  10. break;
  11. case 'L':
  12. relation = "LOVER";
  13. break;
  14. case 'A':
  15. relation = "AFFECTION";
  16. break;
  17. case 'M':
  18. relation = "MARRIAGE";
  19. break;
  20. case 'E':
  21. relation = "ENEMY";
  22. break;
  23. case 'S':
  24. relation = "SISTER";
  25. break;
  26. default:
  27. break;
  28. }
  29. return relation;
  31. }
Now execute the application to play this puzzle by using two names and see the flames output as a relation.

Let's play this puzzle (FLAMES) to determine the relation between the two peole.
The following images show the FLAMES result.
fla
mes
These are the screens that shows the flames result as Friend, Lover, Affection, Marriage, Enemy and Sister.
System Requirements
To execute this demo project your PC should have:
  • Visual Studio 2012
  • Windows 8.0 OS
  • Emulator or Windows Phone 8.0
Summary

In this article we saw how simply we can convert our thoughts into a Windows Phone application. In a future article I will start a series of articles in which we will study Windows Phone 8.0 application development from the beginner label.