winjs appbar.wincontrol is null

Question 1

Page Controls are not initialized yet and script is executing before that.

There is two place this code can be placed. either in

// if the app bar is part of default.html, appbar show can be put in default.js
// default.js already have a call to WinJS.UI.processAll under activated event handler
WinJS.UI.processAll().then(function ()
{
    appbar.winControl.show();
});

or

// if the appbar is part of mypage.html, need to have code like this in mypage.js
WinJS.UI.Pages.define('/pages/mypage/mypage.html',
    {
         ready: function onready(element, options)
         {
             appbar.winControl.show();
         }
    }

Question 2

Whenever you use a winjs control (div with data-win-control attribute) to specify the control you want. You must also call the WinJS.UI.processAll function in your JavaScript code. WinJS.UI.processAll parses your markup and instantiates any Windows Library for JavaScript controls it finds.

If you aren't using the Blank Application template or if you're
adding the control to a page that you created yourself, you might
need to add a call to WinJS.UI.processAll.
If you added the control to your app's home page (which is usually the default.html file), add a call to WinJS.UI.processAll in your onactivated event handler, as shown in the previous example
If you added the control to a Page control, you don't need to add a call to WinJS.UI.processAll because the Page control does that for you automatically.
If you added the control to another page that is not your app's home page, handle the DOMContentLoaded event and use the handler to call WinJS.UI.processAll.

function initialize() {

WinJS.UI.processAll();

}

document.addEventListener("DOMContentLoaded", initialize(), false);