Windows Phone App Development for Beginners #5 Basic XAML

published on: 1/10/2012 | Views: N/A | Tags: Beginners

by WindowsPhoneGeek

This is the 5th post  from the "Windows Phone Application Development for Beginners" series of articles in which I use a more informal approach in order to explain everything you need to know in order to get started developing Windows Phone applications in a simple and easy to understand way.

• Windows Phone App Development for Beginners #1: Intro
• Windows Phone App Development for Beginners #2 Installing the Tools
• Windows Phone App Development for Beginners #3 Getting Help
• Windows Phone App Development for Beginners #4 First Visual Studio project
• Windows Phone App Development for Beginners #5 Basic XAML
• Windows Phone App Development for Beginners #6 Layout

NOTE: If you are a professional Windows Phone Developer you should probably stop reading now.(this series if for absolute beginners)

In short XAML is the declarative language used to create phone application UI such as buttons,checkboxes, shapes, text, and other content presented on the screen. You can either write XAML code on your own or use tools like Visual Studio or Expression Blend to create the UI and automatically generate the necessary XAML for you.

Basic XAML

To begin with, lets first create a new Windows Phone application project and name it "WPXAMLBasic".(for reference you can take a look at Windows Phone App Development for Beginners #4 First Visual Studio project)

Step1. Go to the "Toolbox" tab where you can find all available UI components that you can use to build Windows Phone app UI.

NOTE: The "Toolbox" tab should be on the right side in your  Visual studio project. If for some reason you can not find it, then you can go to the Visual Studio menu and select View->Toolbox as shown below.

 

You can either use the "Auto  Hide" default setting of the toolbar or you can pin it just by pressing the button as shown below:

Step2. From the "Toolbox" drag a Button on the design surface as shown below:

Step3. If you want to see the generated XAML code then just go to XAML view as shown below:

Step4. Right click the button element in the design surface and select "Properties" from the context menu. The "Properties" panel will open from where you can change different settings of your button:

Step5. Next, click the "page name" text on the design surface, right click and select Properties. Next go to "Text" and change the text to "My first WP7 app" and press Enter. As you can see the change is automatically reflected in the design surface:

That's it for now. 

I hope the post was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Windows Phone App Development for Beginners #5 Basic XAML'

Title Your Name

Comment