Windows アプリの影

Windowsアプリでは、影を使用して深度を表現し、視覚的階層を追加します。 影は立体感を生み出し、ユーザーのフォーカスをUIの最も重要な要素に導くのに役立ちます。

影は、ユーザーが昇格を認識する 1 つの方法です。 高く位置したオブジェクトの上から光を当てると、下の表面に影ができます。 オブジェクトが大きいほど、影が大きくなり、柔らかくなります。 UI の昇格されたオブジェクトには影を付ける必要はありませんが、昇格の外観を作成するのに役立ちます。

Windowsアプリでは、影は美的な方法ではなく意図的に使用する必要があります。 シャドウの数が多すぎると、ユーザーにフォーカスを合わせるためにシャドウの機能が低下または排除されます。

標準コントロールを使用する場合、シャドウは UI に既に組み込まれています。 ただし、ThemeShadow API または DropShadow API を使用して、UI にシャドウを手動で含めることができます。

テーマシャドウ

ThemeShadow 型は、任意の XAML 要素に適用して、x、y、z 座標に基づいて適切に影を描画できます。

• Z 深度値に基づいて要素に影を適用し、深度をエミュレートします。
• 組み込まれた影の美学のおかげで、アプリケーション全体およびすべてのアプリケーションにおいて影の一貫性を保ちます。

MenuFlyout で ThemeShadow がどのように実装されているかを次に示します。 MenuFlyout には、メイン メニューとすべての入れ子になったメニューに 32px の深度が適用された組み込みの影があります。

共通コントロールにおける ThemeShadow

次の一般的なコントロールでは、特に指定がない限り、ThemeShadow を使用して 32px 深度からシャドウを自動的にキャストします。

• コンテキスト メニュー、 コマンド バー、 コマンド バーのポップアップ、 MenuBar
• ダイアログとポップアップ (128px のダイアログ)
• ナビゲーションビュー
• ComboBox、 DropDownButton、SplitButton、ToggleSplitButton
• TeachingTip
• AutoSuggestBoxをで操作する
• カレンダー/日付/時刻ピッカー
• ツールチップ (16px)
• 数値ボックス
• タブビュー
• メディア トランスポート コントロール、 InkToolbar
• BreadcrumbBar
• 接続されたアニメーション

ThemeShadowのポップアップ

多くの場合、ユーザーの注意と迅速なアクションが必要なシナリオでは、アプリの UI でポップアップが使用されます。 アプリの UI で階層を作成するためにシャドウを使用する必要がある場合の優れた例を次に示します。

ThemeShadow は 、ポップアップ内の任意の XAML 要素に適用されると、自動的にシャドウをキャストします。 その背後にあるアプリの背景コンテンツとその下の他の開いているポップアップに影を落とします。

ポップアップで ThemeShadow を使用するには、 Shadow プロパティを使用して、Xaml 要素に ThemeShadow を適用します。 次に、たとえば、 Translation プロパティの z コンポーネントを使用して、その背後にある他の要素から要素を昇格します。 ほとんどのポップアップ UI では、アプリの背景コンテンツに対して推奨される既定の昇格は 32 有効ピクセルです。

この例では、ポップアップの四角形を示し、アプリの背景コンテンツとその背後にあるその他のポップアップに影を付けます。

<Popup>
    <Rectangle x:Name="PopupRectangle" Fill="Lavender" Height="48" Width="96">
        <Rectangle.Shadow>
            <ThemeShadow />
        </Rectangle.Shadow>
    </Rectangle>
</Popup>

// Elevate the rectangle by 32px
PopupRectangle.Translation += new Vector3(0, 0, 32);

カスタム ポップアップ コントロールで既定の ThemeShadow を無効にする

フライアウト、DatePickerFlyout、MenuFlyout、または TimePickerFlyout に基づくコントロールでは、自動的に ThemeShadow を使用して影を投影します。

コントロールのコンテンツに対して既定の影が正しく表示されない場合は、関連付けられている FlyoutPresenter で IsDefaultShadowEnabled プロパティを false に設定して無効にすることができます。

<Flyout>
    <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
            <Setter Property="IsDefaultShadowEnabled" Value="False" />
        </Style>
    </Flyout.FlyoutPresenterStyle>
</Flyout>

他の要素内のThemeShadow

一般に、シャドウの使用について慎重に検討し、その使用を意味のある視覚的階層を導入する場合に限定することをお勧めします。 ただし、必要な高度なシナリオがある場合に備えて、任意の UI 要素からシャドウをキャストする方法が用意されています。

Popup に含まれていない XAML 要素からシャドウをキャストするには、 ThemeShadow.Receivers コレクションでシャドウを受け取ることができる他の要素を明示的に指定する必要があります。 レシーバーをビジュアル ツリー内のキャスターの先祖にすることはできません。

この例では、背後のグリッドに影を投影する 2 つの四角形を示します。

<Grid>
    <Grid.Resources>
        <ThemeShadow x:Name="SharedShadow" />
    </Grid.Resources>

    <Grid x:Name="BackgroundGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />

    <Rectangle x:Name="Rectangle1" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />

    <Rectangle x:Name="Rectangle2" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />
</Grid>

/// Add BackgroundGrid as a shadow receiver and elevate the casting buttons above it
SharedShadow.Receivers.Add(BackgroundGrid);

Rectangle1.Translation += new Vector3(0, 0, 16);
Rectangle2.Translation += new Vector3(120, 0, 32);

ドロップ シャドウ

DropShadow には組み込みのシャドウ値が用意されていないため、自分で指定する必要があります。 実装例については、 DropShadow クラスを参照してください。

どの影を使用する必要がありますか?

• シャドウの目的は、単純な視覚的な処理ではなく、意味のある階層を提供することです。
• 一般に、一貫したシャドウ値を提供する ThemeShadow を使用することをお勧めします。
• パフォーマンスに関する懸念がある場合は、シャドウの数を制限するか、他の視覚処理を使用するか、DropShadow を使用します。
• ビジュアル階層を実現するためのより高度なシナリオがある場合は、他の視覚処理 (色など) の使用を検討してください。 シャドウが必要な場合は、DropShadow を使用します。

関連資料

• Windows における標高と階層化
• 素材(アクリル/マイカ)