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

希望能幫助到你。

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將不允許您將文本放在應用欄上。