Question

我有一个metro应用程序正在尝试为我的应用程序设计登录屏幕。这里我想设计我的登录屏幕，就像微软登录屏幕。我在XAML中找到了弹出控件，但在html中找不到5。在Metro应用程序中是否存在任何特殊控制。我想设计我的登录页面。

enter image description here 谢谢。

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

Answer 1

使用WinJS.UI.Flyout控件。它可以用于确认对话框，登录，弹出窗口等。此外，您可以设置显示的位置。

您可以阅读文档here。在这里你有 Guidelines and checklist。还有一个example。

Answer 2

JavaScript Windows应用商店应用无法访问内置弹出窗口，其外观/行为类似于Microsoft帐户登录对话框。

Windows.UI.Popups.MessageBox中有一个简单的消息框体验，但它无法添加额外的控件等。

根据您的体验，您正在寻找模态 UI - 构建您可以相对简单地自己构建它（只需向主体添加position: absolute元素，然后制作它填满了屏幕 - 其余的元素子/位置完全由你控制），或者正如Mayur所建议的那样，使用那里的许多帮助库中的一个。

Answer 3

如果您针对Microsoft帐户（提供默认的Microsoft帐户登录框）进行身份验证，您可能需要尝试Live SDK，它将登录Microsoft帐户。如果您想创建自己的登录机制，其中UI看起来与Microsoft Account类似，您可以尝试使用JQuery UI插件并对其进行自定义。内置弹出控件。

Answer 4

看一下本教程。这非常有帮助。

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

windows8 Metro应用程序中的弹出控件？

4 个答案: