javascript - Windows8 Metro アプリのエラーおよび警告バー

Question

このリンクに従って、アプリ全体に適用される重大ではないエラーがあり、アプリが解決策を提案できる場合は、エラーと警告バーを表示する必要があります。

c#やjavascriptで作成したwindows8のMetroアプリでエラーや警告バーを表示する方法を知りたいです。

この質問が明確であることを願っています...

score 6 · Accepted Answer

アニメーション化されたストーリーボードを介して表示される水平ストレッチパネルの UI を作成することにより、組み込みの Weather アプリとまったく同じように警告またはエラーバーを表示できます。

警告バーコントロールを作成する

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 をプログラムで変更できます。

警告バーを表示または非表示にするアニメーションの作成

警告バーまたはエラーバーを表示または閉じるときにスムーズなアニメーションを提供するには、ストーリーボードを作成する必要があります。次のコードブロックを、ページのリソース領域の 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>

ここには2つのアニメーションがあります。1 つ目は、警告バーまたはエラーバーが画面上で変換されるピクセルの量をネガバイト量からゼロにスムーズに変更するように設計されています。これにより、バーが表示されたときにバーが「スライドダウン」するように見えます。

2 番目のアニメーションはアニメーションを反転させ、警告バーを閉じるときに使用するように設計されています。

コード内の警告バーを表示または無視する

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」で名前が始まる 2 つのアニメーションのいずれかを選択します。次に、非同期で終了する 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();
    }

それが役に立てば幸い。

score 2 · Accepted Answer

あなたが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、画面の上部または下部に配置したりできます。

注意すべきもう1つの重要なプロパティはlayoutプロパティです。custom独自のレイアウトをカスタマイズできるように設定する必要があります。それ以外の場合、VisualStudioではアプリバーにテキストを配置できません。

javascript - Windows8 Metro アプリのエラーおよび警告バー

2 に答える 2

Related

Reference