CODEWITHSUNDEEP
windows-8winjs
Joe Smith
Joe Smith

Reputation: 65

How do I align appbarcommands to left?

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>

Upvotes: 1

Views: 1415

Answers (4)

svennergr
svennergr

Reputation: 810

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

Upvotes: 0

Mike LaZelle
Mike LaZelle

Reputation: 1

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>

Upvotes: -1

Jagannath
Jagannath

Reputation: 4025

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>

Upvotes: 0

Mayank
Mayank

Reputation: 8852

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>

Upvotes: 5

Related Questions