Application Bar Sample

This sample demonstrates how you can test app bar properties, including opacity, color, and mode, in a plain page, a pivot page, and a panorama page.

 
 
 
 
 
4.6 Star
(5)
20,624 times
Add to favorites
3/5/2013
E-mail Twitter del.icio.us Digg Facebook
<html xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ddue="http://ddue.schemas.microsoft.com/authoring/2003/5" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
  <head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" />
    <META NAME="save" CONTENT="history" />
    <title>AppBarWP7</title>
    <style type="text/css">
 body
{
	color: #000000;
	font-family:	Verdana;
	font-size: medium;
	font-style: normal;
	font-weight: normal;
	margin-top:	0;
	margin-bottom:	0;
	margin-left:	0;
	margin-right:	0;
	width:	100%;
}
dl
{
	margin-top:	15;
	margin-bottom:5;
	padding-left:	1;
}

dl.authored dt {
	font-style:	bold;
	margin-top: 2;
}

dd {
	margin-left:	20px;
}

ul
{
	margin-top:0;
	margin-bottom:0;
	margin-left: 17;
	list-style-type: disc;
}

ul.nobullet
{
	display: block;
	list-style: none;
}

ul ul
{
	margin-bottom: 4;
	margin-left: 17;
	margin-top: 3;
	list-style-type: disc;
}

ol {
	margin-top:0;
	margin-bottom:0;
	margin-left: 28;
	list-style-type: decimal;
}

ol ol {
	margin-bottom: 4;
	margin-left: 28;
	margin-top: 3;
	list-style-type: lower-alpha;
}

li {
	margin-top: 5;
	margin-bottom: 5;
}

p {
	margin-top: 10;
	margin-bottom: 5;
}

a:link {
	color:	#0000FF;
}

a:visited {
	color: #DD7C3B;
}

a:hover {
	color:	#3366FF;
}

code
{
	font-family:	Monospace, Courier New, Courier;
	font-size: 105%;
	color:	#000066;
}

span.parameter {
	font-style: italic;
}

span.italic {
	font-style: italic;
}

span.selflink {
	font-weight: bold;
}

span.nolink {
	font-weight: bold;
}

div.breadCrumbs {
	font-size: 8pt;
	margin-bottom: 5;
	border-bottom-color: #C8CDDE;
	border-bottom-style: solid;
	border-bottom-width: 1;
	padding-bottom: 5;
}

div#mainSection
{
	font-size: 62.5%;
	width: 100%;
}
html&gt;body #mainSection
{
	font-size:73%;
	width: 100%;
}

div#mainBody
{
	font-size: 100%;
	margin-left: 15;
	margin-top: 10;
}

html&gt;body #mainBody
{
	font-size: 93%;
	margin-left: 15;
	margin-top: 10;
	padding-bottom: 20;
}

div#mainBody p, div#mainBody ol, div#mainBody ul, div#mainBody dl
{
	padding-right: 5;
}

div#header
{
	padding-top:	0;
	padding-bottom:	0;
	padding-left:	0;
	padding-right:	0;
	width:	100%;
}

div#header table
{
	width:	100%;
}

div#header table td
{
	color: #0000FF;
	font-size: 70%;
	margin-top:	0;
	margin-bottom:	0;
	padding-right: 20;
}

div#header table tr#headerTableRow2 td
{
	padding-left: 13px;
}

div#header table tr#headerTableRow3 td
{
	padding-top: 2px;
	padding-left: 15;
}

div#header table#bottomTable
{
	border-top-color: #FFFFFF;
	border-top-style: solid;
	border-top-width: 1;
	text-align: left;
	padding-left: 15;
	padding-top: 5px;
	padding-bottom: 5px;
}

div#mainSection table td.imageCell
{
	white-space: nowrap;
}

div#mainBody div.alert, div#mainBody div.code, div#mainBody div.tableSection
{
	width:98.9%;
}

div#mainBody div.section div.alert, div#mainBody div.section div.code,
div#mainBody div.section div.tableSection
{
	width:100%;
}

