Question

根据此link，当存在适用于整个应用的非严重错误并且您的应用可以建议解决方案时，我们需要显示错误和警告栏。

所以我想知道如何在使用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>

这里有两个动画。第一个设计用于平滑地改变警告或错误栏在屏幕上方转换的像素数量，从负数量变为零。在effet中，当条形显示时，条形似乎会“向下滑动”。

第二个动画反转动画，设计用于在关闭警告栏时使用。

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

在您的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将不允许您将文本放在应用栏上。

windows8 metro app中的错误和警告栏

2 个答案: