Posts Tagged ‘ Expression Blend ’

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…

Advertisements

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…

%d bloggers like this: