In the first post I did for WP7, I showed how to develop a simple, mini Twitter client with VS 2010 RC.
This post is going to be designer oriented (beginner level, as if you’ve never used Blend before!)
In order to be able to use Blend for WP7, check out this site : http://www.silverlightshow.net/news/Expression-Blend-4-for-Windows-Phone.aspx
Now let’s get to the fun part.
In the designer window, right-click the "Update Status” button > Edit Template > Create Empty.
Name the template whatever you want, I’m calling it :”HotButton”.
Change the layout container of the new template from “Grid” to “Border”.
Now let’s start designing :
Set the BorderThickness and CornerRadius to whatever you want.
In order to find the Properties faster you can use the Search bar.
Apply a gradient background by selecting the Background property and then picking the Gradient brush option.
And pick the colors you want from the palette.(left : start point , right : end point ).
Now let’s add the text for our button.
Go to the “Assets” tab then Controls > double click on TextBlock (while insuring the Border layout container is still selected)
Now let’s align our text, because we have to admit it is ugly on the left, so let’s change both “VerticalAlignment” and “HorizontalAlignment” Properties.
Now go to the Foreground property of the TextBlock and set a foreground color, in my case it’s going to be something close to black.
Mmmm what’s missing now ?
We have to link the Text property to the actual content of the Button. So to do that, click on the tiny square next to the Text Property > Template Binding > Content.
And here you go, now let’s run our application. (Note : Blend will ask you if you want to run the application on the emulator or a device, be sure emulator is selected)
That’s of course not everything you can do, we can change the Textbox, add some animation etc..
I’ll cover the animation in another post, stay tuned!
Subscribe