SlideShare a Scribd company logo
“Discover Windows Phone”
development series
05. Application Bar
Yasmine Abdelhady
@yasabdelhady
Yasmine.Abdelhady@Hotmail.com

© Yasmine Abdelhady | MEA DPE Intern
 What is an application bar?

 Adding an application bar
 Making the buttons work

Agenda

 Text-based menu items
 Other appBar properties
 appBar best practices

© Yasmine Abdelhady | MEA DPE Intern
What is an
appBar?

© Yasmine Abdelhady | MEA DPE Intern

 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.
 Let’s open the project that we’ve created through out the previous
post

Adding the
Application bar

 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
 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:

Properties

© Yasmine Abdelhady | MEA DPE Intern

 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).
 AppBar buttons are like anything in your XAML file. They just need
a Click event, and an event handler in the code behind.

Making these
buttons work

© Yasmine Abdelhady | MEA DPE Intern

 So to do this:
1. Select the 'add' button from the design view
2. Go to the properties windows
3. You'll find another tab for event handlers, click on it
4. Change the name of the button, and double tap on the textbox
that is corresponding to the event 'Click'.
 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 textbased menu
items?

© Yasmine Abdelhady | MEA DPE Intern

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.
Can you
minimize the
app bar?

© Yasmine Abdelhady | MEA DPE Intern

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”.
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
@yasabdelhady

yasmine.Abdelhady@Hotmail.com

Thank you 
yasabdelhady.wordpress.com

Facebook.com/yasabdelhady

© Yasmine Abdelhady | MEA DPE Intern

More Related Content

What's hot

Android app development guide for freshers by ace web academy
Android app development guide for freshers  by ace web academyAndroid app development guide for freshers  by ace web academy
Android app development guide for freshers by ace web academy
Ace Web Academy -Career Development Center
 
Exploring iTools
Exploring iToolsExploring iTools
Exploring iTools
www.netgains.org
 
Wordpress Integration Tutorial
Wordpress Integration TutorialWordpress Integration Tutorial
Wordpress Integration Tutorial
PuttiApps
 
AIDAHelp - App Basic Info
AIDAHelp - App Basic InfoAIDAHelp - App Basic Info
AIDAHelp - App Basic Info
AIDAIO
 
Sharepoint mobile version v2
Sharepoint mobile version v2Sharepoint mobile version v2
Sharepoint mobile version v2
MJ Ferdous
 
iPhone first App Store submission
iPhone  first App Store submissioniPhone  first App Store submission
iPhone first App Store submission
Pragati Singh
 
Introduction to iPad 2016
Introduction to iPad 2016Introduction to iPad 2016
AIDAHelp - Getting Started
AIDAHelp - Getting StartedAIDAHelp - Getting Started
AIDAHelp - Getting Started
AIDAIO
 
Introduction to iPad Applications
Introduction to iPad Applications Introduction to iPad Applications
Introduction to iPad Applications
Social Development Centre Waterloo Region
 
How to make an iPhone app
How to make an iPhone appHow to make an iPhone app
How to make an iPhone app
VCube Works
 
AIDAHelp - Upload App Icon
AIDAHelp - Upload App IconAIDAHelp - Upload App Icon
AIDAHelp - Upload App Icon
AIDAIO
 
Transforming Power Point Show with VBA
Transforming Power Point Show with VBATransforming Power Point Show with VBA
Transforming Power Point Show with VBA
DCPS
 
Building accessible web components without tears
Building accessible web components without tearsBuilding accessible web components without tears
Building accessible web components without tears
Russ Weakley
 
Build your first android mobile app
Build your first android mobile appBuild your first android mobile app
Build your first android mobile app
ekipaco
 
iPad Basic Training
iPad Basic TrainingiPad Basic Training
iPad Basic Training
alphakilo31
 
05 wp7 launchers and choosers
05 wp7   launchers and choosers05 wp7   launchers and choosers
05 wp7 launchers and choosers
Tao Wang
 
How to design and build great apps (with moderator notes)
How to design and build great apps (with moderator notes)How to design and build great apps (with moderator notes)
How to design and build great apps (with moderator notes)
Andreas Weder
 
iOS 11 - The Reinvented App Store
iOS 11 - The Reinvented App StoreiOS 11 - The Reinvented App Store
iOS 11 - The Reinvented App Store
Lior Eldan
 
How to design and build great apps
How to design and build great appsHow to design and build great apps
How to design and build great apps
Magnolia
 
Create New Android Layout
Create New Android LayoutCreate New Android Layout
Create New Android Layout
Transpose Solutions Inc
 

What's hot (20)

Android app development guide for freshers by ace web academy
Android app development guide for freshers  by ace web academyAndroid app development guide for freshers  by ace web academy
Android app development guide for freshers by ace web academy
 
Exploring iTools
Exploring iToolsExploring iTools
Exploring iTools
 
Wordpress Integration Tutorial
Wordpress Integration TutorialWordpress Integration Tutorial
Wordpress Integration Tutorial
 
AIDAHelp - App Basic Info
AIDAHelp - App Basic InfoAIDAHelp - App Basic Info
AIDAHelp - App Basic Info
 
Sharepoint mobile version v2
Sharepoint mobile version v2Sharepoint mobile version v2
Sharepoint mobile version v2
 
iPhone first App Store submission
iPhone  first App Store submissioniPhone  first App Store submission
iPhone first App Store submission
 
Introduction to iPad 2016
Introduction to iPad 2016Introduction to iPad 2016
Introduction to iPad 2016
 
AIDAHelp - Getting Started
AIDAHelp - Getting StartedAIDAHelp - Getting Started
AIDAHelp - Getting Started
 
Introduction to iPad Applications
Introduction to iPad Applications Introduction to iPad Applications
Introduction to iPad Applications
 
How to make an iPhone app
How to make an iPhone appHow to make an iPhone app
How to make an iPhone app
 
AIDAHelp - Upload App Icon
AIDAHelp - Upload App IconAIDAHelp - Upload App Icon
AIDAHelp - Upload App Icon
 
Transforming Power Point Show with VBA
Transforming Power Point Show with VBATransforming Power Point Show with VBA
Transforming Power Point Show with VBA
 
Building accessible web components without tears
Building accessible web components without tearsBuilding accessible web components without tears
Building accessible web components without tears
 
Build your first android mobile app
Build your first android mobile appBuild your first android mobile app
Build your first android mobile app
 
iPad Basic Training
iPad Basic TrainingiPad Basic Training
iPad Basic Training
 
05 wp7 launchers and choosers
05 wp7   launchers and choosers05 wp7   launchers and choosers
05 wp7 launchers and choosers
 
How to design and build great apps (with moderator notes)
How to design and build great apps (with moderator notes)How to design and build great apps (with moderator notes)
How to design and build great apps (with moderator notes)
 
iOS 11 - The Reinvented App Store
iOS 11 - The Reinvented App StoreiOS 11 - The Reinvented App Store
iOS 11 - The Reinvented App Store
 
How to design and build great apps
How to design and build great appsHow to design and build great apps
How to design and build great apps
 
Create New Android Layout
Create New Android LayoutCreate New Android Layout
Create New Android Layout
 

Similar to "Discover windows phone" 05. Application Bar

Software engineering modeling lab lectures
Software engineering modeling lab lecturesSoftware engineering modeling lab lectures
Software engineering modeling lab lectures
marwaeng
 
I have adream
I have adreamI have adream
I have adream
ANASZ123
 
I have adream
I have adreamI have adream
I have adream
Kathryn Evans
 
Introduction
IntroductionIntroduction
hopTo Work Step by Step Test Drive
hopTo Work Step by Step Test DrivehopTo Work Step by Step Test Drive
hopTo Work Step by Step Test Drive
hopTo
 
App creation guide
App creation guideApp creation guide
App creation guide
3D Issue
 
Using android's action bar
Using android's action barUsing android's action bar
Using android's action bar
Danilo Freitas de Souza
 
Appy builder beginner tutorial
Appy builder beginner tutorialAppy builder beginner tutorial
Appy builder beginner tutorial
HabibulHakam
 
Build Low Fidelity Wireframes
Build Low Fidelity WireframesBuild Low Fidelity Wireframes
Build Low Fidelity Wireframes
SV.CO
 
Ios actions and outlets
Ios actions and outletsIos actions and outlets
Ios actions and outlets
veeracynixit
 
Ios actions and outlets
Ios actions and outletsIos actions and outlets
Ios actions and outlets
veeracynixit
 
Windows 8 app bar and live tiles
Windows 8 app bar and live tilesWindows 8 app bar and live tiles
Windows 8 app bar and live tiles
Amr Abulnaga
 
How to build your own Android App -Step by Step Guide
How to build your own Android App -Step by Step GuideHow to build your own Android App -Step by Step Guide
How to build your own Android App -Step by Step Guide
Ace Web Academy -Career Development Center
 
PERTEMUAN 3_INTRO TO ANDROID APP DEV.pdf
PERTEMUAN 3_INTRO TO ANDROID APP DEV.pdfPERTEMUAN 3_INTRO TO ANDROID APP DEV.pdf
PERTEMUAN 3_INTRO TO ANDROID APP DEV.pdf
arfa442827
 
App inventor week4(technovation)
App inventor week4(technovation)App inventor week4(technovation)
App inventor week4(technovation)
than sare
 
Visual basic
Visual basic Visual basic
Visual basic
Shabista Imam
 
Tat learning applications en
Tat learning applications enTat learning applications en
Tat learning applications en
Toni Setyawan
 
Introduction to programming using Visual Basic 6
Introduction to programming using Visual Basic 6Introduction to programming using Visual Basic 6
Introduction to programming using Visual Basic 6
Jeanie Arnoco
 
"Discover windows phone" 02. page navigation
"Discover windows phone"   02. page navigation"Discover windows phone"   02. page navigation
"Discover windows phone" 02. page navigation
Yasmine Abdelhady
 
Talk tomepart1 2perpage
Talk tomepart1 2perpageTalk tomepart1 2perpage
Talk tomepart1 2perpage
Silvio Cazella
 

Similar to "Discover windows phone" 05. Application Bar (20)

Software engineering modeling lab lectures
Software engineering modeling lab lecturesSoftware engineering modeling lab lectures
Software engineering modeling lab lectures
 
I have adream
I have adreamI have adream
I have adream
 
I have adream
I have adreamI have adream
I have adream
 
Introduction
IntroductionIntroduction
Introduction
 
hopTo Work Step by Step Test Drive
hopTo Work Step by Step Test DrivehopTo Work Step by Step Test Drive
hopTo Work Step by Step Test Drive
 
App creation guide
App creation guideApp creation guide
App creation guide
 
Using android's action bar
Using android's action barUsing android's action bar
Using android's action bar
 
Appy builder beginner tutorial
Appy builder beginner tutorialAppy builder beginner tutorial
Appy builder beginner tutorial
 
Build Low Fidelity Wireframes
Build Low Fidelity WireframesBuild Low Fidelity Wireframes
Build Low Fidelity Wireframes
 
Ios actions and outlets
Ios actions and outletsIos actions and outlets
Ios actions and outlets
 
Ios actions and outlets
Ios actions and outletsIos actions and outlets
Ios actions and outlets
 
Windows 8 app bar and live tiles
Windows 8 app bar and live tilesWindows 8 app bar and live tiles
Windows 8 app bar and live tiles
 
How to build your own Android App -Step by Step Guide
How to build your own Android App -Step by Step GuideHow to build your own Android App -Step by Step Guide
How to build your own Android App -Step by Step Guide
 
PERTEMUAN 3_INTRO TO ANDROID APP DEV.pdf
PERTEMUAN 3_INTRO TO ANDROID APP DEV.pdfPERTEMUAN 3_INTRO TO ANDROID APP DEV.pdf
PERTEMUAN 3_INTRO TO ANDROID APP DEV.pdf
 
App inventor week4(technovation)
App inventor week4(technovation)App inventor week4(technovation)
App inventor week4(technovation)
 
Visual basic
Visual basic Visual basic
Visual basic
 
Tat learning applications en
Tat learning applications enTat learning applications en
Tat learning applications en
 
Introduction to programming using Visual Basic 6
Introduction to programming using Visual Basic 6Introduction to programming using Visual Basic 6
Introduction to programming using Visual Basic 6
 
"Discover windows phone" 02. page navigation
"Discover windows phone"   02. page navigation"Discover windows phone"   02. page navigation
"Discover windows phone" 02. page navigation
 
Talk tomepart1 2perpage
Talk tomepart1 2perpageTalk tomepart1 2perpage
Talk tomepart1 2perpage
 

Recently uploaded

Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
christinelarrosa
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
Vadym Kazulkin
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
ScyllaDB
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
christinelarrosa
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 

Recently uploaded (20)

Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 

"Discover windows phone" 05. Application Bar

  • 1. “Discover Windows Phone” development series 05. Application Bar Yasmine Abdelhady @yasabdelhady Yasmine.Abdelhady@Hotmail.com © Yasmine Abdelhady | MEA DPE Intern
  • 2.  What is an application bar?  Adding an application bar  Making the buttons work Agenda  Text-based menu items  Other appBar properties  appBar best practices © Yasmine Abdelhady | MEA DPE Intern
  • 3. What is an appBar? © Yasmine Abdelhady | MEA DPE Intern  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.
  • 4.  Let’s open the project that we’ve created through out the previous post Adding the Application bar  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
  • 5. © Yasmine Abdelhady | MEA DPE Intern
  • 6.  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
  • 7.  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: Properties © Yasmine Abdelhady | MEA DPE Intern  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).
  • 8.  AppBar buttons are like anything in your XAML file. They just need a Click event, and an event handler in the code behind. Making these buttons work © Yasmine Abdelhady | MEA DPE Intern  So to do this: 1. Select the 'add' button from the design view 2. Go to the properties windows 3. You'll find another tab for event handlers, click on it 4. Change the name of the button, and double tap on the textbox that is corresponding to the event 'Click'.
  • 9.  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
  • 10. What are textbased menu items? © Yasmine Abdelhady | MEA DPE Intern 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.
  • 11. Can you minimize the app bar? © Yasmine Abdelhady | MEA DPE Intern 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”.
  • 12. 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