Building a Simple Mobile Application using Windows Phone 7 + Expression Blend 4 for Absolutely Beginner!

Note: You can also read this post on http://students.netindonesia.net/blogs/mrjimoy_05/archive/2011/08/08/building-a-simple-mobile-application-using-windows-phone-7-expression-blend-4-for-absolutely-beginner.aspx

Hi everybody! And wow, it has been a long time not writing a blog anymore, 6 months maybe 🙂

Today I am going to share you how to make a really basic application using a very amazing tools, called Microsoft Visual Studio 2010 Express for Windows Phone 7 and Expression Blend 4. If you have no installed the tools yet on your computer, then you have to install it first. Watch http://bit.ly/9kIjQo for installing guide.

First, open your Microsoft Visual Studio 2010 Express for Windows Phone 7 (notice the Windows Phone 7, because there is Microsoft Visual Studio 2010 Express also without the “Windows Phone 7”), then click the “New Project” on the File Menu (or simply press ctrl+shift+N key). It should launch the “New Project” dialog. Make sure the Windows Phone Application’s template is selected and so for the Silverlight for Windows Phone’s tree on the left side. Give your project name and click OK.

You will get a new project page as shown in above figure. Then, select the Page Title ‘TextBlock’ property (it should be “page name” in above figure) and change the value to “my first page” or whatever, on properties tab (ctrl+w+p, and it should be on the bottom-right-side). And do so for the Application Title ‘TextBlock’ property which currently says “My Application”.

Then, drag a textbox from the toolbox into the main area (below the Page Title ‘TextBlock’ property), then give it a name, “MyTextBox”. Then set the following properties:

  1. Reset the ‘HorizontalAlignment’, ‘Width’, ‘Text’ properties by clicking right the property, then choose Reset Value;
  2. Set the ‘VerticalAlignment’ to “Top”;
  3. Set the ‘Margin’ to “0,0,160,0”.

You can change the property value to getting familiar to the tools. Then you should call it ‘a small experiment’. 🙂

Drag a button from the toolbox to the right side of the textbox, called it “SubmitButton”. Set the following properties:

  1. Follow the first process on the previous, except for the ‘Text’ properties;
  2. Change the ‘Content’ property to “Submit”;
  3. Set the ‘HorizontalAlignment’ to “Right”;
  4. Set the ‘Margin’ to “0”.

Then finally, drag a textblock to the bottom of the textbox, called it “SubmittedText”, and set the ‘Text’ property blank.

Now, double click the button called ‘Submit’ which has created before, to automatically wire up an event handler for the Click event. Add the code below between the SearchButton_Click event handler:

[code lang=”c-sharp”]private void SearchButton_Click(object sender, RoutedEventArgs e) {
string Value;
Value = Convert.ToString(MyTextBox.Text);

SubmittedText.Text = Value;
}[/code]

After you do that, then try it by pressing F5 button and select the ‘Windows Phone 7 Emulator’ then click OK. Wait for the emulator to load the application you’ve made. If it succeed, then it should be like the figure below.

Try to insert some text to the textbox, and then click the submit button. You’ll get your text copied to the bottom of the textbox.

Okay, now we will add a motion to the button using Expression Blend 4. Open your Expression Blend 4, and open the solution file that you’ve been working on Visual Studio 2010 Express for Windows Phone (the above solution of course). You’ll get this show on your computer:

Now, in the Object and Timeline window, click the + button, then click New.

This will make a new storyboard and prompted you to give it a name. Enter “SubmitPressedAnimation” followed by clicking the OK button. Click over the course of 0.5 second mark (shown by yellow vertical line),

make sure the ‘submit’ button clicked, then set the rotate angle to -20 on the RenderTransform section on below the Transform window.

Then, move the yellow vertical line to 1 second mark, and set the rotate angle to 20. Finally, move the yellow vertical line to 1.5 second mark, and set the rotate angle to 0. Now the timeline should be like the figure below.

Stop the storyboard editing by clicking the red button to the left of the storyboard name (look figure below).

It’s very important to do this, because although you have declared some animation, you haven’t linked it to any event until the timeline recording is on. Well, after stopping the recording, go back to your Visual Studio 2010 Express for Windows Phone 7. It will be prompted that you’ve to reload the solution because you’ve made some changes to the solution file on the Expression Blend 4.

Then, double click the ‘submit’ button, and add the code below, above the previous code you’ve inserted:
[code lang=”c-sharp”]private void SubmitButton_Click(object sender, RoutedEventArgs e) {
//Animate the button while clicked
this.SubmitPressedAnimation.Begin();

string Value;
Value = Convert.ToString(MyTextBox.Text);

SubmittedText.Text = Value;
}[/code]

Press F5 button on your keyboard, and try to give some value on the textbox, and click the button. See the difference with the previous one you tried? If so, congratulation for your first application! 🙂

Thanks for reading. 🙂

Notes: If you have anything to say about the article, please leave a comment. Please show a detail explanation (just like if you’ve got any error, attach the error message) so it should be easier for me to help you.
(attach the file if needed (Only: jpg, jpeg, png, gif, zip files can be uploaded)).

Leave a Reply

Your email address will not be published. Required fields are marked *

*