Page 1 of 1

Creating a Windows Phone 7 Application in VS2010 for non VS users(Part Rate Topic: -----

#1 smohd  Icon User is offline

  • Critical Section
  • member icon


Reputation: 1819
  • View blog
  • Posts: 4,627
  • Joined: 14-March 10

Posted 29 January 2011 - 09:41 PM

Creating a Windows Phone 7 Application in Visual Studio2010 for non VS users (Part 2):

In this part two we are going to see a little about the items contained in every windows phone seven project template. Then we will see GUI designing and coding part. For new Visual studio users you can first read part one before going to part two.

Know items in WP7 solution:

Solution in visual studio is a container or folder where related projects are saved. With the help of solution explorer we can view items and perform item management tasks in a solution or a project. Solution explorer is located at the right of the IDE, if it is not there you can show it by going to view menu from the menu bar and then Solution Explorer or just Ctrl + R or Ctrl +Alt + L (These shortcuts change).

Attached File  1.JPG (30.76K)
Number of downloads: 3

Let’s discuss in brief about these items you see in solution explorer.

App.xaml file;

This is an Extensible Application Markup Language (XAML) file which is an important part of Silverlight programming. In particular, developers use this file for storing resources that are used throughout the application. Herein you can define application-level resources such as colors, brushes and style objects used throughout the application. The XAML code also initialize the ApplicationLifetimeObject property for creating PhoneApplicationService class which provides access to various aspects of the application`s lifetime.

Attached File  2.JPG (57.04K)
Number of downloads: 0

The App.xaml together with its code-behind file App.xaml.cs defines an instance of the application class. This class encapsulates a Silverlight for Windows Phone application and provides its entry point.

Attached File  3.JPG (77.43K)
Number of downloads: 0

The App.xaml.cs also has a constructor in an Application class which has a handler for the UnhandledException event. Also there is a RootFrame property which identifies the starting page of the application

MainPage.xaml file;

This file defines the main UI of the project. By default the designer shows the document in split view, one part shows the XAML code and the other one shows a designer of the user interface elements.

Attached File  4.JPG (135.79K)
Number of downloads: 0

From the toolbox you can customize the interface by dragging its components to the designer. Initially, the interface came with the application name and title labels which you can edit or remove them.
Also this file contains its C sharp code file, MainPage.xaml.cs. This file contains a partial class named MainPage that defines the visuals you will actually see on the screen when you run the Windows Phone program.

Attached File  5.JPG (57.07K)
Number of downloads: 0

ApplicationIcon.png / Background.png / SplashScreenImage.jpg;
These are picture files present in Windows Phone 7. The ApplicationIcon.png file contains the icon that identifies the application in the quick launch screen of the phone device. If you are using VS 2010 you can open it in a built-in image editor else if you have Express edition you can open it in other image editor. The SplashScreenImage.jpg is the image that display when the program is initialized. The Background.png is the image that is used when the application is pinned as an application tile.

Creating GUI and Coding:

OK, now return to MainPage.xaml where we can customize the UI. Remember the application which we have run in part one, now select the page name Text Block and go to properties then you can change the properties of any tool. But now just change the text to “DIC Application” and font size to 64. Also you can change the text of the two buttons and their names as shown below..

Attached File  6.JPG (52.29K)
Number of downloads: 0 Attached File  7.JPG (53.26K)
Number of downloads: 0

Fine, let me stop telling about UI because it sounds easy, and from this brief now you can do for the rest of available tools. My design will be like this for now:

Attached File  8.JPG (29K)
Number of downloads: 0

Now double clicking on any of the tools it will open MainPage.xaml.cs file with a ready-made click event function where you can write code for it.

Attached File  9.JPG (54.99K)
Number of downloads: 0

Also you can change the load event of the form by double clicking on the open space of the form. Another thing which you need to know is that if you double click any control, it will update the XAML to include that control_Click event handler.
Now in button Ok event replace this code:

private void button2_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("I love Dream In Code");
        }



Also you can manage errors in the application by putting new page that will display the error message and you create an event handler for the unhandledException event. This event is raised whenever an exception in the application is not caught. Although your application should include proper handling for any exceptions that you can deal with. To add new page just go to solution explorer, right-click on the project node, point to add and select New Item. In the dialog window, select Windows Phone Portrait Page, give it a name say ErrorPage.xaml and then click Add.

In the ErrorPage.xaml change the code:

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>

To be:

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1">
            <Border BorderBrush="White">
                <TextBlock x:Name ="ErrorText" Style="{StaticResource PhonetextSmallStyle}" TextWrapping="Wrap" /> 
            </Border>
        </Grid>



In the file ErrorPage.xaml.cs insert the following namespace directive in the top of the file:

using System.Windows.Navigation;


Then in the error page partial class insert the following code and your class will be like:

public partial class ErrorPage : PhoneApplicationPage
    {
        public ErrorPage()
        {
            InitializeComponent();
        }
        public static Exception Exception;
        protected override void OnNavigatedTo(NavigatingEventArgs ex)
        {
            ErrorText.Text = Exception.ToString();
        }
    }


The rest of code needs C# and Silverlight knowledge and this tutorial is not about them but is about introduction to Windows Phone 7 programming in Visual Studio.

Now another thing you need to know here is about the dynamic layout. When you try to rotate the emulator the display will not change to accommodate the new orientation.

Attached File  10.JPG (15.89K)
Number of downloads: 0 Attached File  11.JPG (29.31K)
Number of downloads: 0

This is because, by default, Silverlight programs for WP7 run in portrait mode, and XNA programs run in landscape mode. To fix this, in the root PhoneApplicationPage in MainPage.xaml file just change the code:

SupportedOrientations="Portrait"


To:

SupportedOrientations="PortraitOrLandscape"


SupportedOrientations is a property of PhoneApplicationPage which sets member of the SupportedPageOrientation enumerator to Portrait, Landscape or PortraitOrLandscape.
Now recompile and try to rotate the emulator the display will be as shown below:

Attached File  12.JPG (29.33K)
Number of downloads: 4

This was the story about coding, now let me finish this tutorial by introducing a little about compilation errors. If it happens that you try to run a code with some errors, errors will be displayed in error list window. This window displays errors, warnings and messages produced by the compiler in a list that you can double-click an item to automatically open the relevant source code file where the error occur. Then fix the error and rerun again.

Thank you a lot to those who follows this tutorial, I think it help, don’t forget to rate and credit this tutorial. See you again in other Dream In Code threads.

Is This A Good Question/Topic? 2
  • +

Page 1 of 1