Popup control in windows8 Metro apps?

Asked 8/10, 2012 at 9:46 Answered 12/2, 2013 at 8:19

I have a metro application in which am trying to design Login-screen for my application.Here I want to design my login-screen like a Microsoft login-screen.I found Popup control in XAML but didn't find in html 5. Is there any special control existed in metro apps.I want to design my login page something like this.

enter image description here Thank you.

<body style="background-color:#1d3665;">
<div class="loginPage fragment">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled></button>
        <h1 class="titlearea win-type-ellipsis">
            <span class="pagetitle">Welcome to loginPage</span>
        </h1>
    </header>
    <section aria-label="Main content" role="main">
        <table style="position: absolute;background-color:skyblue;">
            <tr>
                <td><input type="text"><br/></td>
            </tr>
            <tr>
            <td>
                 <input type="password"/>
                </td>
            </tr>
        </table>
    </section>
</div>

Phasia answered 8/10, 2012 at 9:46 Comment(0)

Use the WinJS.UI.Flyout control. It could be use for confirmation dialogs, login, popups and other. Also, you can set the position at which is showed.

You can read the documentation here. Here you have the Guidelines and checklist. And one example.

Guimond answered 12/10, 2012 at 12:54 Comment(0)

JavaScript Windows Store Applications don't have access to a built in popup that looks/behaves like the Microsoft Account sign-in dialog.

There is a simple message box experience in Windows.UI.Popups.MessageBox, but it doesn't have the ability to add extra controls etc.

For your experience, you're looking for a modal UI -- to build that you can built it relatively simply yourself (Just add an position: absolute element to the body, and make it fill the screen -- the rest of that elements children / position are in your full control), or as Mayur suggested, use one of the many helper libraries that are out there.

Benge answered 8/10, 2012 at 13:41 Comment(0)

If you're authenticating against Microsoft Account (which provides default Microsoft Account Login Box), you may want to try Live SDK, which will log into Microsoft Account. And if you want to create your own login mechanism with UI looking somewthing similar to Microsoft Account, you may try JQuery UI Plug-in and customize it. There is inbuilt pop-up control in it.

Manado answered 8/10, 2012 at 10:24 Comment(0)

Take a look in this tutorial. It is very helpful.

http://www.c-sharpcorner.com/UploadFile/63f5c2/login-windows-store-apps/

Huihuie answered 12/2, 2013 at 8:19 Comment(0)

Recommended topics

Hot tags