如何将appbarcommands对齐到左边？

Question

我的appbar上有几个命令.我想将它们中的两个对齐到左边.我该怎么办？

我正在使用Html5/JS

基本上你是如何在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

请参阅下面的示例,section:'global'将元素section:'selection'对齐,并将元素对齐到左侧.

将按钮对齐到右侧

<button id="mybutton2" 
    data-win-control=
                "WinJS.UI.AppBarCommand"
    data-win-options="{label:'Delete',
                 icon:'delete',
                 section:'global',
                 tooltip:'Delete item'}">
  </button> 

将按钮对齐到左侧

<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>