错误和警告栏在windows8地铁应用程序

Question

根据这个链接，我们需要显示错误和警告条，当有一个非关键的错误，适用于整个应用程序，你的应用程序可以建议一个解决方案。

所以我想知道如何在使用c#或javascript创建的windows8 Metro应用程序中显示错误和警告栏。

Answer 1

你可以显示一个警告或错误栏，就像内置的天气应用程序一样，通过创建一个水平拉伸面板的UI，通过一个动画故事板显示，像这样

创建警告栏控件

在XAML页面的正文中，放入以下代码块:

        <!-- StatusBar for temporary feedback and diagnostics -->
    <Grid x:Name="barStatus" HorizontalAlignment="Stretch" VerticalAlignment="Top" Visibility="Collapsed" Background="#FF383026" RenderTransformOrigin="0.5,0.5" >
        <Grid.RenderTransform>
            <CompositeTransform x:Name="barStatusCompositeTransform" TranslateY="-68"/>
        </Grid.RenderTransform>
        <Grid.RowDefinitions>
            <RowDefinition Height="8" />
            <RowDefinition Height="60" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="300" />
        </Grid.ColumnDefinitions>
        <Canvas Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" MinWidth="150" Background="#FF50B7FF"/>
        <TextBlock x:Name="txtStatus" Grid.Row="1" Text="Warning or Error Text Placeholder" Style="{StaticResource BasicTextStyle}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="42,0,0,0" />
        <Button Grid.Row="1" Grid.Column="1" MinWidth="150" Content="{StaticResource btnCloseText}" HorizontalAlignment="Center" Click="btnClose_Click" />
    </Grid>

这段代码创建了一个水平画布，它横跨屏幕的宽度，并在顶部对齐。您会注意到，默认情况下，它被放置在屏幕外(通过与屏幕上方高度相等的像素量进行转换)。它也被"折叠"，以确保它不被显示。

在这个例子中，txtStatus TextBlock可以通过编程方式改变，以便根据应用程序的情况向用户提供适当的反馈。

创建显示或取消警告栏的动画

为了在显示或取消警告或错误栏时提供平滑的动画，您需要创建一个StoryBoard。请将以下代码块放在页面的资源区域，位于XAML文件的顶部。

    <!-- Animations and transitions -->
    <Storyboard x:Name="sbStatusBarToVisible">
        <DoubleAnimation Storyboard.TargetName="barStatusCompositeTransform" Storyboard.TargetProperty="TranslateY" From="-68" To="0" Duration="0:0:0.25" />
    </Storyboard>
    <Storyboard x:Name="sbStatusBarToCollapsed">
        <DoubleAnimation Storyboard.TargetName="barStatusCompositeTransform" Storyboard.TargetProperty="TranslateY" From="0" To="-68" Duration="0:0:0.25" />
    </Storyboard>

这里有两个动画。第一个被设计为平滑地改变警告或错误条在屏幕上方平移的像素数，从负值变为零。这实际上使该栏在显示时看起来"向下滑动"。

第二个动画与前面的动画相反，它被设计为在关闭警告栏时使用。

在代码中显示或取消警告栏

在你的c#后台代码中，这里是你如何异步显示适合你的应用程序的警告或错误栏。

首先，一个动画辅助函数:

    private void ToggleStatusBarVisibility()
    {
        var targetVisibility = barStatus.Visibility == Windows.UI.Xaml.Visibility.Collapsed ? Windows.UI.Xaml.Visibility.Visible : Windows.UI.Xaml.Visibility.Collapsed;
        barStatus.Visibility = targetVisibility == Windows.UI.Xaml.Visibility.Visible ? targetVisibility : barStatus.Visibility;
        var animation = "sbStatusBarTo" + targetVisibility.ToString();
        var sb = this.FindName(animation) as Windows.UI.Xaml.Media.Animation.Storyboard;
        if (sb != null)
        {
            sb.Completed += (sender, e) =>
            {
                barStatus.Visibility = targetVisibility == Windows.UI.Xaml.Visibility.Collapsed ? targetVisibility : barStatus.Visibility;
            };
            sb.Begin();
        }
    }

该函数选择两个动画中的一个，其名称以"sbStatusBarTo"开头，在页面前面定义为资源。然后，它启动StoryBoard动画，该动画将异步完成。

下面是触发它的方法:

    private void DisplayStatus(String message)
    {
        // TODO: protect against multiple invocations
        // while the status bar is displayed...
        txtStatus.Text = message;
        ToggleStatusBarVisibility();
    }

当用户想要关闭警告栏时，他/她点击关闭按钮，其代码显示在这里供参考:

    private void btnClose_Click(object sender, RoutedEventArgs e)
    {
        // can only be called when the status bar is visible
        ToggleStatusBarVisibility();
    }

希望能有所帮助。

Answer 2

如果你正在寻找一个JS解决方案，这就是我将如何做到这一点。

我相信你是在寻找AppBar控件。http://msdn.microsoft.com/en-us/library/windows/apps/br229670.aspx

你可以试着遵循这个快速入门指南http://msdn.microsoft.com/en-us/library/windows/apps/hh465309.aspx

下面是一些示例代码，您可以使用它们来创建一个警告栏

<div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{sticky: 'false', placement: 'top', layout: 'custom'}">
    <div id="errorMessage">Your Error Message</div>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button" style="float: right"></button>
</div> 

placement属性可能有用的情况下，你想在屏幕的顶部显示"警告栏"。您可以将placement属性设置为Top或Buttom，以将其放置在屏幕的顶部或底部

另一个需要注意的重要属性是layout属性。您必须将其设置为custom，以便您可以自定义自己的布局。否则，Visual Studio将不允许你在应用程序栏上放置文本。