Oct 18

Written by:
10/18/2011 8:44 AM 

Many times you may be creating an application for Windows Phone 7 and you would like to create some oddly shaped buttons that do not conform to the standard square/rectangular shape. In this article we will take a look at how you can do this using Microsoft Expression Blend 4.0.

Let’s first create a basic Windows Phone 7 application. Start Visual Studio 2010 and go to File > New > Project.



From the subsequent dialog box, select the template type ‘Silverlight for Windows Phone’ from the left-hand side of the screen. From the right-hand side of the screen select the project template called ‘Windows Phone Application’. Create the project.



Now that the project was created, we will add a background image to the main screen. Right-click the project in the Solution Explorer on the right-hand side and select Add > Existing Item….



Choose an image that has a series of irregular shapes or download our sample image and use that in your project.



Now that the image is part of your project we can set the background of our main screen to the newly imported image. Click on the grid called "ContentPanel" and find the property in the Properties window on the right-hand side of the screen called "Background" under the category called "Brushes".



When you select the background property you need to change the brush type to a picture. So in the properties window just below the "Background" field, change the "Brush Type" to "Picture" by clicking on the icon that looks like a picture. Click on the "Select Image…" button to choose the image you recently added.





Your screen should now look like the following.




From here on we will have to use Microsoft Expression Blend to continue. Go to the "Project" menu in Microsoft Visual Studio 2010 and select "Open In Expression Blend…"



Now that you have opened the project in Expression Blend we will now define the shapes that we would like to use for our buttons. Select the Pen tool from the Toolbar on the left-hand side of the screen. The pen tool will create a polygon shape for you which we will convert to a button later on. So each time you click on the screen with the pen tool it will create a line in the polygon. Try creating a polygon for any of the shapes you have on your screen.





To close the loop on your polygon (complete the outline of the shape), click on the same point that you used to start defining the polygon.





We just defined the shape of our button now we need to give a name to our button. In the Properties window on the right-hand side enter a name for the button in the field called "Name" near to the top of the screen.



Now let us attach an event handler to the new button to capture when someone clicks on it. Click on the lightning bolt icon near to the "Name" field to attach an event handler.



Double-click on the empty area next to the event "MouseLeftButtonUp". You should be taken to the code-behind screen where we can now add code that should be performed when your button is clicked. As an example we will just display a message box with some text in it.



From within Expression Blend we can run and test our Windows Phone 7 application. Click on the "Project" menu then select "Run Project".





Now click on your polygon button.




Enjoy!