locked
How to prevent appbar hidden when click right button?

    Question

  • Hi, 

    I add an AppBar into my app. By default when I click right button, the appbar will show. Now I want the appbar does not hide when I click right button on a special dom element. How can I bind and process the events of the element?

    Something likes ListView, when I right click the item of lisview, the appbar does not show or hide.

    Tuesday, July 9, 2013 9:20 AM

Answers

  • Hi, 

    The problem is resolved. I use 'contextmenu' event to process right click event and call preventDefault() function in event handler. The app bar will not show when clicking on the element that binded this event.


    • Marked as answer by Lattimore Monday, July 15, 2013 9:50 AM
    • Edited by Lattimore Monday, July 15, 2013 9:55 AM a word is wrong
    Monday, July 15, 2013 9:50 AM

All replies

  • Set IsSticky to true

    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Tuesday, July 9, 2013 9:21 AM
  • Hi,

    Sticky does not work with right click.  It just work with left click.

    You can try this code:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link rel="stylesheet" href="/css/create-appbar.css" />
        <script src="/js/create-appbar.js"></script>
        <script src="/js/appbarsampleutils.js"></script>
    </head>
    <body>
        <div data-win-control="SdkSample.ScenarioInput">
            <p>
                The AppBar is hidden by default and appears when users swipe a finger from the
                bottom edge of the screen. It covers the content of the application and can be dismissed
                by the user with an edge swipe or by interacting with the application.</p>
            <br />
            <br />
        </div>
        <div data-win-control="SdkSample.ScenarioOutput">
        </div>
        <!-- Create AppBar -->
        <!-- BEGINTEMPLATE: Template code for an AppBar -->
        <div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{sticky: true}">
            <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'}">
            </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>
        </div>
        <!-- ENDTEMPLATE -->
    </body>
    </html>

    Tuesday, July 9, 2013 11:04 AM
  • Hi, 

    The problem is resolved. I use 'contextmenu' event to process right click event and call preventDefault() function in event handler. The app bar will not show when clicking on the element that binded this event.


    • Marked as answer by Lattimore Monday, July 15, 2013 9:50 AM
    • Edited by Lattimore Monday, July 15, 2013 9:55 AM a word is wrong
    Monday, July 15, 2013 9:50 AM