2

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

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

希望这个问题很清楚......

4

2 回答 2

6

您可以像内置天气应用程序一样显示警告或错误栏，方法是为水平拉伸面板创建 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();
    }

希望能帮助到你。

于 2012-12-21T08:29:14.173 回答
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 将不允许您在应用栏上放置文本。

于 2012-12-21T07:04:49.000 回答