How do I align appbarcommands to left? - windows-8

Question

I have several command on my appbar. I want to align two of them to the left. How would I do it?
I am using Html5/JS
Basically How do you do this in HTML5/JS?
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>

Answer 1

See the example's below, section:'global' will align the element to right and section:'selection' will align the element to the left.
To align button to the right
<button id="mybutton2"
data-win-control=
"WinJS.UI.AppBarCommand"
data-win-options="{label:'Delete',
icon:'delete',
section:'global',
tooltip:'Delete item'}">
</button>
To align button's to the left
<button id="mybutton3"
data-win-control=
"WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera',
label:'Camera',
icon:'camera',
section:'selection',
tooltip:'Take a picture'}">
</button>

Answer 2

Sincel global is deprecated, I could not figure out how to align command buttons from left to right. The only solution I found is, add extra buttons and remove their label and icon.
I know this is ugly but had to find a work around and this is the one I had to choose.
<div class="toolbar" data-win-control="WinJS.UI.ToolBar">
<!-- Primary commands -->
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdMentions',
label:'Mentions',
type:'button',
icon: 'accounts'
}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdBlocked',
label:'Blocked Accounts',
type:'button',
icon: 'blockcontact'
}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdConfig',
label:'Configuration',
icon: 'edit'
}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdConfig1'
}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdConfig2'
}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdConfig3'
}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdConfig4'
}"></button>
</div>

Answer 3

Just setting it via CSS works fine.
HTML:
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit'}"></button>
CSS:
#cmdEdit{
position:absolute;
left:50px;
}

Answer 4

Here is a great sample from CodeShow. This works perfectly.
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd',label:'Add',icon:'add', section:'global',tooltip:'Add item'}"></button>
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove', section:'global',tooltip:'Remove item'}"
onclick="appbar2.remove()"></button>
<hr />
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{type:'separator',section:'global'}" />
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete', section:'global',tooltip:'Delete item'}"></button>
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera', section:'selection',tooltip:'Take a picture'}"></button>