locked
Question regarding appbar.sticky

    Question

  • In my app, I was using sticky = true for my appbar. This makes the app not taking the "tap" event to dismiss the appbar, I would like to make my appbar to behave the same as the Start menu. 


    So I changed my appbar to be sticky = false. This solves the problem of dismissing appbar for tap event, but introduced a new problem. When the appbar is shown, if user right-click on a listview item, it will dismiss the appbar and the item will not be selected. The user need to right click on the item again to select it and then the "selection" appbar will show. In Start Menu, right-click to select a tile when appbar is shown will NOT dismiss the appbar and it also updates the appbar buttons. 


    So, could you please suggest how I can achieve the same appbar behaviour as it in Start Menu?


    Steps to repro in Start Menu:

    1. make appbar show by right-click or edge swipping

    2. tap the screen (not on tile), appbar disappears

    3. repeat 1

    4. click on the screen (not on tile), appbar stays

    5. right click to select a tile, appbar updates


    In my application with sticky = true

    1. make appbar show by right-click or edge swipping

    2. tap the screen (not on tile), appbar stays

    3. click on the screen (not on tile), appbar stays

    4. right click to select a tile, appbar updates

    <div id="myAppBar" class="myAppBar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar"
            data-win-options="{placement:'bottom', sticky:true}">
    </div>


    In my application with sticky = false

    1. make appbar show by right-click or edge swipping

    2. tap the screen (not on tile), appbar disappears

    3. repeat 1

    4. click on the screen (not on tile), appbar disappears

    5. right click to select a tile, appbar disappears AND tile NOT selected

    6. right click to select a tile, appbar shows AND tile selected

    <div id="myAppBar" class="myAppBar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar"
            data-win-options="{placement:'bottom', sticky:false}">
    </div>

    Code for my ListView:

    <div id="myItemList" class="myItemList" data-win-control="WinJS.UI.ListView"
                    data-win-options="{layout: {type: WinJS.UI.GridLayout, groupHeaderPosition: 'top'}}"
                    aria-label="Collections">
    </div>

    WinJS.UI.setOptions(myItemListControl, {
                    itemDataSource: myItemList.dataSource,
                    itemTemplate: listItemTemplateRenderer,
                    groupDataSource: null,
                    groupRenderer: null,
                    selectionMode: 'single',
                    oniteminvoked: itemInvoked,
                    onselectionchanged: itemSelectionChanged
    });



    Louis











    • Edited by Louis_PiG Thursday, March 15, 2012 7:12 PM
    Wednesday, March 14, 2012 8:43 PM

All replies

  • Please paste your code snippets here. I didn't encounter this issue.

    Thursday, March 15, 2012 1:38 PM
  • Edited my question. Added code.


    Louis

    Thursday, March 15, 2012 4:11 PM
  • First setup a selectionChanged listener:

    listView.addEventListener("selectionchanged", selectionChangedHandler);

    Then have that listener show the appbar and any special commands if there are any selection on the listview:

    function selectionChangedHandler(eventInfo) {
        var appBar = document.getElementById("appbar").winControl;
        var listView = document.getElementById("collectionList").winControl;
    
        if (listView.selection.count()) {
            //appBar.showCommands([]) // You can show selection specific commands here.
            appBar.show();
        }
        else {
            //appBar.hideCommands([]) // And then hide them when there are no longer any selections.
        }
    }

    Thursday, March 15, 2012 6:33 PM
  • Hi Bryan,

    Thanks for your reply. But it doesn't solve my problem.


    First, I have implemented the the onselectionchanged handler when I use WinJS.UI.setOptions and it is called and it works fine when I set appbar.sticky = true. Is there any difference between setting onselectionchanged and listen to selectionchanged event? 


    Second, what your change tries to fix is really not the problem that I am having now. My problem is that:

    When appbar.sticky = false and the app bar is shown, if you want to select an item by right click, that won't happen. It will dimiss the appbar instead of selecting it. But it works just fine in Start Menu.


    So could you please provide some other suggestions for doing that?


    Thanks 


    Louis


    • Edited by Louis_PiG Thursday, March 15, 2012 7:10 PM
    Thursday, March 15, 2012 7:09 PM
  • >In my app, I was using sticky = true for my appbar. This makes the app not taking the "tap" event to dismiss the appbar

    How about catch tap event and call appBar.hide()?


    Allen Chen [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, March 16, 2012 6:04 AM
  • Thanks Allen,

    Is there any sample code that I can look at? Or, can you point me to any links that will be helpful? 

    Thanks,


    Louis

    Friday, March 16, 2012 3:23 PM
  • Hi Bryan,

    Thanks for your reply. But it doesn't solve my problem.


    First, I have implemented the the onselectionchanged handler when I use WinJS.UI.setOptions and it is called and it works fine when I set appbar.sticky = true. Is there any difference between setting onselectionchanged and listen to selectionchanged event? 


    Second, what your change tries to fix is really not the problem that I am having now. My problem is that:

    When appbar.sticky = false and the app bar is shown, if you want to select an item by right click, that won't happen. It will dimiss the appbar instead of selecting it. But it works just fine in Start Menu.


    So could you please provide some other suggestions for doing that?

    Setting onselectionchanged lets you set one handler for the event, adding and event listener for selectionchanged lets you wire up multiple listeners. That's the only difference.

    I see what you mean now: when the appBar is not sticky it eats right-clicks. Which is pretty annoying.

    I've looked around and I think probably the surest way to get what you want is to set the AppBar to sticky = true and then control when it is shown and hidden yourself. E.g.:

    1. When the app starts, hide the AppBar.
    2. When selection is changed and the selection count > 0. Show the AppBar. (See my code in the below).
    3. When selection is changed and the selection count is 0. Hide the AppBar.
    4. If you need the AppBar for any other activities, you can wire up eventHandlers to show and hide the appBar appropriately

    You'll notice that the Start menu doesn't show or hide the appBar when you right click in an empty area. That indicates to me their appBar is sticky and they're control it's visibility themselves.

    function itemSelectionChanged(eventInfo) {
        var appBar = document.getElementById("MyAppBar").winControl;
        var listView = document.getElementById("MyItemList").winControl;
    
        if (listView.selection.count()) {
            appBar.show();
        }
        else {
            appBar.hide();
        }
    }




    Friday, March 16, 2012 4:44 PM
  • Hi Bryan,

    Thanks for the reply. 

    I think the start menu does show/hide the appbar when you right click on the empty area.. Is that not the case in your computer?

    I will also try to find some information about the "tapping" event. Do you have suggestion where I can find the "tapping" event?

    Thanks,


    Louis

    Friday, March 16, 2012 5:39 PM
  • Yes the appbar in the start screen shows and hides on right click.

    See this thread for tapping and the sample I referenced.

    http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/678d5f2b-233b-4872-b8cb-73fa5df1382c


    Jeff Sanders (MSFT)

    Friday, March 16, 2012 8:29 PM
    Moderator
  • Hi Jeff,

    I tried the BallNEight sample. And I put the following code in my application that has a listview in it. 

    var gestureRecognizer = new Windows.UI.Input.GestureRecognizer(); gestureRecognizer.gestureSettings = Windows.UI.Input.GestureSettings.tap; gestureRecognizer.addEventListener('tapped', test, false);

    function test() {
            console.log("tapped");
    }

    I put a break point at the console.log() and tried tapping on the screen with finger and mouse-left-click. The break point is never hit. Did I miss anything?

    thanks,


    Louis

    Friday, March 16, 2012 8:58 PM
  • Hi Bryan,

    Thanks for the reply. 

    I think the start menu does show/hide the appbar when you right click on the empty area.. Is that not the case in your computer?

    I will also try to find some information about the "tapping" event. Do you have suggestion where I can find the "tapping" event?

    Thanks,


    Louis


    Argh, that's my slightly older build of windows coming back to bite me. On CP it does toggle view on rclick. My bad.
    Friday, March 16, 2012 10:37 PM
  • Please trythe following code.

     gestureRecognizer.addEventListener('tapped', test, true);

    The tapped event can be captured.

    Please refer to eventPhase property for more info.


    Best wishes,


    Robin [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, March 19, 2012 1:44 PM
    Moderator
  • Hi Robin,

    Thanks for the answer, but it still doesn't work for me.


    Louis

    Monday, March 19, 2012 4:12 PM
  • Hi Louis,

    Sorry for the delay, I lost track of the forum thread.  Can you create a simple sample and send it to me?  That will be faster than going back and forth on this issue.

    -Jeff


    Jeff Sanders (MSFT)

    Friday, March 30, 2012 2:33 PM
    Moderator