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…

Creating a Windows Phone Application in Expression Blend

All my applications, so far, I’ve created in Visual Studio. Earlier this week I attended a Windows Phone Event in the Netherlands, where I learned something about Expression Blend.

You can create Windows Phone applications quickly and easily by using Expression Blend for Windows Phone, the visual editor for creating Windows Phone 7 projects.

In this blog post, I’ll show you how to build a simple Windows Phone application in Expression Blend. First I am going to create the visual aspects of the app and then I am going to add the interactivity.

Expression Blend for Windows Phone comes with the Windows Phone 7 developer tools.

Expression Blend supports the several Windows Phone project types.

For this example, I am going to use the Windows Phone application to create a standard Windows Phone application.

I am going to open Expression Blend. On the ‘File’ menu I click ‘New Project’. In the opening dialog box I select ‘Windows Phone application’. In the ‘Name’ box I type in my project’s name. In the ‘Location’ box I browse to the folder where I want to store my project. In the ‘Language’ box I select the language that I want to use, in this case that is C#. In the ‘Version’ box I select the Windows Phone version that I want to target, in this case that is Version 7.1. Now I click ‘OK’.

A new Windows Phone project with the Windows Phone template opens on the art board.

Next step is to select the ‘ControlPanel’ in the ‘Objects and Timeline’ panel, and then choose the ‘StackPanel’ in the ‘Assets’ panel. Double-click on the ‘StackPanel’ to add it to my project.

Then I am selecting ‘StackPanel’ in the visual tree and on the right side I locate ‘Layout’, where I set both the ‘Height’ property and the ‘Width’ property to “Auto”.

The next step is to add a TextBlock. Therefore I select StackPanel in the Objects and Timeline panel (or visual tree), and then add the TextBlock by double-clicking on it.

To add text I simply use the ‘Properties’ panel, where I can format the text and change the properties of the TextBlock. Again I select in the visual tree, this time the TextBlock. On the right side I locate the ‘Common Properties’ in the ‘Properties’ panel, and type my text in the ‘Text’ field. In the ‘FontSize’ drop-down list I select 24 pt.

Now I want to add an image. I can either drag a supported image from outside Expression Blend, or I can use the ‘Project’ menu to add files by clicking Project – Add Existing Item, then browse to the image of my choice. Once it is added I can right-click on the image in the ‘Projects’ panel and select ‘Insert’.

To have that image in the right proportions I again set the Height and the Width properties to “Auto” and in the ‘Common Properties’ I set the ‘Stretch’ property to “Fill”.

Now I am going to add a button to my project. I double-click on the Button control in the ‘Assets’ panel with the StackPanel in the visual tree selected. On the right side I can add or change the properties. I give my button a name and change the content.

Now it is time to add some function to this little application.

First I am going to add an audio file to my project. That is the same procedure like adding that image before.

One thing to keep in mind, though: Silverlight only supports MP3 and WMA audio file types.

Now that I have the audio file in my project, I want to add a ‘PlaySoundAction’ behavior.

Behaviors are reusable pieces of packaged code that can be dragged onto any object, and then fine-tuned by changing their properties.

PlaySoundAction is a built-in behavior that plays a specified audio file when an action is performed, like when a button is clicked.

To add the PlaySoundAction behavior I am going to the ‘Assets’ panel, click ‘Behaviors’, select ‘PlaySoundAction”and drag it onto my BtnHello button in my visual tree.

Because I dragged and dropped the PlaySoundAction onto my button, the default trigger type (Event) in the ‘Trigger’ panel  is selected, the ‘SourceName’ and the ‘SourceObject’ are “BtnHello”.

I make sure that in the Event drop-down list “Click” is selected. Next thing I have to do now, is to select the audio file in the ‘Source’ drop-down list in the ‘CommonProperties’ panel. In the ‘Volume’ box I need to set a value of the volume. “0” is no volume, “1” is full volume.

Now I can build and run the project. When I click my button I can hear the elephant’s sound. How cool is that? I just built an application without writing a single line of code.

 

To be continued…

Application Icons and Marketplace Icons

Once you are done creating your Windows Phone Application you need to think about more. Your application will need icons. All icons have to be of the type png.

The required icons in your xap file are the ApplicationIcon.png and the Background.png. They can both be found in your solution explorer:

The ApplicationIcon is the one you find in the list of applications on your Windows Phone and has to be the size of 62×62 pixels:

The Background.png is going to be the Tile when you pin an application to your Windows Phone start screen and has to be the size of 173×173 pixels:

Make sure to set the build action of these two icons to “Content” and the Copy to Output Directory to “Copy if newer” in your Properties window:

For your submission you are also going to need:

– Device application icon for Windows Phone Marketplace catalog (small) in the size 99×99 pixels

– Device application icon for Windows Phone Marketplace catalog (large) in the size 173×173 pixels

– Desktop application icon for Windows Phone Marketplace catalog in the size 200×200 pixels

You might consider adding those icons to your solution. In my applications I usually add a folder to my solution called “Artwork” that contains both those icons and screenshots. The only thing you need to keep in mind is that you set the build action to “None” and the Copy to Output Directory to “Do not copy”:

Here you can find more information about Application Submission Requirements.

 

To be continued…

 

 

TextBlock eating text

I was working on an application earlier today when I ran into a serious problem.

I needed an info page with a scrollable TextBlock, because I had to add a lot of text. Obviously I started with something like that:

But when I added my text, the result was like this:

My TextBlock did not display the entire text. The ScrollViewer though was working fine. I could scroll further, where the text was supposed to be.

The reason is quite simple actually. There is a 2048 pixel limitation for UI controls. For a TextBlock the way to work around is splitting the text into smaller TextBlocks and stacking them in a StackPanel.

Alex Yakhnin created a control that does this automatically. You can find it here.

In order to use that control, there are a few steps needed:

1. Add Alex Yakhnin’s Phone.Controls project (Phone.Controls.csproj) to your solution.

2. Add the Phone.Controls project to the References in your project.

3. Build the Phone.Controls project.

4, In MainPage.xaml of your project add this to the header:

xmlns:my=”clr-namespace:Phone.Controls;assembly=Phone.Controls”

5. Now you can add a ScrollableTextBlock control to your page that just works:

Make sure to check out Alex Yakhnin’s Blog for more information.

 

To be continued…

 

Phone Tasks in Mango

In this blog post I will have a closer look at different Phone Tasks and their uses. All those tasks can be found in the Microsoft.Phone.Tasks namespace.

Each Task class has a method called “Show()” which is responsible for executing the task.

For the AddressChooserTask I created a new project with a button and a click event. In the click event handler I add the following:

Running the application gives me that result:

When I click my button the application shows me a list of my contacts.

Let’s have a look at another task, the CameraCaptureTask: Same application, just a different button and a different click event:

Obviously testing the CameraCaptureTask on the emulator is not as satisfying as testing it on a real device. Running it in the emulator will show a moving box across the screen edges. To take the snap simply click the Capture button:

Now I am going to look at the EmailAddressChooserTask:

Running this looks quite similar to the AddressChooserTask:

So far no rocket science. Now let’s take a look at the EmailComposeTask. This task will create the email composer UI. You can set different options like ‘To’, ‘CC’, ‘BCC’, Subject or Body of the email. The code in the click event handler looks like this:

Of course the emulator itself does not have an email box, so the result I get when running this looks like this:

The PhoneCallTask:

Of course you can also just pick a number with the PhoneNumberChooserTask:

The next task I am showing is the PhotoChooserTask:

Running in the emulator gives this result:

Let’s have a look at the SearchTask:

The last task I want to look at is the WebBrowserTask:

This will launch the browser with the mentioned URL:

For this blog post I just randomly picked some Tasks that I think are the most used ones.

Here you can find an overview of all tasks that are available.

 

To be continued…

 

%d bloggers like this: