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…
Smart about (Smart-) Phones 
No trackbacks yet.