<a href="http://www.omniture.com" mce_href="http://www.omniture.com" title='Web Analytics'><img alt='' border='0' height='1' src="http://mssto.112.2o7.net/b/ss/msstoextblogsnojs/1/H.20.2--NS/0" mce_src="http://mssto.112.2o7.net/b/ss/msstoextblogsnojs/1/H.20.2--NS/0" width='1' /></a>","bodyAsHTML":"Windows 8 apps don’t have a ribbon. Windows 8 apps don’t have a top \r\nmenu. Instead, Windows 8 apps have AppBars. An AppBar on the bottom of \r\nyour app is where you place command buttons. An AppBar on the top of \r\nyour app is where you place navigation elements.

MSDN:\r\n An app bar is a UI element that presents navigation, commands, and \r\ntools to the user. An app bar can appear at the top of the page, at the \r\nbottom of the page, or both. It is hidden by default, and is shown or \r\ndismissed when the user right clicks, presses Windows+Z, or swipes from \r\nthe top or bottom edge of the screen.

\r\n\r\n

You can open and close the app bar programmatically by setting the IsOpen property. You can respond to the app bar being opened or closed by handling the Opened and Closed events.

By\r\n default, the app bar is dismissed (closed) when the user interacts with\r\n the app anywhere outside of the app bar. Closing the app bar this way \r\nis called light dismiss. You can control how the app bar is dismissed by setting the IsSticky property. When the app bar is sticky, it's not closed by a light dismiss\r\n gesture. The app bar remains visible until the user right clicks, \r\npresses Windows+Z, or swipes the top or bottom edge of the screen.

To add an app bar in Extensible Application Markup Language (XAML), you assign an AppBar control to a Page's TopAppBar orBottomAppBar\r\n property. A single app bar can be shared across multiple pages. You can\r\n add and remove commands programmatically based on the page context.

The\r\n Windows Store app templates in Microsoft Visual Studio 2012 and Blend \r\nfor Microsoft Visual Studio 2012 for Windows 8 contain a variety of app \r\nbar button styles for common scenarios in the StandardStyles.xaml file. To create a custom app bar button, use these styles as a guide to create a new style for your button.

\r\n<a href="http://www.omniture.com" title='Web Analytics'><img alt='' border='0' height='1' src="http://mssto.112.2o7.net/b/ss/msstoextblogsnojs/1/H.20.2--NS/0" width='1' /></a>\r\n

Let’s take a minute to style our AppBar

Microsoft\r\n Expression Design 4 is part of the Microsoft Expression 4 Suite. It’s \r\nmy favorite tool to create vector-based images that I can use in my XAML\r\n applications. In the video below, I’ll show you how to create a simple,\r\n stylized AppBar in your Windows 8 app.

Fun huh?

Best of luck!

 

 

 

\r\n\r\n","author":{"id":954995,"username":"Jerry Nixon","realname":null,"emailHash":"1679f0ca80c657f1fca8fbcc74eeefe1","avatar":"https://secure.gravatar.com/avatar/1679f0ca80c657f1fca8fbcc74eeefe1?d=identicon&r=PG","reputation":0},"activeRevisionId":543441,"revisionIds":[543441,543440],"lastActiveUserId":954995,"lastActiveDate":1350348618000,"parentId":null,"parentAuthor":null,"originalParentId":null,"childrenIds":[],"commentIds":[],"marked":true,"topics":["mobile","tutorial",".net & windows","windows 8"],"primaryContainerId":8,"containerIds":[7,8],"plug":"walkthrough-windows-8-appbar","wiki":false,"score":0,"depth":0},"enableThreadedComments":true,"portal":{"topic":{"id":"29","type":"topic","creationDate":1434655010000,"creationDateFormatted":"06/18/2015 07:16 PM","name":"mobile","createdBy":{"id":2,"username":"matt"},"parentTopics":[],"childTopics":[],"usedCount":36135},"blurb":"Mobile App developer news, tools and training resources from DZone, the trusted source for advanced software design, web development and devops best practices.","code":"mobile","id":9,"creationDate":1434673929000,"creationDateFormatted":"06/19/2015 12:32 AM","displayTitle":"Mobile Zone: Mobile app development news, tutorials & tools","title":"Mobile","new":false,"order":9,"shortTitle":"mobile-app-developer-tutorials-tools-news","color":"yellow","pageTitle":"Mobile App Development News, Tools & Training - DZone","active":true,"modificationDate":1437510259000,"modificationDateFormatted":"07/21/2015 08:24 PM"},"contentType":"article"}],"loadedStyles":[["/lib/bootstrap/bootstrap.less","/lib/font-awesome/font-awesome.less","/lib/fontello/css/fontello.css","/lib/fontello/css/animation.css","/lib/angular-ui/select.css","/lib/ngDialog/css/ngDialog.css","/less/ngDialog-theme.less","/lib/bootstrap-switch/bootstrap-switch.css","/less/dzone20.less","/less/fonts.less","/less/directives.less","/lib/slick/slick.css","/lib/bootstrap-slider/bootstrap-slider.css","/less/layout.less","/widgets/article/content/article-content.less","/widgets/article/infoBar/widget.less","/widgets/components/slider/widget.less","/widgets/content/commentsSlider/widget.less","/widgets/header/blackBar/widget.less","/widgets/header/main/header-common.less","/widgets/header/main/widget.less","/widgets/sidebar/content/list/list.less","/widgets/sidebar/tapBar/sidebar-list.less","/widgets/sidebar/tapBar/widget.less","/widgets/users/UserHomeMiniProfile/widget.less"]],"loadedScripts":[["/lib/jquery/jquery.js","/lib/lodash/lodash.js","/lib/moment/moment.js","/scripts/utils.js","/lib/angular/angular.js","/lib/angular/angular-sanitize.js","/lib/local-storage/angular-local-storage.js","/lib/bootstrap/bootstrap.js","/lib/angular-ui/bootstrap.js","/lib/angular-ui/select.js","/lib/bootstrap-switch/bootstrap-switch.js","/lib/ngDialog/js/ngDialog.js","/lib/angular-moment/angular-moment.js","/scripts/app.js","/scripts/socket.js","/scripts/services.js","/scripts/ui-services.js","/scripts/directives.js","/scripts/filters.js","/lib/angular-touch/angular-touch.min.js","/lib/elastic/elastic.js","/lib/ng-file-upload/angular-file-upload-all.js","/lib/angular-deckgrid/angular-deckgrid.js","/scripts/dzone.js","/scripts/ads.js","/scripts/head.js","/scripts/links.js","/scripts/utilities/directives.js","/scripts/utilities/services.js","/scripts/utilities/image-editor.js","/lib/bootstrap-slider/bootstrap-slider.js","/lib/bootstrap-slider/directive.js","/lib/angular-draganddrop/draganddrop.js","/widgets/article/content/utils.js","/widgets/article/infoBar/services.js","/widgets/components/slider/service.js","/widgets/header/main/angulartics-ga.js","/widgets/header/main/angulartics.js","/widgets/header/main/resize.js","/widgets/sidebar/content/list/service.js","/widgets/sidebar/tapBar/directive.js","/widgets/sidebar/tapBar/service.js"]],"TH_CSRF":"-1548439432907333043","botInfo":[{"isRenderBot":false}],"request":[{"site":{"id":7,"title":"DZone: Programming & DevOps news, tutorials & tools","keywords":"programming, software development, devops, java, agile, web, iot, database, mobile, big data, cloud","description":"Programming, Web Development, and DevOps news, tutorials and tools for beginners to experts. Hundreds of free publications, over 1M members, totally free.","name":"DZone.com"},"dev":false,"cdn":["dz2cdn1.dzone.com","dz2cdn2.dzone.com","dz2cdn3.dzone.com","dz2cdn4.dzone.com"],"theme":"dz20","context":"","user":{"id":2500002,"authenticated":false,"name":"Anonymous","realName":null,"avatar":"https://secure.gravatar.com/avatar/?d=identicon&r=PG","profile":"/users/2500002/anon-user.html"}}],"portals":[[{"topic":8,"id":2,"shortTitle":"agile-methodology-training-tools-news","color":"red","name":"Agile","code":"agile","url":"/agile-methodology-training-tools-news"},{"topic":6129,"id":3,"shortTitle":"big-data-analytics-tutorials-tools-news","color":"green","name":"Big Data","code":"big-data","url":"/big-data-analytics-tutorials-tools-news"},{"topic":30,"id":4,"shortTitle":"cloud-computing-tutorials-tools-news","color":"orange","name":"Cloud","code":"cloud","url":"/cloud-computing-tutorials-tools-news"},{"topic":59,"id":5,"shortTitle":"database-sql-nosql-tutorials-tools-news","color":"purple","name":"Database","code":"database","url":"/database-sql-nosql-tutorials-tools-news"},{"topic":31,"id":6,"shortTitle":"devops-tutorials-tools-news","color":"yellow","name":"DevOps","code":"devops","url":"/devops-tutorials-tools-news"},{"topic":1138,"id":7,"shortTitle":"enterprise-integration-training-tools-news","color":"green","name":"Integration","code":"integration","url":"/enterprise-integration-training-tools-news"},{"topic":48,"id":8,"shortTitle":"iot-developer-tutorials-tools-news-reviews","color":"orange","name":"IoT","code":"iot","url":"/iot-developer-tutorials-tools-news-reviews"},{"topic":1,"id":1,"shortTitle":"java-jdk-development-tutorials-tools-news","color":"purple","name":"Java","code":"java","url":"/java-jdk-development-tutorials-tools-news"},{"topic":29,"id":9,"shortTitle":"mobile-app-developer-tutorials-tools-news","color":"yellow","name":"Mobile","code":"mobile","url":"/mobile-app-developer-tutorials-tools-news"},{"topic":653,"id":10,"shortTitle":"apm-tools-performance-monitoring-optimization","color":"red","name":"Performance","code":"performance","url":"/apm-tools-performance-monitoring-optimization"},{"topic":35,"id":11,"shortTitle":"web-development-programming-tutorials-tools-news","color":"orange","name":"Web Dev","code":"webdev","url":"/web-development-programming-tutorials-tools-news"}]],"matchedUrl":{"name":"dzone:articles:view","mapping":"/articles/**","mappingPatterns":{}},"requiresModule":["angulartics","angulartics.google.analytics","dndLists","generalDirectives","monospaced.elastic","angularFileUpload","akoenig.deckgrid","ui.bootstrap-slider","ngSanitize","ui.select","ui.bootstrap","angularMoment","ngTouch","ngDialog","LocalStorageModule"]}; } catch(e) { console.error(e); }
4
Notification
  • Adam Van Grack started following you

  • Jessica Conaghan, Gumption Scott and 6 commented on a link you posted

    T-Mobile Unvells Cheaper, More Basic 'Simple Prepaid' Phone Plans

  • Jessica Conaghan replied on a comment you posted

    CSS counters are one of those "oh neat, didn't know CSS could do that" features with a lot of Xubuntu 14.10 Utopic Unicorn is the latest release of xubuntu based on Ubuntu 14.10

  • Jessica Conaghan started following you

See All
POWERED BY DZone TeamHub
","source":"blog.jerrynixon.com/2012/10/walkthrough-windows-8-appbar-you-might.html","views":3966,"articleDate":1350348618000,"tldr":null,"originalSource":"http://blog.jerrynixon.com/2012/10/walkthrough-windows-8-appbar-you-might.html","published":true,"nComments":0,"articleType":""}]; WMODEL_DATA.perms = {"canDecidePick":false,"canPublish":false}; WMODEL_DATA.isPreview = false; WMODEL_DATA.OPTIONS = {}; TH.installWidgetController('article.content', 'articleContent7', WMODEL_DATA, typeof controller == 'function' ? controller : null, [{name: 'partners', data: true},{name: 'DEFAULT', data: true}], ' oUhbblYOaqbcblYOaqbcC', null); })(); (function() { function controller($scope, $service, $location, SideBarService, TH$Request) { SideBarService.ctx.pageSize = $scope.pageSize; SideBarService.ctx.isPreview = $scope.isPreview; SideBarService.ctx.mode = $scope.mode; SideBarService.fn.loader = $service; SideBarService.fn.scrollCheck = function() { $scope.$emit('thIfScrollCheck'); }; var currentFilter; $scope.$on('$locationChangeSuccess', function() { if (!$location.search().filter) { $scope.filter = 'latest'; } else { $scope.filter = $location.search().filter; if ($scope.filter == 'latest') { $location.search('filter', null); } } if (currentFilter == $scope.filter) { return; } currentFilter = $scope.filter; SideBarService.ctx.filter = $scope.filter; }); $scope.display = SideBarService.getList(); $scope.$watchCollection(function() { return SideBarService.getList(); }, function (n) { $scope.display = n; }); $scope.isActive = SideBarService.isActive; $scope.isExcluded = SideBarService.isExcluded; $scope.loadMore = SideBarService.load; $scope.loading = function() { return SideBarService.ctx.loading; } } var WMODEL_DATA = {}; WMODEL_DATA.pageSize = 20; WMODEL_DATA.isPreview = false; WMODEL_DATA.OPTIONS = {}; WMODEL_DATA.mode = null; TH.installWidgetController('sidebar.content.list', 'sidebarContentList10', WMODEL_DATA, typeof controller == 'function' ? controller : null, [{name: 'DEFAULT', data: true}], ' oUhbkSMaaqbcdvVkcC', null); })(); (function() { var WMODEL_DATA = {}; WMODEL_DATA.OPTIONS = {}; TH.installWidgetController('sidebar.tapBar', 'sidebar', WMODEL_DATA, typeof controller == 'function' ? controller : null, null, ' oUhbkSMadabfWVcC oUhbkSMadabbWQbVkcC', null); })(); (function() { function controller($scope, shareThis, TH$Dialog, TH$Service) { $scope.getEditUrl = function(id, type) { if (!type || type == 'article') { return '/content/' + id + '/edit.html'; } else { return '/dzone/staff/' + type + (type == 'refcard' ? 'z' : 's') + '/' + id + '/edit.html'; } } $scope.share = function(socialNet, url, title){ shareThis.shareThis(socialNet, url, title); }; $scope.canDelete = function(article) { return article.canDelete; } $scope.edit = function(link) { TH$Dialog.open({ loadWidget: 'links.postPreview', widgetArgs: { edit: link.id }, size: 'xbig' }).then(function (result) { $scope.link.title = result.title; $scope.link.linkDescription = result.content; $scope.link.thumb = result.thumb; $scope.link.tags = result.topics; }); }; $scope.deleteLink = function(article) { var title = article.title; var type = 'link'; if(article.header){ title = (article.header.type == 'article') ? article.header.title : article.title; type = (article.header.type == 'article') ? 'article' : 'link'; } TH$Dialog.confirm('Do you want to delete "' + title + '"?').then(function() { return TH$Service.action('delete', {type: type, id: article.id}); }).then(function() { article.deleted = true; }); }; } var WMODEL_DATA = {}; WMODEL_DATA.OPTIONS = {}; TH.installWidgetController('content.commentsSlider', 'contentCommentsSlider9', WMODEL_DATA, typeof controller == 'function' ? controller : null, null, ' oUhbaqbcaibvnWffWVcC', null); })(); (function() { var WMODEL_DATA = {}; WMODEL_DATA.name = "commentsSlider"; WMODEL_DATA.slot = null; WMODEL_DATA.OPTIONS = {"name":"commentsSlider"}; TH.installWidgetController('components.slider', 'componentsSlider8', WMODEL_DATA, typeof controller == 'function' ? controller : null, null, ' oUhballbvbdSaoUhM', null); })();