{"id":663,"date":"2011-03-04T00:31:00","date_gmt":"2011-03-04T00:31:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vbteam\/2011\/03\/04\/visual-basic-windows-phone-7-series-6-how-to-create-an-application-bar-for-windows-phone-7\/"},"modified":"2024-07-05T12:40:21","modified_gmt":"2024-07-05T19:40:21","slug":"visual-basic-windows-phone-7-series-6-how-to-create-an-application-bar-for-windows-phone-7","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/vbteam\/visual-basic-windows-phone-7-series-6-how-to-create-an-application-bar-for-windows-phone-7\/","title":{"rendered":"Visual Basic Windows Phone 7 Series #6. How to create an application bar for Windows Phone 7"},"content":{"rendered":"<p><span style=\"font-size: small\">In our <a href=\"http:\/\/blogs.msdn.com\/b\/vbteam\/archive\/2011\/03\/02\/visual-basic-windows-phone-7-series-how-to-create-a-custom-tilt-effect-application-for-windows-phone-7.aspx\">last post<\/a>, I explained how to create a control tilt effect application for Windows Phone 7. In this blog post, I want to share a sample that will help you to create an application bar for Windows Phone 7. This application will allow you to add the menu functionality. It also will allow you to adjust the visibility and opacity of the application bar.<\/span><\/p>\n<p><span style=\"font-size: small\">I will now demonstrate how easy it is to create an application bar for Windows Phone 7, using Visual Basic for Windows Phone Developer Tools. The application bar can be created in 4 simple steps as follows:<\/span><\/p>\n<ol>\n<li><span style=\"font-size: small\">Create a sample application and add controls<\/span><\/li>\n<li><span style=\"font-size: small\">Add event handlers<\/span><\/li>\n<li><span style=\"font-size: small\">Build and debug the application<\/span><\/li>\n<li><span style=\"font-size: small\">Rebuild in the release mode for publishing<\/span><\/li>\n<\/ol>\n<p><span style=\"font-size: small\"><i>Prerequisites:<\/i><\/span><\/p>\n<ul>\n<\/ul>\n<ul>\n<\/ul>\n<ul>\n<\/ul>\n<ul>\n<li><span style=\"font-size: small\"><i>Visual Studio 2010 Professional, Premium,\nor Ultimate. If you do not have any of the releases, you can download any of\nthe following trial versions as per your preference: <\/i><a href=\"http:\/\/www.microsoft.com\/downloads\/en\/details.aspx?FamilyID=26bae65f-b0df-4081-ae6e-1d828993d4d0&amp;displaylang=en\"><i>Professional<\/i><\/a><i>, <\/i><a href=\"http:\/\/www.microsoft.com\/downloads\/en\/details.aspx?FamilyID=7038e207-329c-4006-b620-16d1af1c42c1&amp;displaylang=en\"><i>Premium<\/i><\/a><i>, or <\/i><a href=\"http:\/\/www.microsoft.com\/downloads\/en\/details.aspx?FamilyID=e2a1a098-995e-4468-816d-7fdbe0a64f38&amp;displaylang=en\"><i>Ultimate<\/i><\/a><i>.<\/i><\/span><\/li>\n<li><span style=\"font-size: small\"><a href=\"http:\/\/www.microsoft.com\/downloads\/en\/details.aspx?FamilyID=04704acf-a63a-4f97-952c-8b51b34b00ce&amp;displaylang=en\"><i>Windows Phone Developer Tools\nRTW<\/i><\/a><\/span><\/li>\n<li><span style=\"font-size: small\"><a href=\"http:\/\/www.microsoft.com\/downloads\/en\/details.aspx?FamilyID=4e97ea70-e479-4c05-814f-639d71690e5d&amp;displaylang=en\"><i>Visual Basic\nfor Windows Phone Developer Tools &#8211; RTW<br \/><\/i><\/a><em>&nbsp;<\/em><\/span><span style=\"font-size: small\"><em>Note: You can install the newer version- <\/em><em><a href=\"http:\/\/www.microsoft.com\/downloads\/en\/details.aspx?FamilyID=77586864-ab15-40e1-bc38-713a95a56a05&amp;displaylang=en\">Windows Phone Developer Tools 7.1 Beta<\/a>\n instead of the above mentioned two tools as it will take comparatively\nless time. However, this sample was created using the previous version.<\/em><\/span><\/li>\n<\/ul>\n<ul>\n<\/ul>\n<ul>\n<\/ul>\n<p><span style=\"font-size: small\">To create the application bar, let&rsquo;s follow the 4 simple steps mentioned earlier:<\/span><\/p>\n<h3><b>Step 1 &#8211;<\/b><b> <\/b><b>Create a sample application and add controls<\/b><\/h3>\n<h4><b>Create a sample application<\/b><\/h4>\n<ol>\n<li><span style=\"font-size: small\">Create a new project and browse to the &ldquo;Silverlight for Windows Phone&rdquo; node. <\/span><\/li>\n<li><span style=\"font-size: small\">Select the &ldquo;Windows Phone Application&rdquo; template. <\/span><\/li>\n<li><span style=\"font-size: small\">Enter a name for the application.<br \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2011\/03\/2870.Select_App.bmp\" border=\"0\" \/><\/span><\/li>\n<li><span style=\"font-size: small\">Click OK. The MainPage.xaml page is displayed.<br \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2011\/03\/7041.Init_App.bmp\" border=\"0\" \/><\/span><\/li>\n<\/ol>\n<h4><b>Add controls<\/b><\/h4>\n<ol>\n<li><span style=\"font-size: small\">Click the MY APPLICATION text. In the Properties window, change the text property to &ldquo;APPLICATION BAR SAMPLE&rdquo;.<\/span><\/li>\n<li><span style=\"font-size: small\">Click the page name text. In the Properties window, change the text property to &ldquo;application bar&rdquo;.<\/span><\/li>\n<li><span style=\"font-size: small\">In Solution Explorer, right-click the application name and add a new folder.<\/span><\/li>\n<li><span style=\"font-size: small\">Rename the new folder as &ldquo;Images&rdquo;, and add the required icon images to the folder. <\/span><\/li>\n<li><span style=\"font-size: small\">To create buttons, add the following XAML code:\n<div id=\"codeSnippetWrapper\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;margin: 20px 0px 10px;width: 94.95%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 136px;max-height: 200px;font-size: 8pt;overflow: auto;cursor: text;border: silver 1px solid;padding: 4px\">\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Path<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Data<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;M0,30 l30,-30 30,30 -15,0 0,100 -30,0 0,-100 z&#8221;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> <span style=\"color: red\">StrokeThickness<\/span><span style=\"color: blue\">=&#8221;2&#8243;<\/span><span style=\"color: red\"> VerticalAlignment<\/span><span style=\"color: blue\">=&#8221;Top&#8221;<\/span><span style=\"color: red\"> UseLayoutRounding<\/span><span style=\"color: blue\">=&#8221;False&#8221;<\/span><span style=\"color: red\"> Margin<\/span><span style=\"color: blue\">=&#8221;50,0,0,0&#8243;<\/span><span style=\"color: red\"> RenderTransformOrigin<\/span><span style=\"color: blue\">=&#8221;0.5,0.5&#8243;<\/span><span style=\"color: red\"> HorizontalAlignment<\/span><span style=\"color: blue\">=&#8221;Left&#8221;<\/span><span>&nbsp;<\/span><span style=\"color: red\">Fill<\/span><span style=\"color: blue\">=&#8221;{<\/span><span style=\"color: #a31515\">StaticResource<\/span><span style=\"color: red\"> Gradient<\/span><span style=\"color: blue\">}&#8221;\/&gt;<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Path<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Data<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;M0,30 l30,-30 30,30 -15,0 0,100 -30,0 0,-100 z&#8221;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> <span style=\"color: red\">StrokeThickness<\/span><span style=\"color: blue\">=&#8221;2&#8243;<\/span><span style=\"color: red\"> VerticalAlignment<\/span><span style=\"color: blue\">=&#8221;Top&#8221;<\/span><span style=\"color: red\"> UseLayoutRounding<\/span><span style=\"color: blue\">=&#8221;False&#8221;<\/span> <span style=\"color: red\">Margin<\/span><span style=\"color: blue\">=&#8221;00,0,50,0&#8243;<\/span><span style=\"color: red\"> RenderTransformOrigin<\/span><span style=\"color: blue\">=&#8221;0.5,0.5&#8243;<\/span><span style=\"color: red\"> HorizontalAlignment<\/span><span style=\"color: blue\">=&#8221;Right&#8221;<\/span><span style=\"color: red\"><span>&nbsp;<\/span>Fill<\/span><span style=\"color: blue\">=&#8221;{<\/span><span style=\"color: #a31515\">StaticResource<\/span><span style=\"color: red\"> Gradient<\/span><span style=\"color: blue\">}&#8221;\/&gt;<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Path<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Data<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;M0,30 l30,-30 30,30 -15,0 0,100 -30,0 0,-100 z&#8221;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> <span style=\"color: red\">StrokeThickness<\/span><span style=\"color: blue\">=&#8221;2&#8243;<\/span><span style=\"color: red\"> VerticalAlignment<\/span><span style=\"color: blue\">=&#8221;Bottom&#8221;<\/span><span style=\"color: red\"> UseLayoutRounding<\/span><span style=\"color: blue\">=&#8221;False&#8221;<\/span> <span style=\"color: red\">Margin<\/span><span style=\"color: blue\">=&#8221;50,0,0,0&#8243;<\/span><span style=\"color: red\"> RenderTransformOrigin<\/span><span style=\"color: blue\">=&#8221;0.5,0.5&#8243;<\/span><span style=\"color: red\"> HorizontalAlignment<\/span><span style=\"color: blue\">=&#8221;Left&#8221;<\/span><span>&nbsp;<\/span><span style=\"color: red\">Fill<\/span><span style=\"color: blue\">=&#8221;{<\/span><span style=\"color: #a31515\">StaticResource<\/span><span style=\"color: red\"> Gradient<\/span><span style=\"color: blue\">}&#8221;<\/span><span style=\"color: red\"> RenderTransform<\/span><span style=\"color: blue\">=&#8221;{<\/span><span style=\"color: #a31515\">StaticResource<\/span><span style=\"color: red\"> UpsideDown<\/span><span style=\"color: blue\">}&#8221;\/&gt;<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Path<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Data<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;M0,30 l30,-30 30,30 -15,0 0,100 -30,0 0,-100 z&#8221;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> <span style=\"color: red\">StrokeThickness<\/span><span style=\"color: blue\">=&#8221;2&#8243;<\/span><span style=\"color: red\"> VerticalAlignment<\/span><span style=\"color: blue\">=&#8221;Bottom&#8221;<\/span><span style=\"color: red\"> UseLayoutRounding<\/span><span style=\"color: blue\">=&#8221;False&#8221;<\/span> <span style=\"color: red\">Margin<\/span><span style=\"color: blue\">=&#8221;0,0,50,0&#8243;<\/span><span style=\"color: red\"> RenderTransformOrigin<\/span><span style=\"color: blue\">=&#8221;0.5,0.5&#8243;<\/span><span style=\"color: red\"> HorizontalAlignment<\/span><span style=\"color: blue\">=&#8221;Right&#8221;<\/span><span style=\"color: red\"><span>&nbsp;<\/span>Fill<\/span><span style=\"color: blue\">=&#8221;{<\/span><span style=\"color: #a31515\">StaticResource<\/span><span style=\"color: red\"> Gradient<\/span><span style=\"color: blue\">}&#8221;<\/span><span style=\"color: red\"> RenderTransform<\/span><span style=\"color: blue\">=&#8221;{<\/span><span style=\"color: #a31515\">StaticResource<\/span><span style=\"color: red\"> UpsideDown<\/span><span style=\"color: blue\">}&#8221;\/&gt;<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Canvas<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Height<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;349&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> HorizontalAlignment<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Center&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Margin<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;50,214,50,237&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;canvas1&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> VerticalAlignment<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Center&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Width<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;380&#8243;&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span><\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">TextBlock<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Left<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;14&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Top<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;10&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Height<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;39&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;VisibleLabel&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Text<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;application bar visible&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Style<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;{<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">StaticResource<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> PhoneTextNormalStyle<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">}&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Width<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;250&#8243; \/&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span><\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">TextBlock<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Left<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;277&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Top<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;10&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Height<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;28&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;VisibleTextBlock&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Text<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;yes&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Style<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;{<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">StaticResource<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> PhoneTextNormalStyle<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">}&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Width<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;79&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Foreground<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;{<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">StaticResource<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> PhoneAccentBrush<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">}&#8221; \/&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span><\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">TextBlock<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Left<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;14&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Top<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;60&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Height<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;39&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;OpacityLabel&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Style<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;{<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">StaticResource<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> PhoneTextNormalStyle<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">}&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Text<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;application bar opacity&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Width<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;250&#8243; \/&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span><\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">TextBlock<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Left<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;277&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Top<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;60&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Height<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;28&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;OpacityTextBlock&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Text<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;1.0&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Style<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;{<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">StaticResource<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> PhoneTextNormalStyle<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">}&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Width<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;79&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Foreground<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;{<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">StaticResource<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> PhoneAccentBrush<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">}&#8221; \/&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span><\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">TextBlock<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Left<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;14&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Top<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;110&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Height<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;39&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;MenuEnabledLabel&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Style<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;{<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">StaticResource<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> PhoneTextNormalStyle<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">}&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Text<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;menu enabled&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Width<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;250&#8243; \/&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span><\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">TextBlock<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Left<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;277&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Top<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;110&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Height<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;28&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;MenuEnabledTextBlock&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Text<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;yes&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Style<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;{<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">StaticResource<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> PhoneTextNormalStyle<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">}&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Width<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;79&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Foreground<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;{<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">StaticResource<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> PhoneAccentBrush<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">}&#8221; \/&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp; <\/span><\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Button<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Left<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;14&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Canvas.Top<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;260&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Content<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;show application bar&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Height<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;71&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Name<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;showButton&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Width<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;342&#8243;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Click<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;showButton_Click&#8221;<\/span><span style=\"font-family: 'Courier New';color: red;font-size: 8.5pt\"> Visibility<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">=&#8221;Collapsed&#8221;\/&gt;<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&lt;\/<\/span><span style=\"font-family: 'Courier New';color: #a31515;font-size: 8.5pt\">Canvas<\/span><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">&gt;<\/span><\/p>\n<\/div>\n<p><\/span><\/li>\n<\/ol>\n<p><span style=\"font-size: small\">Your application now looks like this:<br \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2011\/03\/5430.App_.bmp\" border=\"0\" \/><\/span><\/p>\n<h3><b>Step 2 &#8211; Add event handlers<\/b><\/h3>\n<p><span style=\"font-size: small\">Adding event handlers is one of the important tasks. To add the event handlers:<\/span><\/p>\n<ol>\n<li><span style=\"font-size: small\">Open the MainPage.xaml.vb page. <\/span><\/li>\n<li><span style=\"font-size: small\">To initialize a new instance of the ApplicationBar property, add the following code:\n<div id=\"codeSnippetWrapper\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;margin: 20px 0px 10px;width: 94.97%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 27px;max-height: 200px;font-size: 8pt;overflow: auto;cursor: text;border: silver 1px solid;padding: 4px\">\n<div id=\"codeSnippet\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;width: 99.33%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 21px;color: black;font-size: 9pt;overflow: visible;border-style: none;padding: 0px\">\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">ApplicationBar = <span style=\"color: blue\">New<\/span> <span style=\"color: #2b91af\">ApplicationBar<\/span>()<\/span><\/p>\n<\/div>\n<\/div>\n<p><\/span><\/li>\n<li><span style=\"font-size: small\">To enable the menu and make the application bar visible, add the following code:\n<div id=\"codeSnippetWrapper\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;margin: 20px 0px 10px;width: 94.95%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 40px;max-height: 200px;font-size: 8pt;overflow: auto;cursor: text;border: silver 1px solid;padding: 4px\">\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">ApplicationBar.IsMenuEnabled = <span style=\"color: blue\">True<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">ApplicationBar.IsVisible = <span style=\"color: blue\">True<\/span><\/span><\/p>\n<\/div>\n<p><\/span><\/li>\n<li><span style=\"font-size: small\">To create event handlers for the icon button&rsquo;s click event, add the following code:\n<div id=\"codeSnippetWrapper\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;margin: 20px 0px 10px;width: 95.02%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 136px;max-height: 200px;font-size: 8pt;overflow: auto;cursor: text;border: silver 1px solid;padding: 4px\">\n<div id=\"codeSnippet\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;width: 127.94%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 27px;color: black;font-size: 9pt;overflow: visible;border-style: none;padding: 0px\">\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">Dim<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> hide <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">New<\/span> <span style=\"color: #2b91af\">ApplicationBarIconButton<\/span>(<span style=\"color: blue\">New<\/span> <span style=\"color: #2b91af\">Uri<\/span>(<span style=\"color: #a31515\">&#8220;\/Images\/expand.png&#8221;<\/span>, <span style=\"color: #2b91af\">UriKind<\/span>.Relative))<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">hide.Text = <span style=\"color: #a31515\">&#8220;hide&#8221;<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">AddHandler<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> hide.Click, <span style=\"color: blue\">AddressOf<\/span> hide_Click<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">&nbsp;<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">Dim<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> opacity <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">New<\/span> <span style=\"color: #2b91af\">ApplicationBarIconButton<\/span>(<span style=\"color: blue\">New<\/span> <span style=\"color: #2b91af\">Uri<\/span>(<span style=\"color: #a31515\">&#8220;\/Images\/opacity.png&#8221;<\/span>,<span style=\"color: #2b91af\">UriKind<\/span>.Relative))<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">opacity.Text = <span style=\"color: #a31515\">&#8220;opacity&#8221;<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">AddHandler<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> opacity.Click, <span style=\"color: blue\">AddressOf<\/span> opacity_Click<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">&nbsp;<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">Dim<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> enabled <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">New<\/span> <span style=\"color: #2b91af\">ApplicationBarIconButton<\/span>(<span style=\"color: blue\">New<\/span> <span style=\"color: #2b91af\">Uri<\/span>(<span style=\"color: #a31515\">&#8220;\/Images\/menuenabled.png&#8221;<\/span>,<span style=\"color: #2b91af\">UriKind<\/span>.Relative))<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">enabled.Text = <span style=\"color: #a31515\">&#8220;enabled&#8221;<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">AddHandler<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> enabled.Click, <span style=\"color: blue\">AddressOf<\/span> enabled_Click<\/span><\/p>\n<\/div>\n<\/div>\n<p><\/span><\/li>\n<li><span style=\"font-size: small\">To add the icon buttons, add the following code:\n<div id=\"codeSnippetWrapper\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;margin: 20px 0px 10px;width: 95.12%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 53px;max-height: 200px;font-size: 8pt;overflow: auto;cursor: text;border: silver 1px solid;padding: 4px\">\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">ApplicationBar.Buttons.Add(hide)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">ApplicationBar.Buttons.Add(opacity)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">ApplicationBar.Buttons.Add(enabled)<\/span><\/p>\n<\/div>\n<p><\/span><\/li>\n<li><span style=\"font-size: small\">To create event handlers for the menu item&rsquo;s click event, add the following code:\n<div id=\"codeSnippetWrapper\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;margin: 20px 0px 10px;width: 94.65%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 79px;max-height: 200px;font-size: 8pt;overflow: auto;cursor: text;border: silver 1px solid;padding: 4px\">\n<div id=\"codeSnippet\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;width: 97.97%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 156px;color: black;font-size: 9pt;overflow: visible;border-style: none;padding: 0px\">\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">Dim<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> foregroundItem <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">New<\/span> <span style=\"color: #2b91af\">ApplicationBarMenuItem<\/span>(<span style=\"color: #a31515\">&#8220;use foreground color&#8221;<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">AddHandler<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> foregroundItem.Click, <span style=\"color: blue\">AddressOf<\/span> foregroundItem_Click<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">&nbsp;<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">Dim<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> accentItem <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">New<\/span> <span style=\"color: #2b91af\">ApplicationBarMenuItem<\/span>(<span style=\"color: #a31515\">&#8220;use accent color&#8221;<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: blue;font-size: 8.5pt\">AddHandler<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"> accentItem.Click, <span style=\"color: blue\">AddressOf<\/span> accentItem_Click<\/span><\/p>\n<\/div>\n<\/div>\n<p><\/span><\/li>\n<li><span style=\"font-size: small\">To add the menu items, add the following code:\n<div id=\"codeSnippetWrapper\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;margin: 20px 0px 10px;width: 94.95%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 49px;max-height: 200px;font-size: 8pt;overflow: auto;cursor: text;border: silver 1px solid;padding: 4px\">\n<div id=\"codeSnippet\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;width: 100.59%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 51px;color: black;font-size: 9pt;overflow: visible;border-style: none;padding: 0px\">\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">ApplicationBar.MenuItems.Add(foregroundItem)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">ApplicationBar.MenuItems.Add(accentItem)<\/span><\/p>\n<\/div>\n<\/div>\n<p><\/span><\/li>\n<li><span style=\"font-size: small\">To add the event handlers for the click events, add the following code:\n<div id=\"codeSnippetWrapper\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;margin: 20px 0px 10px;width: 94.97%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 138px;max-height: 200px;font-size: 8pt;overflow: auto;cursor: text;border: silver 1px solid;padding: 4px\">\n<div id=\"codeSnippet\" style=\"text-align: left;line-height: 12pt;background-color: #f4f4f4;width: 127.94%;font-family: 'Courier New', courier, monospace;direction: ltr;height: 27px;color: black;font-size: 9pt;overflow: visible;border-style: none;padding: 0px\">\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Click handler for accent color menu item.<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Changes the colored UI elements to the built-in PhoneAccentColor<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">Private<\/span> <span style=\"color: blue\">Sub<\/span> accentItem_Click(<span style=\"color: blue\">ByVal<\/span> sender <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">Object<\/span>, <span style=\"color: blue\">ByVal<\/span> e <span style=\"color: blue\">As<\/span> <span style=\"color: #2b91af\">EventArgs<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>UpdateColor(<span style=\"color: blue\">CType<\/span>(Resources(<span style=\"color: #a31515\">&#8220;PhoneAccentColor&#8221;<\/span>), <span style=\"color: #2b91af\">Color<\/span>))<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">End<\/span> <span style=\"color: blue\">Sub<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">&nbsp;<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Click handler for accent color menu item.<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Changes the colored UI elements to the built-in PhoneForegroundColor<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">Private<\/span> <span style=\"color: blue\">Sub<\/span> foregroundItem_Click(<span style=\"color: blue\">ByVal<\/span> sender <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">Object<\/span>, <span style=\"color: blue\">ByVal<\/span> e <span style=\"color: blue\">As<\/span> <span style=\"color: #2b91af\">EventArgs<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>UpdateColor(<span style=\"color: blue\">CType<\/span>(Resources(<span style=\"color: #a31515\">&#8220;PhoneForegroundColor&#8221;<\/span>), <span style=\"color: #2b91af\">Color<\/span>))<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">End<\/span> <span style=\"color: blue\">Sub<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">&nbsp;<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Click handler for opacity icon button.<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Sets the opacity value of the ApplicationBar to 0, 1, or .5<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">Private<\/span> <span style=\"color: blue\">Sub<\/span> opacity_Click(<span style=\"color: blue\">ByVal<\/span> sender <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">Object<\/span>, <span style=\"color: blue\">ByVal<\/span> e <span style=\"color: blue\">As<\/span> <span style=\"color: #2b91af\">EventArgs<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">If<\/span> ApplicationBar.Opacity &lt; 0.01 <span style=\"color: blue\">Then<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>ApplicationBar.Opacity = 1<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">ElseIf<\/span> ApplicationBar.Opacity &gt; 0.49 <span style=\"color: blue\">AndAlso<\/span> ApplicationBar.Opacity &lt; 0.51 <span style=\"color: blue\">Then<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>ApplicationBar.Opacity = 0<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">Else<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>ApplicationBar.Opacity = 0.5<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">End<\/span> <span style=\"color: blue\">If<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>UpdateText()<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">End<\/span> <span style=\"color: blue\">Sub<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">&nbsp;<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Click handler for hide icon button.<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Changes the Visible property of the ApplicationBar to false<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; And makes the &#8220;Show Application Bar&#8221; button visible<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">Private<\/span> <span style=\"color: blue\">Sub<\/span> hide_Click(<span style=\"color: blue\">ByVal<\/span> sender <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">Object<\/span>, <span style=\"color: blue\">ByVal<\/span> e <span style=\"color: blue\">As<\/span> <span style=\"color: #2b91af\">EventArgs<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>ApplicationBar.IsVisible = <span style=\"color: blue\">False<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>showButton.Visibility = Visibility.Visible<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>UpdateText()<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">End<\/span> <span style=\"color: blue\">Sub<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">&nbsp;<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Click handler for menu enable icon button.<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Changes the IsMenuEnabled property of the ApplicationBar<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; When IsMenuEnabled is false, the menu will not pop up<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">Private<\/span> <span style=\"color: blue\">Sub<\/span> enabled_Click(<span style=\"color: blue\">ByVal<\/span> sender <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">Object<\/span>, <span style=\"color: blue\">ByVal<\/span> e <span style=\"color: blue\">As<\/span> <span style=\"color: #2b91af\">EventArgs<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>ApplicationBar.IsMenuEnabled = <span style=\"color: blue\">Not<\/span> ApplicationBar.IsMenuEnabled<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>UpdateText()<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">End<\/span> <span style=\"color: blue\">Sub<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">&nbsp;<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Click handler for show button.<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Sets the Visible property of the Application Bar to true<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">Private<\/span> <span style=\"color: blue\">Sub<\/span> showButton_Click(<span style=\"color: blue\">ByVal<\/span> sender <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">Object<\/span>, <span style=\"color: blue\">ByVal<\/span> e <span style=\"color: blue\">As<\/span> <span style=\"color: #2b91af\">RoutedEventArgs<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>ApplicationBar.IsVisible = <span style=\"color: blue\">True<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>showButton.Visibility = Visibility.Collapsed<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>UpdateText()<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">End<\/span> <span style=\"color: blue\">Sub<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">&nbsp;<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Updates the TextBlock objects to reflect the current state<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; of the ApplicationBar<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">Private<\/span> <span style=\"color: blue\">Sub<\/span> UpdateText()<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>VisibleTextBlock.Text = <span style=\"color: blue\">If<\/span>(ApplicationBar.IsVisible, <span style=\"color: #a31515\">&#8220;yes&#8221;<\/span>, <span style=\"color: #a31515\">&#8220;no&#8221;<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>OpacityTextBlock.Text = ApplicationBar.Opacity.ToString(<span style=\"color: #a31515\">&#8220;0.0&#8221;<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>MenuEnabledTextBlock.Text = <span style=\"color: blue\">If<\/span>(ApplicationBar.IsMenuEnabled, <span style=\"color: #a31515\">&#8220;yes&#8221;<\/span>, <span style=\"color: #a31515\">&#8220;no&#8221;<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">End<\/span> <span style=\"color: blue\">Sub<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">&nbsp;<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';color: green;font-size: 8.5pt\">&#8221;&#8217; Helper method for changing the color of the UI<\/span><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">Private<\/span> <span style=\"color: blue\">Sub<\/span> UpdateColor(<span style=\"color: blue\">ByVal<\/span> c <span style=\"color: blue\">As<\/span> <span style=\"color: #2b91af\">Color<\/span>)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">Dim<\/span> brush <span style=\"color: blue\">As<\/span> <span style=\"color: blue\">New<\/span> <span style=\"color: #2b91af\">SolidColorBrush<\/span>(c)<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>VisibleTextBlock.Foreground = brush<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>OpacityTextBlock.Foreground = brush<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span>MenuEnabledTextBlock.Foreground = brush<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\">&nbsp;<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">CType<\/span>(Resources(<span style=\"color: #a31515\">&#8220;Gradient&#8221;<\/span>), <span style=\"color: #2b91af\">LinearGradientBrush<\/span>).GradientStops(1).Color = c<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-family: 'Courier New';font-size: 8.5pt\"><span>&nbsp;&nbsp;&nbsp; <\/span><span style=\"color: blue\">End<\/span> <span style=\"color: blue\">Sub<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<p><\/span><\/li>\n<\/ol>\n<p><span style=\"font-size: small\">Voila! Now your application bar for Windows Phone 7 is ready! You just need to build and debug the application.<\/span><\/p>\n<h3><b>Step 3 &#8211;<\/b><b> <\/b><b>Build and debug the application<\/b><\/h3>\n<ol>\n<li><span style=\"font-size: small\">To build the application, select Build &gt; Build Solution. The project should build without any errors. <\/span><\/li>\n<li><span style=\"font-size: small\">To debug the application, set the deployment target of the application to &ldquo;Windows Phone 7 Emulator&rdquo;.<\/span><\/li>\n<li><span style=\"font-size: small\">Select Debug &gt; Start Debugging. The emulator window is displayed. <br \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2011\/03\/3603.Emulator.bmp\" width=\"234\" border=\"0\" height=\"464\" \/><\/span><\/li>\n<li><span style=\"font-size: small\">To test the application in the landscape mode, select the rotation control from the edit panel. <br \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2011\/03\/2642.Rotation20Control.bmp\" width=\"30\" border=\"0\" height=\"172\" \/><br \/>The emulator rotates into the landscape mode and accordingly, the controls resize themselves to fit the screen.<br \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2011\/03\/7534.Landscape.bmp\" width=\"412\" border=\"0\" height=\"231\" \/><\/span><\/li>\n<\/ol>\n<p><i><span style=\"font-size: small\">Note: To stop debugging the application, select Debug &gt; Stop Debugging.<\/span><\/i><\/p>\n<p><b>Step 4 &#8211;<\/b><b> <\/b><b>Rebuild in the release mode for publishing<\/b><\/p>\n<ol>\n<li><span style=\"font-size: small\">On the standard toolbar, change the configuration manager to Release. <\/span><\/li>\n<li><span style=\"font-size: small\">To rebuild the application, select Build &gt; Rebuild. The XAP file of the application is generated.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-size: small\">Finally, to submit your application to the market place, you can refer to <\/span><a href=\"http:\/\/create.msdn.com\/en-US\/home\/about\/app_submission_walkthrough_upload\"><span style=\"font-size: small\">upload your application walkthrough<\/span><\/a><span style=\"font-size: small\">.<\/span><\/p>\n<p><s><\/s><\/p>\n<p><b>Summary<\/b><\/p>\n<p><span style=\"font-size: small\">That&rsquo;s it! We&rsquo;ve now seen that creating an application bar for Windows Phone 7 isn&rsquo;t that tough. In fact, you&rsquo;ve created it in just 4 simple steps! <\/span><\/p>\n<p><span style=\"font-size: small\">&nbsp;<\/span><span style=\"font-size: small\">You can find the full source code for the Visual Basic application bar for Windows Phone 7 <\/span><a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ff431744(v=VS.92).aspx\"><span style=\"font-size: small\">here<\/span><\/a><span style=\"font-size: small\">. <\/span><\/p>\n<p><s><\/s><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In our last post, I explained how to create a control tilt effect application for Windows Phone 7. In this blog post, I want to share a sample that will help you to create an application bar for Windows Phone 7. This application will allow you to add the menu functionality. It also will allow [&hellip;]<\/p>\n","protected":false},"author":260,"featured_media":8818,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[195],"tags":[],"class_list":["post-663","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-basic"],"acf":[],"blog_post_summary":"<p>In our last post, I explained how to create a control tilt effect application for Windows Phone 7. In this blog post, I want to share a sample that will help you to create an application bar for Windows Phone 7. This application will allow you to add the menu functionality. It also will allow [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/users\/260"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/comments?post=663"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/663\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media\/8818"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media?parent=663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/categories?post=663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/tags?post=663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}