div#mainBody div.section ul div.alert, div#mainBody div.section ul div.code,
div#mainBody div.section ul div.tableSection, div#mainBody div.section ol div.alert, 
div#mainBody div.section ol div.code, div#mainBody div.section ol div.tableSection
{
	width:100%;
}

div.alert p, div.code p
{
	margin-top:5;
	margin-bottom:8;
}
dd p
{
	margin-top:2;
	margin-bottom:8;
}
div.tableSection p
{
	margin-top:1;
	margin-bottom:4;
}	
li p
{
	margin-top:2;
	margin-bottom:2;
}
div.seeAlsoNoToggleSection dl
{
	margin-top:8;
	margin-bottom:1;
	padding-left:1;
}
div.seeAlsoNoToggleSection dd p
{
	margin-top:2;
	margin-bottom:8;
}
div.section dl
{
	margin-top:8;
	margin-bottom:1;
	padding-left:1;
}
div.section dd p
{
	margin-top:2;
	margin-bottom:8;
}

div.code table
{
	border: 0;
	font-size: 95%;
	margin-bottom: 5;
	margin-top:-.4em;
	width: 100%
}

div.code table th
{	
	background:	#EFEFF7;
	border-bottom-color: #C8CDDE;
	border-bottom-style: solid;
	border-bottom-width: 1;
	color: #000066;
	font-weight: bold;
	padding-left: 5;
	padding-right: 5;
}

div.code table td
{
	background:	#F7F7FF;
	border-top-color: #FFFFFF;
	border-top-style: solid;
	border-top-width: 1;
	padding-left: 5;
	padding-right: 5;
	padding-top: 5;
}

span#runningHeaderText
{
	color: #8C8C8C;
	font-size: 90%;
	padding-left: 13;
}

span#nsrTitle
{
	color: #000000;
	font-size: 160%;
	font-weight: 400;
	font-family: arial;
}

div#footer
{
	font-size: 80%;
	margin-top:	0;
	margin-bottom:	0;
	margin-left:	0;
	margin-right:	0;
	padding-top:	8;
	padding-bottom:	6;
	padding-left:	1;
	padding-right:	1;
	width:	100%;
}

html&gt;body div#footer
{
	font-size: 80%;
	margin-top:	0;
	margin-bottom:	0;
	margin-left:	0;
	margin-right:	0;
	padding-top:	2;
	padding-bottom:	6;
	padding-left:	1;
	padding-right:	1;
	width:	98%;
}

div.seeAlsoNoToggleSection
{
	margin-left:0;
	padding-top:	2;
	padding-bottom:	2;
	padding-left:	0;
	padding-right:	15;
	width:	100%;
}

div.section
{
	margin-left:0;
	padding-top:	0;
	padding-bottom:	0;
	padding-left:	16;
	padding-right:	15;
	width:	100%;
}
html&gt;body div.section
{
	margin-left:0;
	padding-top:	2;
	padding-bottom:	2;
	padding-left:	16;
	padding-right:	15;
	width:	97%;
}
div.seeSection
{
	margin-left:0;
	padding-top:	0;
	padding-bottom:	2;
	padding-left:	16;
	padding-right:	15;
	width:	100%;
}

.heading
{
	font-weight:	bold;
	margin-top:		18;
	margin-bottom:	8;
}

h1.heading
{
	color: #000000;
	font-size:	130%;
}

.subHeading
{
	font-weight:	bold;
	margin-bottom:	4;
}
.procedureSubHeading
{
	font-weight: bold;
	margin-bottom: 4;
}

h3.subHeading
{
	color:  #000000;
	font-size: 120%;
    font-weight:800;
}

h3.procedureSubHeading
{
	color: #000000;
	font-size: 120%;
}

h4.subHeading
{
	color: #000000;
	font-size: 110%;
	font-weight:800;
}
span.labelheading, div.labelheading
{
	font-size:100%;
	color:#003399;
}

img.note
{
	border: 0;
	margin-right: 3;
}

div#mainSection table
{
	border: 0;
	font-size: 100%;
	width:	98.9%;
	margin-top: 5px;
	margin-bottom: 5px;
}

div#mainSection table tr
{
	vertical-align: top;
}

div#mainSection table th
{
	background-color: #EFEFF7;
	border-bottom: 1px solid #C8CDDE;
	border-left: 1px none #D5D5D3;
	color: #000066;
	padding-left: 5px;
	padding-right: 5px;
	text-align: left;
}

div#mainSection table td
{
	background-color: #F7F7FF;
	border-bottom: 1px solid #D5D5D3;
	border-left: 1px none #D5D5D3;
	padding-left: 5px;
	padding-right: 5px;
}

div#mainSection table td.imageCell
{
	white-space: nowrap;
}

div.code table
{
	border: 0;
	font-size: 95%;
	margin-bottom: 5;
	width: 100%
}

div.code table th
{	
	background:	#EFEFF7;
	border-bottom-color: #C8CDDE;
	border-bottom-style: solid;
	border-bottom-width: 1;
	color: #000066;
	font-weight: bold;
	padding-left: 5;
	padding-right: 5;
}

div.code table td
{
	background:	#F7F7FF;
	border-top-color: #FFFFFF;
	border-top-style: solid;
	border-top-width: 1;
	padding-left: 5;
	padding-right: 5;
	padding-top: 5;
}

div.alert table
{
	border: 0;
	font-size: 100%;
	width:	100%;
}

div.alert table th
{
	background:	#EFEFF7;
	border-bottom-width: 0;
	color: #000066;
	padding-left: 5;
	padding-right: 5;
}

div.alert table td
{
	background:	#F7F7FF;
	border-top-color: #FFFFFF;
	border-top-style: solid;
	border-top-width: 1;
	padding-left: 5;
	padding-right: 5;
}

div.code pre
{
	font-family:	Monospace, Courier New, Courier;
	font-size: 105%;
	color:	#000066;
	word-wrap:	break-word;
	background: #F7F7FF;
}

.tip
{
	color:	#0000FF;
	font-style: italic;
	cursor: pointer;
	text-decoration:underline;
}

.math
{
	font-family: Times New Roman;
	font-size: 125%
}

div.footerLine {
	margin: 0;
	width: 100%;
	padding-top:	8;
	padding-bottom:	6;
	/*padding-left:	5;
	padding-right:	2;*/

}

div.hr1 {
	margin: 0;
	width: 100%;
	height: 1px;
	padding: 0;
	background: #C8CDDE;
	font-size: 1px;
}

div.hr2 {
	margin: 0;
	width: 100%;
	height: 1px;
	padding: 0;
	background: #D4DFFF;
	font-size: 1px;
}

div.hr3 {
	margin: 0;
	width: 100%;
	height: 1px;
	padding: 0;
	background: #EEEEFF;
	font-size: 1px;
}

span.cs {
	display: none;
}

span.vb {
	display: none;
}

span.cpp {
	display: none;
}

span.nu {
	display: inline;
}

span.fs 
{
	display: none;
}

span.code {
	font-family:	Monospace, Courier New, Courier;
	font-size: 105%;
	color:	#000066; 
}
span.ui {
	font-weight: bold;
}
span.math {
	font-style: italic;
}
span.input {
	font-weight: bold;
}
span.term {
	font-style: italic;
}
span.label 
{
	font-weight: bold;
}
span.foreignPhrase {
	font-style: italic;
}
span.placeholder {
	font-style: italic;
}
span.keyword 
{
	font-weight: bold;
}
span.typeparameter
{
	font-style:italic;
}

div.caption
{
	font-weight: bold;
	font-size:100%;
	color:#003399;
}


div.code span.keyword 
{
	color: #871F78;
}

div.code span.parameter 
{
	font-style: italic;
}

div.code span.literal 
{
	color:#8B0000;
}

div.code span.comment 
{
	color: #006400;
}

span.syntaxLabel
{
	color:#0481DA;
	font-weight:bold;
}
span.introStyle
{
	color:DarkGray;
}

div.seeAlsoStyle
{
	padding-top:5px;

}

td.nsrBottom
{
	height: 0.6em;
	width: 100%;
}
  </style>
  </head>
  <body>
    <div id="header">
      <table id="bottomTable" cellpadding="0" cellspacing="0">
        <tr id="headerTableRow1">
          <td align="left">
            <span id="runningHeaderText" />
          </td>
        </tr>
        <tr id="headerTableRow2">
          <td align="left">
            <span id="nsrTitle">AppBarWP7</span>
          </td>
        </tr>
        <tr id="headerTableRow3">
          <td align="left" />
        </tr>
      </table>
      <table id="gradientTable">
        <tr>
          <td class="nsrBottom" background="../icons/gradient.gif" />
        </tr>
      </table>
    </div>
    <div id="mainSection">
      <div id="mainBody">
        <font color="DarkGray"></font>
        <p /> <div class="summary"><p>This sample demonstrates how you can test app bar properties, including opacity, color, and mode, in a plain page, a pivot page, and a panorama page.</p></div><div class="introduction"><p>This sample enables you to test the different app bar properties, such as opacity, color, and mode. As you click the user interface, changes are made to the app bar dynamically, so that you can see how the different properties work and how they interact with each other. This sample contains app bar code for a plain page, a pivot page, and a panorama page. For more information, see <a href="http://go.microsoft.com/fwlink/?LinkId=226296">App bar for Windows Phone</a>.</p><p>To run this sample, you must have Windows Phone SDK 7.1 installed. To get started, go to the <a href="http://go.microsoft.com/fwlink/?LinkID=259204">Windows Phone Dev Center</a>.</p><h3 class="procedureSubHeading">To run the sample</h3><div class="subSection"><ol><li><p>Double-click sdkAppBar.sln to open the solution.</p></li><li><p>On the <span class="ui">Build</span> menu (or the <span class="ui">Debug</span> menu in Visual Studio 2010 Express for Windows Phone), click <span class="ui">Build Solution</span>. (Ctrl+Shift+B)</p></li><li><p>On the <span class="ui">Debug</span> menu, click <span class="ui">Start Debugging</span>. (F5)</p></li><li><p>Click the link for the page type you are interested in.</p></li><li><p>Experiment with the different properties by clicking the radio buttons. Some properties are easier to test together. For example, it is easier to test the opacity property with the background property set to <span class="ui">accent</span>.</p></li><li><p>Test the icon buttons by clicking each one and confirming that the message box appears.</p></li><li><p>Test the menu items by clicking each one and confirming that the message box appears.</p></li><li><p>On the <span class="ui">Debug</span> menu, click <span class="ui">Stop Debugging</span>. (F5)</p></li></ol></div><div class="alert"><table width="100%" cellspacing="0" cellpadding="0"><tr><th align="left"><b>Note:</b></th></tr><tr><td><p>This sample is packaged as a Windows Phone 7.5 project. It can be converted to a Windows Phone 8 project, by changing the target Windows Phone OS version of the project. To create a Windows Phone 8 project, you must be running the Windows Phone SDK 8.0 on Visual Studio 2012. You can download the latest version of the SDK from <a href="http://dev.windowsphone.com/downloadsdk">http://dev.windowsphone.com/downloadsdk</a>.</p><p>To convert the sample to a Windows Phone 8 project:</p><ol><li><p>Double-click the <span class="ui">.sln</span> file to open the solution in Visual Studio.</p></li><li><p>Right-click the project in the <span class="ui">Solution Explorer</span> and select <span class="ui">Properties</span>. This opens the <span class="ui">Project Properties</span> window.</p></li><li><p>In the <span class="ui">Application</span> tab of the Project Properties window, select <span class="ui">Windows Phone OS 8.0</span> from the <span class="ui">Target Windows Phone OS Version</span> dropdown. A dialog will appear asking if you want to upgrade this project to Windows Phone OS 8.0.</p></li><li><p>Select <span class="ui">Yes</span> to upgrade the project.</p></li></ol></td></tr></table></div></div></div>
      <div id="footer">
        <div class="footerLine" />
      </div>
      <p />
    </div>
  </body>
</html>