Before going to the steps need to follow for using application bar lets us know something about Application bar in windows phone.
1.Why we need an Application Bar In every application we need some menus for navigating to some specific screens or to do some common operations like save,delete update etc .so we generally use some icons which we place inside the application bar of windows phone.
2. In windows phone in the application bar we can use icons as well as we can give the menu item names. so lets start create a new project and know how application bar is working in Windows Phone 7
Following are the steps
>>First we need to create new project named it as WinPhoneAppBar
>> Add a new Item named it as Planner.xaml
>In the Planner.xaml you can see some commented code like the following
So we need to uncomment the above code.As we can see there is both icon button and menu items are already present. we can also add new icon buttons and menu items there as per our application requirement. As we are creating an Planner application we want to put some icon buttons like DailyPlaner, Monthly Planner,Weekly and yearly planner and also one page like setting.
>> Add the new items named it as DailyPlaner,Monthly Planer etc.
>> Add a new folder named it as Image in the project.Then we need to add the required images which we want to use as Icon button for our application.
>>Before adding the Images we need to follow some design guidelines.
1. Application Bar has in-built animation and rotation support. So, use it to keep consistency across all Windows Phone applications.
2. Always use an image of White color with Transparent background. If you have a different theme set for your phone, the Application Bar will colorize them accordingly.
3. Use 48 x 48 pixel icon images and the actual image content should place itself within 26 x 26 pixel.
4. You can find some sample icons with the SDK in the following directory: "%ProgramFiles%\Microsoft SDKs\Windows Phone\v7.X\Icons
\dark", where 'X' is the version number. You can use them freely in your application.
5. Never draw the circle for the icons as that is drawn by the Application Bar itself. 6. Use icons for most commonly used commands. You can place only 1 - 4 icon buttons in the panel. Hence, if you want more than 4 commands to put in the Application Bar, use the Menu item for the additional actions.
7. Don't place more than 5 menu items in the application bar. This will create a scroll bar in the UI and the user will have to scroll to click on the items.
8. Don't add more than 20 characters in the menu items, as it doesn't have support for advance Text formatting like Trimming and/or Word Wrap.
9. Remember that, as the Application bar is not a Silverlight control, you can't use data binding for text. You have to hard code the text in XAML.
10. If you want localization support for your Application bar, you have to set the text from code behind dynamically.
11. Set opacity of Application bar to '0' (zero) if you want the bar overlaid on top of the page. Set it to '1' (one) if you want the page to properly adjust itself outside the covered area of application bar.
12. Also remember that, all text items will be converted to lower case while running. So, never thought it as Bug.
>> Now we can add the required images in the image folder according to the above design guideline.
>>Now we need to use thses images in the Planner.xaml.so modify the Planner.xaml as follows
>> Now to make these iconButtons and the menuitems as working we need to add the following code to the Planner.xaml.cs
/// /// Navigating to the Planner sign screen /// /// /// private void ApplicationBarSignButton_Click(object sender, EventArgs e) { this.NavigationService.Navigate(new Uri("/PlannarSign.xaml", UriKind.Relative)); } /// /// Navigating to the Daily Planner screen /// /// /// private void ApplicationBarDailyButton_Click(object sender, EventArgs e) { this.NavigationService.Navigate(new Uri("/DailyPlannar.xaml", UriKind.Relative)); }
/// /// Nvaigating to the Weekly Plannner screen /// /// /// private void ApplicationBarWeekButton_Click(object sender, EventArgs e) { this.NavigationService.Navigate(new Uri("/WeeklyPlannar.xaml", UriKind.Relative)); }
/// /// Navigating to the Monthly Planner Screen /// /// /// private void ApplicationBarMonthButton_Click(object sender, EventArgs e) { this.NavigationService.Navigate(new Uri("/MonthlyPlannar.xaml", UriKind.Relative)); }
/// /// Application bar Yearly Planner Screen /// /// /// private void ApplicationBarYearly_Click(object sender, EventArgs e) { this.NavigationService.Navigate(new Uri("/YearlyPlannar.xaml", UriKind.Relative)); } /// /// Application bar CHar n Profile Bar Plannar Screen /// /// /// private void ApplicationBarCharnProfile_Click(object sender, EventArgs e) { this.NavigationService.Navigate(new Uri("/CharnProfile.xaml", UriKind.Relative));
}
/// /// Application bar settings Screen /// /// /// private void ApplicationBarSettings_Click(object sender, EventArgs e) { this.NavigationService.Navigate(new Uri("/Settings.xaml", UriKind.Relative));
}
** This is the way how we can use the application bar for a specific page.if we want to add the application bar to other pages we need to follow the above steps in each page.