13
“Discover Windows Phone” development series Yasmine Abdelhady @yasabdelhady [email protected] 05. Application Bar © Yasmine Abdelhady | MEA DPE Intern
| Date post: | 18-Jan-2015 |
| Category: |
Technology |
| Upload: | yasmine-abdelhady |
| View: | 269 times |
| Download: | 1 times |
“Discover Windows Phone” development series
Yasmine Abdelhady
@yasabdelhady
05. Application Bar
© Yasmine Abdelhady | MEA DPE Intern
Agenda
What is an application bar?
Adding an application bar
Making the buttons work
Text-based menu items
Other appBar properties
appBar best practices
© Yasmine Abdelhady | MEA DPE Intern
What is an appBar?
The Application Bar in Windows Phone 8 is that set of circled icons at the bottom of an application. Here's an example of the App bar from my application, Playin.
© Yasmine Abdelhady | MEA DPE Intern
Adding the Application bar
Let’s open the project that we’ve created through out the previous post
1. Open MainPage.xaml
2. Add your application bar ( xaml code in the next slide ) at the very end of the page but before
</phone:PhoneApplicationPage>
© Yasmine Abdelhady | MEA DPE Intern
© Yasmine Abdelhady | MEA DPE Intern
The previous XAML code is an example of an application bar with two icon buttons, first one is ‘add’ and the second is ‘cancel’, and two menu items. This app bar will end up like this:
© Yasmine Abdelhady | MEA DPE Intern
Properties
When you click on one of the ApplicationBarIconButtons, check the properties tab. You'll see a simple way to set the icon and text for each one. Here's what it looks like:
If you drop down the IconUri select box, you'll see a lot of standard icons that you can use in your applications, these icons should serve most of your needs, in addition; you can always create your own icon and add it manually).
© Yasmine Abdelhady | MEA DPE Intern
Making these buttons work
AppBar buttons are like anything in your XAML file. They just need a Click event, and an event handler in the code behind.
So to do this:1. Select the 'add' button from the design view2. Go to the properties windows3. You'll find another tab for event handlers, click on it4. Change the name of the button, and double tap on the textbox that is corresponding to the event 'Click'.
© Yasmine Abdelhady | MEA DPE Intern
The result will be as follows and the project will directly take you to the event handler of the button in the code behind.
Add a MessageBox to your event so you test that it works, that’s how it’s done:
© Yasmine Abdelhady | MEA DPE Intern
What are text-based menu items?
When you run your application, you may have noticed that by clicking on the ellipsis icon (…), the application bar slides up to reveal a list of another menu options. If you used the default code from above, they still say “MenuItem 1″ and “MenuItem 2″. These work just like the IconButtons, where you can rig up event handlers for when your users click on them.
© Yasmine Abdelhady | MEA DPE Intern
Can you minimize the app bar?
Yes you can! you can have an application bar that doesn’t show any of the ApplicationBarIconButtons by default. To do this, you simply need to change the Mode property of the ApplicationBar to be “Minimized”.
© Yasmine Abdelhady | MEA DPE Intern
Other appBar properties
You can change the opacity of the appBar, expected values are between 0.0 and 1.0, from totally transparent to completely opaque respectively.
The background and the foreground colors can be changed as a property in the XAML element. Also the visibility and enabling the appBar is possible.
To know more about ApplicationBar best practices click here.
© Yasmine Abdelhady | MEA DPE Intern
Thank you
@yasabdelhady
yasabdelhady.wordpress.com
Facebook.com/yasabdelhady
© Yasmine Abdelhady | MEA DPE Intern
