{{ !articles[0].partner.isSponsoringArticle ? "Platinum" : "Portal" }} Partner
mobile,.net & windows,wp7

Adding ApplicationBar in Windows Phone 7 using Expression Blend

In one of my previous posts , I talked about Adding the Application Bar in Visual Studio . In this blogpost , I will explain about adding the ApplicationBar in Expression Blend .

Expression Blend provides more Designer support while Adding the Application Bar when compared to Visual Studio .

Here are the steps to add the Application Bar in the Expression Blend .

  • Go to Microsoft Expression Blend for Windows Phone
  • Click on the new Project and select the template windows phone application in the Expression Blend and provide the project name and click on Ok

  • You might see that there is no precommented xaml code like the one that was generated while creating the project in Visual Studio 2010 .
  • Select the Phone ApplicationPage in the Objects and TimeLine

  • Check the Common Properties group from the Properties Tab . You can find it in the right side of the Window .

  • You should be able to find the ApplicationBar property as well as the New Button to create the ApplicationBar ( Missing in VS2010 ) . Click the new Button to add the ApplicationBar .
  • Now , the Common propeties groub will be expanded to show more properties for the ApplicationBar like Adding the Icon Buttons and MenuItems etc .

  • Click on the Button (…) on the Buttons Property to open the popup window to enter the Icon Buttons
  • Click on the Add another item Combo and select ApplicationBarIconButton and provide the IconUri and Text for the Icon Buttons . Note the Default icons that are available are displayed in the dropdown of the IconUri . You can find more of the icons from the SDK installation path : “C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons”
  • Similarly , You can add the MenuItem from the … Button next to the MenuItems(Collection) in the Common Properties . A popup window will show up when clicked on the Button  , enter the menu name etc … and Click Ok .

  • Now , run the project , you should be able to See the added ApplicationBar with the Menu item and the Icon Button .

Thats it , the xaml code is generated automatically as we added menu items in the designer .

Easy wasn’t it ??


Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks