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…

Advertisement

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…

%d bloggers like this: