Posts Tagged ‘ Windows Phone ’

Creating Buttons in Expression Blend

When I create an application, I am thinking about making the UI as appealing to the user as possible. The first thing the user sees from my application is the little icon in a long list of applications. Let’s assume the user likes this icon. Then most likely the user will read the description, and when I am lucky the user likes it. The next thing the user does is checking out the screenshots. And only then the user is convinced to download my application or not. It helps a lot if the UI looks appealing.

Now, most applications have buttons. In Visual Studio the options of creating buttons are limited. That’s why for this blog post I am going to show how easy it is to create a button in Expression Blend.

I am just going to start with launching Expression Blend and creating a new project:

File –> New Project –> Select Project Type (Windows Phone) –> Windows Phone Application.

I give it a name and choose the language (C#), the version (7.1) and the location where my project is going to be saved at.

Then I am going to add a Button control from the ToolBox to the LayoutRoot. Now I am going to create a custom style for my button. In order to do that I am editing the default button template. ‘ReTemplating’ or ‘Styling’ is one of the most powerful features of Silverlight. What that means is being able to completely replace the ‘look and feel’ of UI elements.

Let’s do that. I right-click on the selected button and select ‘Edit Template’ –> ‘Edit a Copy’.

On the ‘Create Style’ resource dialog I give the style a name and click ‘OK’:

In the Object tree I can see that a Button of multiple parts is composed. With a ‘Template’ I have the ability to replace these parts. With a ‘Style’ I can only change the appearance from outside by changing public properties. ‘Styles’ consists of property setters and when you apply a style it sets the properties on the element to the styles’ values:

Before I continue, I write down the default size of my button, so I remember it later.

Now I add three rectangles to the Grid of the Template and name them:

Now I select “dropShadowRect” and change the rectangle to a rounded rectangle. I do that by changing the Radius settings in the Appearance panel:

I do the same for the other two elements.

Now it is time to apply a solid color (black) to the ‘dropShadowRect’:

If you don’t see the element you are currently working on, you can use the Show/Hide property on the ‘Object and Timeline’ panel:

Now I am going to modify the ‘reflectiveRect’ and give it a linear gradient brush, that goes from a bright color at the top, then gets darker three quarters down and finally brightens up again at the end. I use the ‘Gradient Tool’ from the Tools panel:

Note: It is important to set the ‘Stroke’ property of this ‘reflectiveRect’ rectangle to “No brush”.

For the ‘transparentRect’ I select the right GradientStop, apply a linear gradient brush fill, remove the Stroke and make the rectangle transparent by adjusting the ‘Alpha’ to 0%:

Note: With a dark background canvas I cannot see the changes to my transparent element. I solve this problem by applying a bright solid fill.

Finally I need to add the “ControlPresenter” back:

That was easy. I just created my button:


To be continued…




Image Background, Orientation Changes, Control Visibility

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…



GPS, Location API and Calling Web Services

The Windows Phone 7 is equipped with a GPS interface and couples that with the Windows Phone Location Service API within the .NET Framework class library. It can be used to determine the Latitude and Longitude for the application run on a Windows Phone device. It can be used for some pretty creative purposes.

As a matter of fact there are some companies that use Geo Location, e.g. that big coffee chain from Seattle (not mentioning the name here), allowing “check-ins”.

I am going to have a look at how this works. Unfortunately, since the Windows Phone Location Service API relies on a phone’s physical hardware for the GPS, and I, in this example, will only work with the emulator, I might not get a completely satisfying result, But I am going to try it anyway.

I am going to try and retrieve the current location of the phone, or in this case the emulator, through the Windows Phone Location Service API. At least I am going to show the approach how it can be done. I am going to use the Latitude and Longitude of a specific location, if indeed the application is running in an emulator as opposed to a physical device someday.

Then I am going to call a Web Service that will allocate the Latitude and the Longitude to a city, state and country.

A Web Service is just like a method that runs over the internet. Somebody hosts a Web Service and exposes the code block’s name (in a sense), what parameters are accepted and what it will return back. I can call that over the internet and then retrieve the result back and do something meaningful with it.

I create a new project with just a textblock, where I clear out the content, and a button where I change the content to “Find Me”:

I am just going to double click the “Find Me” button to get to the click event in my C# code.

The first thing I need to do is to get access to the Windows Phone Location Service API, which I currently don’t have. I don’t, because the way that .NET Framework class library is built, it is split up into a number of different dll files or assembly files. The reason for that is that I don’t have to load more of the library than I actually need. With so many classes available it would make it so overweight to keep it all in one place and make it all available at the same time. So, all I need to do is just to pick and choose all the pieces that I need, and include that particular dll file into my project.

If I open up the References folder, I can see all the dll files that are there already:

Those dll files have been automatically added when I created the new project. The template would add these. It kind of knew I would need some of those features in almost every application I build.

This is the first time that I’ve come across a feature that doesn’t fit inside one of these dll files. I am going to have to add a reference to that:

I now can see it in the list of dll files. Now I have to add a little using statement:

Now I should be able to add some code inside my button click event:

So, I either retrieve the latitude and longitude on the phone device. If I am not running the application on a physical device, but on the emulator, then I have defaulted it to a specific value, so that I get some satisfaction by running this example.

Now, that I have that location information I need to send it off to a Web Service in order to determine the city, state and country of either the retrieved latitude and longitude or the default value.

Again, a Web Service is like a method that communicates over the internet, usually over port 80 or rather over http, just like the rest of the internet.

The conversation between my client application and the web server that hosts the Web Service is in an XML format called SOAP (Simple Object Access Protocol). Fortunately I don’t  directly have to deal with the XML, rather the SOAP message. Visual Studio and the .NET Framework will hide those from me, so that I can work with the Web Service as if it were any other class or method in the .NET Framework class library. This is called a proxy class.

The proxy class is created, based on the information that Visual Studio initially retrieves from the Web Service’s definition the first time I try to connect to the Web Service using Visual Studio. The proxy class then handles all of the little details of working with that Web Service, so that I don’t have to.

Here you can find some Information about the Web Service I am going to use. I am choosing MSR MapsService WSDL, then there opens up a page with a list of all the methods that belong to that class. I need that Url :

Ok, now I right click on my project name in the properties window and add a Service Reference:

A window is going to pop up where I have to paste in that copied Url and then click on “Go”:

Now it is looking over the internet to find that Web Service and everything that belongs to it:

Eventually I rename that namespace to something friendlier. When I then click the OK button, Visual Studio is building that proxy class that I can access from that point on.

Now, I have to admit, at this point I ran into some trouble. I just kept getting some error messages, so I repeated the step of adding the Service Reference a few times. Nothing worked. I even started the whole project again from scratch. That didn’t change anything. I still kept getting those errors. Then I closed down Visual Studio, opened it up again, and added the Service Reference again. That did the trick. I am wondering if it was a bug in Visual Studio, or if it was my pc. Or was it my lack of knowledge? Anyway, if any of you want to try my example and you run into some trouble, then try to close and reopen Visual Studio.

Ok, let’s move on:

I am creating a reference to a “client” object. I am going to need to make what is called an asynchronous call. When I make a call over the internet it might take a long time, depending on the time of the day or if the user is going to make that call with the phone and has a bad connection. So, what happens while the application is waiting?

The phone is basically locked out of taking additional actions. Therefore in Silverlight, I can call some Web Services asynchronously, meaning that I listen for the event that fires once the application receives back the response from the Web Service, if it ever receives it back. Meanwhile then the application is free, and the phone is free to continue on working until that event happens. So, once I’ve told Silverlight that I am listening for the response in an event that I am going to create, then I am free to call the Web Service. It’s a two step process. I am going to send out the request, and while I go on doing what I want to do, at some point the response will be retrieved. In other words, the phone will not lock down while waiting for the response, it will continue to operate.

Fortunately again, Visual Studio makes this very easy. It creates an event that will handle the asynchronous call.

There is an event handler called “ConvertLonLatPtToNearestPlaceCompleted”. This is what I do:

When I type in “+=”, there pops up a bubble that’s going to create that new event handler by hitting the tab key twice:

Visual Studio is generating that event handler that is fired off whenever that event happens. It also threw in an exception. I don’t think I am going to need that exception, so I comment that out and add add this line of code there:

So far, so good. I have set everything up, but I have not really called the Web Service, yet.

Let’s do that. I am going to add this code inside the button click event handler:

What’s going to happen is that I am going to pass in the default Latitude and Longitude values in the creation of a new object of type LonLatPt. It’s what is reqired by this Web Service “ConvertLonLatPtToNearestPlaceAsync” in order to begin the asynchronous call to the Web Service.

Ok, let’s run it:

Well, the only issue seems to be that my default Latitude and Longitude values seem to be incorrect. I expected it to be Amsterdam, but it is close enough. This will do.

Of course, to run this application on a physical device, I need to make sure to have a data connection.

One more thing: I am looking forward to the release of the new Mango tools. I just read that with them I can test this application even better in the emulator.

So, I am pretty sure that there will be other blog entries about this topic.


To be continued…






%d bloggers like this: