How to close charm pane?

Question

In the charm pane, I have a button, I want to close the charm after clicking that button.

anyone know how to close it?

Answer 1

In the settings charm or the Share Target charm?

Answer 2

Hi,

I wouldn't recommend to do that. The charm should be closed by the user (for a similar experience throughout all the apps he/she has installed). You should only provide a back button, so the user can navigate back in the charm bar.

---

Best Regards. When you see answers and helpful posts, please click Vote As Helpful, Propose As Answer, and/or Mark As Answer. This helps us build a healthy and positive community.

Answer 3

For the top-level Settings pane (from the charm itself), you can use Windows.UI.ApplicationSettings.­SettingsPane.getForCurrentView.hide. For a second-level settings pane created with WinJS.UI.SettingsFlyout, that particular instance will also have a hide event. 

These classes both have show methods as well to programmatically invoke them.

Answer 4

Hi all, thanks for your reply.

I add one charm page by this way, this is a second-level charm pane.

I want to close it after doing login, I couldn't find a way to close it . 

May I close it programmatically? Or is it just as jpsanders suggested, "The charm should be closed by the user".

       WinJS.Application.onsettings = function (e) {
                e.detail.applicationcommands = { "loginDiv": { title: "Login", href: "/pages/login-charm.html" } };
                WinJS.UI.SettingsFlyout.populateSettings(e);
            };
           WinJS.Application.start();

Answer 5

you CAN close the setting charm programmatically, but you can NOT open the charms programmatically. You can however open the setting charm.

How to close the setting charm programmatically ? it's on the documentation, try to find it :) I forgot where to find it.

Answer 6

hey 老核桃, can you help me with my problem ? http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/d3960216-8dfc-475e-bed3-9364db003171

The answer to your how to hide the charm programmatically is , eventObject.hide();  I think.

Answer 7

Hi All, more info here:

I use two ways to add one second level charm pane,

first method is to add a charm through the setting pane:

        WinJS.Application.onsettings = function (e) {
                e.detail.applicationcommands = { "loginDiv": { title: "Login", href: "/pages/login-charm.html" } };
                WinJS.UI.SettingsFlyout.populateSettings(e);
            };
         
            WinJS.Application.start();

second method is open a charm programmatically:

 WinJS.UI.SettingsFlyout.showSettings("loginDiv", "/pages/login-charm.html");

I want to close the login-charm whatever the way open it.

I tried the hide() method as :

        var settingsFlyout = new WinJS.UI.SettingsFlyout();
      settingsFlyout.hide();

This doesn't work, I guess I shouldn't get the  settingsFlyout by "new WinJS.UI.SettingsFlyout()", but I don't know how to get the settingFlyout object.

Answer 8

Hi

Can you give us a simple project on sky drive?

I think that will be great.

Answer 9

Any answer to mountain2012's question?

I also want the same.

Answer 10

You can do this:

   function clearBtnPress(event) {
        WinJS.log && WinJS.log('Clear history button pressed', 'samples', 'status');
        WinJS.UI._Overlay.disabled = true;
        
    }

-Jeff

---

Jeff Sanders (MSFT)

Answer 11

This is not working for me.

Thanks,

Sree

Answer 12

It still does not close using .hide() if you use showSettings();

Answer 13

Possible bug in WinJS.  Neither of the suggested approaches work for me and in fact calling hide from secondary flyout throws.  Hide not defined.  Wondering if there were changes in the API? Calling show sometimes works but also sometimes results in a flash of the pane you're trying to close.  This is an area that definitely use some additional work by MSFT.  I also think it should be possible to supply a command (js) only settings command -- for cases where you want to nav on the main page or run some background logic not requiring a full settings pane.

---

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” - Martin Fowler

Answer 14

I got this figured out. The .hide() method on WinJS.UI.SettingsFlyout, as others have mentioned, doesn't work. It doesn't even appear to exists even though the docs says it's there. 

Here's a hack to make it work - trigger a click on the "clickeater". Here's how... 

You may have noticed that an HTML tag is automatically inserted into the body of your main HTML page when you run your app. It looks like: 

<section class="win-appbarclickeater" role="menuitem" aria-label="Close" unselectable="on"></section>

I'm not sure what it's purpose is entirely but it seems to have something to do with detecting user clicks so I just, just for kicks, triggered a click on it, example below, and it work, it dismissed the settings pane. 

$('.win-appbarclickeater').click();

Note: It doesn't dismiss if you trigger a click on any other element. Also, I'm using jQuery in my app. You could do the same in vanilla Javascript but it's a lot more verbose, like so:

var e = document.createEvent('MouseEvent');
e.initMouseEvent('click', false, false, null, null, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementsByClassName('win-appbarclickeater')[0].dispatchEvent(e);

Hope this helps someone!

Answer 15

You can also just call window.focus(). That will cause the settings charm to lose focus and hide itself.

The way we've done it before is to just navigate back to the homepage using WinJS.Navigation.navigate(...)

Answer 16

What is the code for C# in 8.1 ?

Answer 17

i have the same problem. want to close the settings charm programmatically. but the solution described doesn´t work, because there is no hide event on Windows.UI.ApplicationsSettings.SettingsPane.getForCurrentView. There is only a show element.

Is there another solution?