WPdev for beginners

I have been thinking about getting an app out into Marketplace myself. I have come up with a few ideas. I don’t know, yet, if I can make them work, but I am going to give it a shot for sure.

Of course, with that idea in the background, there is still so much to learn about developing for Windows Phone 7. But, with what I have learned so far, I think, I could actually give it a try.

I will, of course, report every step here on my blog.

Anyway, before I can start that, I need to have a look at a few little things. Like how to style the background of my app using an image. After all, I want to give it an unique look. Otherwise it’s going to be another application with just a black background.

Another thing I want to look at is what happens when I turn the emulator. Will my application be displayed right? And if not, how can I make it right? And how does that change the layout of my application?

So, there still are a few things, that I need to know before I really can get started working on a real application.

So, I am just going to create another project in Visual Studio.

First thing I want to do is running the app and rotating the emulator:

Well, that’s not going to work. Everything is locked in places. The way to fix that is a simple property on the Application page:

I am changing that property in the property window:

This is going to change the Orientation property in XAML, and I can turn the emulator either way when running the application:

Now everything flips into place, depending on how I turn the emulator, or later the device.

Let’s move on and set a background. Now, the easy thing to do, if I want to move away from that black background is, of course, to change the background color. But I want an image background.

Here is how I do that: I put my mouse cursor in the LayoutRoot Grid and then I can go to the property window where I can change the background property from Transparency to the image I choose as my background:

So far, so good. Let’s run it:

It is re-orienting itself when I turn the emulator. The only thing left here is to set the proportions right. I do that by changing the Stretch property of that image from Fill to UniformToFill.

Now I drag and drop a Textblock control into my main form:

The problem now is that I have to make sure that my text is readable with the image in the background. A useful control for that is the Rectangle control. Let’s drag and drop one right on the Textblock control. I am going to edit that a little in my XAML. What I want is the Rectangle control behind the Textblock control but in front of the image itself. First thing I do here is to modify the opacity of the Rectangle control.

When I run it now and turn the emulator I am yet running into another problem:

Both my Textblock and my Rectangle do not stretch to the entire width of my emulator when it is in landscape mode. In order to fix this I am setting the Horizontal Alignment of both controls to “Stretch” and set the left Margin setting of both controls to “0”. Finally I am going to remove the Width property for both controls completely:

When I run it now my Textblock and my Rectangle nicely fill the width:

Let’s move on.In one of my ideas for an application I need to allow the user to edit values that at this point are read-only. I want the Textblock to flip into a Textbox. There is a little trick. Let’s drag and drop a Textbox onto the designer:

I am going to set the Textbox properties equal to the Textblock properties in the XAML. I am also clearing out the text property of the Textbox. The text property of the Textblock I am changing to “Hello World”.

Now I need one more control, a button:

Now I have to write some code inside my event handler. When somebody clicks the “Edit” button I want the Textblock to flip to the Textbox and back to Textblock when the button is clicked a second time:

What I am doing here, is first checking if the Textbox is visible. If so, then the first codeblock (“if”) is executed. If not, then the second codeblock (“else”) is executed. So basically I am toggling between the Visibility of the Textbox and the Textblock. When somebody clicks the Edit button then I want to retrieve the value of the Textbox and put them back in the Textblock. One more thing to do. In my XAML I am going to set the initial Visibility of the Textblock to “Visible” and the initial Visibility of the Textbox to “Collapsed”:

Let’s see this in action. When I click the Edit button the application hides the Textblock, opens up the Textbox and puts in the value so that I can edit it:

When I click the “Save” button it collapses the Textbox, opens up the Textblock again and puts the value from the Textbox back in the Textblock.

To sum it up, I have set an image background, I made sure that the proportions are right both in portrait mode and in landscape mode, I made sure that my text stays readable with an image in the background and I allow the user to edit values.

With that said I think it is time to start working on an application.

To be continued…