Search

In this video tutorial I show you how to use Behaviors and the Visual State Manager to create a navigation bar that slides in when the user places their mouse at the top of the page and then slides away when they move their mouse away from the navigation.

The issue is that the Expression Blend Add-in Preview for Windows Phone (April Refresh) is not compatible with Blend 4.0.20408.0, which was the public RC (release candidate).

A few days ago, the Blend team released a fix for an issue that was sometimes causing a crash when Blend was starting up. This new release (V4.0.20421.0) was not very well announced however, and many people (including me) did not install it. After all, Blend did not crash at startup of either of my machines, so I didn’t deem necessary to install yet a new RC.

However, it is now clear that the Windows Phone 7 Add-In needs this latest-and-greatest version to work. If you have Blend 4.0.20408.0, you won’t be able to work with Windows Phone 7 in Blend.

In my final article, we’ll be taking our sample portfolio application even further. We’ll learn about storyboards and how to create animations. We’ll then return to behaviors and learn how to use them to set up interactivity in our application without writing any code. After this article I’ll be handing over to Tatham Oddie, who will take you through the features of Expression Blend’s sister product: Expression Web.

1- import an image and place on the artboard
2- add a rectangle with a radial gradient the same width and height as the image
3- add a rectangle with no fill and grey color as the border
4- select all 3 objects, right click and group into a canvas
5- right click and select make into usercontrol
6- select button as the type of usercontrol you want to create
7- right click and select “edit template/edit current”

8- select the states panel and go to the “mouseover” state and set the gradient’s opacity property to “0″ and change the stroke color of the rectangle from grey to white

9- change the transition duration to 0.3 sec and set the transition to “cubic in”

More times than not I am zoomed in well above 400% when I am designing UI components. I found out how to change the zoom setting to 800% and render the effects properly and allow me to design how I am accustomed to.

Effects do not render if you are zoomed in above 400%. More times than not I am zoomed in well above 400% when I am designing UI components. So I was confused as to why I couldn’t see the rollover effect that I was applying to my component.

Apart from describing the steps to style each of the controls for this particular theme, I've been trying to describe some of the techniques and knowledge that can be applied generally to any theme or style.

• In part 1 we covered creating style resources in a resource dictionary.

• In part 2 we covered editing control templates as part of a style, including states.

• In part 3 we knocked off a couple of the easier controls to style, although we added some extra elements to the control template.

In this post, we are going to dig down into a control that is made up of a collection of other controls: the ListBox. But we are going to begin by styling the other controls that make up the ListBox.

How to Style the Control Template of a ListBox in a small MVVM application. Discussing multiple Styles, nested Controls, Resource Dictionaries, Similar Control Templates (TreeView), Control Reuse & a few other tips...

Designers aren't evil. Let me say that again for those developers out there: Designers aren't evil. Their job is hard just like yours. The problem is that designers and developers haven't had the tools to work together before. The rough answer to that problem for the past few years in Silverlight has been Microsoft Expression Blend. But that's only been part of the story.