Posts Tagged ‘ WP7 ’

The VibrateController Class

I am currently working on another Windows Phone Application, where I needed a way to show the user that they had successfully performed a task and therefore unlocked another feature inside the application.

First idea was adding some sound, but somehow I was not happy with that. So I thought, why not let the phone vibrate?

It’s actually not that hard. The Windows Phone 7 SDK allows me to control the vibrate function easily.

In the namespace Microsoft.Devices there is a class defined with the name ‘VibrateController’.

The only code I need for that function is:

When the user clicks the particular button, the phone vibrates.

A few thoughts to keep in mind:

1. the shortest vibration / pause is 0.1 seconds.

2. the longest is 5 seconds, but that is not recommended.

3. 3 vibrations in one sequence are enough.

4. 0.2 / 0.3 are good choices for an alert.

 

Here you can find more information about the VibrateController Class.

 

To be continued…

Creating an Alarm Application

I don’t have a kitchen timer, but who cares? I have a Windows Phone, right? So I just created a little Alarm application to compensate for missing kitchen equipment.

It is a very simple application that has a TextBlock (for instructions), a TextBox, where I can set the alarm (I chose to set that in seconds), and two buttons. One for setting the alarm, the other one for resetting it:

By clicking the ‘Set Alarm’ Button I set the alarm. A method called ‘CreateAlarm’ will be created. This method will create the instance of the alarm by passing a name to the constructor. I am also going to add a little alarm message:

“ScheduledActionService.Add(alarm)” will let the alarm go off when the application has been closed. It will execute in the background.

Works as expected. I just have to make sure to press the ‘Reset Alarm’ Button after an alarm went off, to prevent it from crashing. I am sure there is room for improvement, but for now, I am happy with that.

 

To be continued…

 

Add Ads to your App

Why ads to begin with?

I have a few apps in the Marketplace that can be purchased. The average end user though is not going to purchase anything that they haven’t tested. Therefore it makes sense to have a trial version of the app. The trial version usually has some limitations. Either you limit the functionality of the app, or, like I am doing in my apps, the trial version is ad-driven.

To add ads to your Windows Phone App you just need to follow a few steps.

1. Make sure you have the latest tools. You can find them here.

Although that ships with the Advertising SDK, it is recommended to download the latest version of the Advertising SDK as well.

2. Add a Reference:

Since I am developing my apps in Silverlight, this is the one I need.

3. In the root element of my XAML file I need to add this:

In the Layout root of my XAML file I create my AdControl:

Of all the properties of the AdControl, ApplicationId and AdUnitId are the most critical. The example uses special values intended for testing. Let’s see how that looks:

Even though the SDK lists several different sizes for supported ads, only two have test images, that you specify through the AdUnitId property. For a 480×80 image, I use Image480_80 and for a 300×50 image, I use Image300_50. For a Windows Phone application it is recommended to use a 480×80 image.

One more property that is important to know is the RotationEnabled property, which by default is set to true. This means that a new ad will periodically and automatically be shown.

4. Get ApplicationId and AdUnitId at the Microsoft Advertising pubCenter. For every application you have ads for, you need to get an application ID. Each application can have multiple ad Units. If you are visiting the pubCenter for the first time, click the ‘Get Started’ button, otherwise sign in.

At the top there are two rows of tabs. First click the ‘Setup’ tab in the first row, and then ‘Sites and Apps’ in the second row. Click ‘Create a new application’:

Now you need to specify a name for your application. With clicking “add”, the Application ID will be assigned.

Once you have that, you can click on ‘Ad Units’ in the second tabs row. Click on ‘Create a new Application Ad Unit’. Now you need to select up to three categories per Ad Unit. This specifies the kinds of ads you want to be shown in your application

5. Now you need to set the assigned values to the ApplicationId and AdUnitId properties of your AdControl.

In order to get real ads, you need to set the static TestMode property to false in the constructor:

Here you can find more information.

 

To be continued…

 

 

 

Visual Studio vs Expression Blend: Adding an Application Bar

Many applications have an AppBar. The ApplicationBar on Windows Phone is the equivalent of a menu bar and / or toolbar for desktop applications. It can include IconButtons and MenuItems.

The namespace Microsoft.Phone.Shell defines the AppBar.

I’ll get started right away with a new project in Visual Studio.

All I want to do is add an AppBar with four icon buttons and seven menu items. There are a few steps that I need to take:

1. Create a folder (I usually call that folder “Images”) in my solution that is going to hold my icons.

2.Get the icons I need the folder:

Windows Explorer – OS(C:) – Program Files – Microsoft SDKs – Windows Phone – v7.1 – Icons – dark

On a 64 bit OS the icons are in the folder:

Windows Explorer – OS(C:) – Program Files (x86) – Microsoft SDKs – Windows Phone – v7.1 – Icons – dark

I select the icons and drag them into my created Images folder.

3. In the solution explorer I set the Build Action for all four of them to “Content”.

4. Reference them in my ApplicationBar.

Visual Studio creates an AppBar by default. It is commented out.

I uncomment it and change the references:

That created a nice ApplicationBar with four icon buttons and a few menu items in my project:

 

 

With Expression Blend I don’t have to do all this, because of the better UX (User eXperience) when creating an ApplicationBar.

In the ‘Object and Timeline’ panel right-click the ‘PhoneApplicationPage’ and click “Add ApplicationBar”.

That already created the ApplicationBar. Now I only need to add the icon buttons and the menu items. I right-click on the ApplicationBar to add ApplicationBarIconButton and ApplicationBarMenuItem.

After adding the IconButtons and the MenuItems I can add my images for the buttons and change the text property’. I can do that in the ‘Property’ panel under ‘Common Properties’ with the IconButton or MenuItem selected in the ‘Object and Timeline’ panel:

Clicking that little arrow opens a drop-down list where I can select the icon I want. I do that for all four buttons.

To wrap it up: The ApplicationBar can have up to four IconButtons and as many MenuItems as I like. That is true for both Visual Studio and Expression Blend.

No matter where I create my AppBar, in Visual Studio or Expression Blend, the end result is the same. It looks easier to create an ApplicationBar in ExpressionBlend. But in the end it comes down to personal taste.

 

To be continued…

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…

 

 

Drawing Objects in Expression Blend

For this blog post I want to have another look at Expression Blend.

Expression Blend offers standard vector drawing capabilities, so that I can draw shapes, paths and masks. Just like in any vector graphics program.

A Drawing Object describes visible content, such as shape, bitmap, video or text. Different types of Drawings describe different types of content. The following types are supported in WPF (WPF = graphical subsystem for rendering user interfaces in Windows-based applications):

ImageDrawing          –         Draws an image

GlyphRunDrawing    –         Draws text

DrawingGroup          –         Draws other Drawings

(used to combine other drawings into a single composite drawing)

VideoDrawing           –         Plays an audio file or a video file

GeometryDrawing     –         Draws a shape

Its Geometry property describes the shape to draw, its Brush property describes how the

interior should be painted and its Pen property describes how its outline should be drawn.

Shape objects are UIElements and can be used inside Panel elements and most controls.

All Shape objects inherit from the Shape class. Available Shape objects include Ellipse, Line, Path, Polygon, Polyline and Rectangle. Shape objects share the common properties. Any object can have these properties defined through the Properties panel and the Appearance panel in Expression Blend.

Ok, let’s look at some properties:

Stroke: Describes how the shape’s outline is painted:

StrokeThickness: Describes the thickness of the shape’s outline:

Fill: Describes how the shape’s interior is painted:

Opacity Masks: An opacity mask can be a path or a shape that is applied to another object. The transparent portions of the path represent areas where the underlying image is hidden, and the opacity mask indicates where the masked object is allowed to show through:

Compare that to setting the opacity to 30%:

I think that Expression Blend is much easier than I initially thought it would be.

When I started this blog I didn´t know anything about programming at all. I am pretty sure though, if I would have started with Expression Blend, then I would not have learned how to write code. Because it is just so easy to draw or add behaviors in Expression Blend. I probably would have just stayed with it.

But I actually like coding. So, for me Expression Blend is just a nice addition. I am going to look into Expression Blend a little more in the upcoming blog posts, but I for myself will continue writing my apps in Visual Studio.

 

To be continued…

Creating an Animation in Expression Blend

In yesterday’s blog post I created a little application in Expression Blend. Basically the application shows an image of elephants and a button that lets you hear an elephant’s sound when you click it. Now I want to add an animation. The idea is to let the elephants appear when one button is clicked, and disappear when another button is clicked.

I am going to reuse that button that I already have and add a second one:

Now I can create the animation. To do that I am going to create a new storyboard and then define the animation in the animation timeline.

I want the image invisible until after I press the “Look Who’s There” button. So I am going to begin by setting the opacity of the image to “0”.

In the ‘Objects and Timeline’ panel I click ‘Image’, in the ‘Appearance’ category I type “0” in the ‘Opacity’ field.

Now I am ready to begin recording the animation.

With ‘Image’ selected in the ‘Objects and Timeline’ panel, I click the “+” sign.

That lets the “Create Storyboard Resource” dialog box appear. I give that Storyboard a name and then click “OK”.

In the ‘Objects and Timeline’ panel I click “Record Keyframe”. A keyframe appears on the timeline in the row that corresponds to the selected object, in my case the ‘Image’.

Expression Blend enters timeline-recording mode with the playhead at the 0 – seconds mark. When in recording mode, any property that I set will automatically record a keyframe on the timeline.

I want my animation to last as long as the audio file, which is about 5 seconds. So I drag the playhead to 0:05:00.

Because I want the animation to go from invisible with the playhead at 0 seconds to visible at 5 seconds, I change the ‘Opacity’ in the ‘Appearance’ category now to “100”. Now, when the animation is triggered, the image will fade in gradually. I can test the animation now by clicking “Play”.

When I am happy with my animation I simply click on “Record mode indicator” to end the timeline recording.

My ElephantsStoryboard animates the fading in of the elephants. I am going to need another storyboard to animate the fading out of the elephants.

The easy way to create this animation is to duplicate and then reverse it.

To duplicate the animation I click on the drop – down button next to the “+” sign in my open existing ElephantsStoryboard and select “Duplicate”. That will create a new storyboard with the name “ElephantsStoryboard_Copy1”. I am clicking the same drop – down list and select “Rename” to rename that, then from yet the same drop – down list I select “Reverse”. The storyboard is now replaced with a reversed version of itself.

Now I can close my storyboard. Now that I have created my animations I need to be able to control when to play the animations. So, what I have to do is add a “ControlStoryboardAction” behavior to each button. I simply drag and drop it from the ‘Assets’ panel onto each button, and then modify the properties to fine-tune the behavior:

Now I can build my project and run it:

First the screen appears empty. When I click my “Look Who’s there” button, the audio file begins to play and at the same time the image is slowly fading in:

It is quite easy to build applications in Expression Blend. I am definitely going to experiment more with that. Who knows? Maybe the next application that I am going to submit is going to be an entire Expression Blend application?

 

To be continued…

%d bloggers like this: