windows8 metro app中的错误和警告栏

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();
    }

希望能帮助到你.