Z 深度とシャドウZ-depth and shadow

灰色の 4 つの四角形を示す gif は積み上げ斜めの上に他のいずれかです。

UI に要素の階層構造を作成する UI を簡単にスキャンしに集中する重要なことを伝達します。Creating a visual hierarchy of elements in your UI makes the UI easy to scan and conveys what is important to focus on. 昇格の転送、UI の要素を選択することを act がソフトウェアで、このような階層を実現するためによく使用されます。Elevation, the act of bringing select elements of your UI forward, is often used to achieve such a hierarchy in software. この記事では、z 深さとシャドウを使用して UWP アプリで昇格を作成する方法について説明します。This article discusses how to create elevation in a UWP app by using z-depth and shadow.

Z 深さは、z 軸に沿って 2 つの画面間の距離を示すために 3D アプリ作成者の間で使用される用語です。Z-depth is a term used amongst 3D app creators to denote the distance between two surfaces along the z-axis. オブジェクトは、ビューアーに、閉じる方法を示しています。It illustrates how close an object is to the viewer. X に同様の概念を考えて/y 座標、z 方向の。Think of it as a similar concept to x/y coordinates, but in the z direction.

Z 深さを使用する理由Why use z-depth?

現実の世界では、私たちに近いオブジェクトに集中する傾向があります。In the physical world, we tend to focus on objects that are closer to us. この空間本能デジタル ui にも適用できます。We can apply this spatial instinct to digital UI as well. たとえば、ユーザーに近い要素を移行する場合、ユーザーは本能に集中して要素。For example, if you bring an element closer to the user, then the user will instinctively focus on the element. 移動 UI 要素により近い z 軸で、ユーザー、アプリで、タスクを効率的かつ自然に完了を支援する、オブジェクト間のビジュアルの階層を確立できます。By moving UI elements closer in z-axis, you can establish visual hierarchy between objects, helping users complete tasks naturally and efficiently in your app.

シャドウとは何ですか。What is shadow?

シャドウは、ユーザーの昇格を認識する方法の 1 つです。Shadow is one way a user perceives elevation. 管理者特権でのオブジェクトの上のライトは、次の画面で影を作成します。Light above an elevated object creates a shadow on the surface below. オブジェクトが大きいほどより大きなおよび柔軟性の高い、シャドウになります。The higher the object, the larger and softer the shadow becomes. 管理者特権でのオブジェクトの UI には、影ができる必要はありませんが、昇格時の外観を作成できます。Elevated objects in your UI don’t need to have shadows, but they help create the appearance of elevation.

UWP アプリでは、見た目のではなく、意図的な方法で影を使用してください。In UWP apps, shadows should be used in a purposeful rather than aesthetic manner. 多すぎるの影を使用して、低下またはユーザーを集中する影のことを排除します。Using too many shadows will decrease or eliminate the ability of the shadow to focus the user.

標準のコントロールを使用する場合、UI に ThemeShadow 影を自動的に組み込まれる予定です。If you use standard controls, ThemeShadow shadows will be incorporated automatically into your UI. ただし、手動で追加できます影の UI に、ThemeShadow または DropShadow Api を使用しています。However, you can manually include shadows in your UI by using either the ThemeShadow or the DropShadow APIs.

ThemeShadowThemeShadow

型を描画するために任意の XAML 要素に適用できる ThemeShadow では、適切にに基づいて x、y、z 座標をシャドウします。The ThemeShadow type can be applied to any XAML element to draw shadows appropriately based on x, y, z coordinates. ThemeShadow が他の環境の仕様についても自動的に調整されます。ThemeShadow also automatically adjusts for other environmental specifications:

  • ライティング、ユーザーのテーマ、アプリの環境、およびシェルの変更に適応します。Adapts to changes in lighting, user theme, app environment, and shell.
  • 要素の z 深さに基づいて自動的に影を適用します。Applies shadows to elements automatically based on their z-depth.
  • 同期を保つ要素に移動し、昇格を変更します。Keeps elements in sync as they move and change elevation.
  • 全体とアプリケーション間で一貫性のあるシャドウを保持します。Keeps shadows consistent throughout and across applications.

次に示します、MenuFlyout で ThemeShadow がどのように実装されています。Here is how ThemeShadow has been implemented on a MenuFlyout. MenuFlyout は、エクスペリエンスをメイン画面が 32px に昇格され、各追加のカスケード メニューが開かれた +-8 px から開く メニューの上に組み込まれています。MenuFlyout has a built in experience where the main surface is elevated to 32px and each additional cascading menu is opened +8px above the menu it opens from.

3 つのオープンな入れ子になったメニューで、MenuFlyout に適用される ThemeShadow のスクリーン ショット。

ThemeShadow を共通の制御します。ThemeShadow in common controls

次の一般的なコントロールは、特に明記しない限り、32px 深さからシャドウをキャストするのに ThemeShadow を自動的に使用されます。The following common controls will automatically use ThemeShadow to cast shadows from 32px depth unless otherwise specified:

注:フライアウトは ThemeShadow Windows 10 のバージョンが 1903 または最新の SDK に対してコンパイルされるときにのみ適用されます。Note: Flyouts will only apply ThemeShadow when compiled against Windows 10 version 1903 or a more recent SDK.

ポップアップで ThemeShadowThemeShadow in Popups

アプリの UI ポップアップを使用するシナリオのユーザーの通知とクイック アクション必要がある場合があります。It is often the case that your app's UI uses a popup for scenarios where you need user's attention and quick action. これらは、シャドウをアプリの UI で階層を作成するために使用する必要がありますとの優れた例です。These are great examples when shadow should be used to help create hierarchy in your app's UI.

ThemeShadow は影の任意の XAML 要素に適用すると自動的にキャスト、ポップアップします。ThemeShadow automatically casts shadows when applied to any XAML element in a Popup. その下にあるその他のオープンのポップアップの背後にあるアプリのバック グラウンドのコンテンツにシャドウ、キャストされます。It will cast shadows on the app background content behind it and any other open Popups below it.

ポップアップを持つ ThemeShadow を使用する、 Shadow ThemeShadow を XAML 要素に適用するプロパティ。To use ThemeShadow with Popups, use the Shadow property to apply a ThemeShadow to a XAML element. 次に、昇格要素、その背後にあるその他の要素からなどの z コンポーネントを使用して、Translationプロパティ。Then, elevate the element from other elements behind it, for example by using the z component of the Translation property. ほとんどのポップアップ UI では、アプリのバック グラウンドのコンテンツを基準とした推奨される既定の昇格は 32 有効ピクセルです。For most Popup UI, the recommended default elevation relative to the app background content is 32 effective pixels.

この例は、アプリのバック グラウンド コンテンツとその背後にあるその他のすべてのポップアップに影を落とすのポップアップで、四角形に示します。This example shows a Rectangle in a Popup casting a shadow onto the app background content and any other Popups behind it:

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

シャドウが付いた長方形 1 つポップアップします。

既定値を無効にするカスタム フライアウトで ThemeShadow 制御します。Disabling default ThemeShadow on custom Flyout controls

コントロールがに基づいてフライアウトDatePickerFlyoutMenuFlyoutまたはTimePickerFlyout自動的にキャストする ThemeShadow を使用します。シャドウします。Controls based on Flyout, DatePickerFlyout, MenuFlyout or TimePickerFlyout automatically use ThemeShadow to cast a shadow.

設定を無効にすることができますし、コントロールのコンテンツで正しい既定シャドウと異なる場合は、 IsDefaultShadowEnabledプロパティをfalseに関連付けられている FlyoutPresenter:If the default shadow doesn't look correct on your control's content then you can disable it by setting the IsDefaultShadowEnabled property to false on the associated FlyoutPresenter:

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

その他の要素で ThemeShadowThemeShadow in other elements

一般にシャドウの使用について慎重に検討し、意味のあるビジュアル階層が導入されている場合に、その使用を制限することをお勧めします。In general we encourage you to think carefully about your use of shadow and limit its use to cases where it introduces meaningful visual hierarchy. ただし、これが必要になるシナリオが高度な場合に任意の UI 要素の影をキャストする方法は提供します。However, we do provide a way to cast a shadow from any UI element in case you have advanced scenarios that necessitate it.

ポップアップに表示されていないされる XAML 要素の影をキャストするは、他の要素の影を受け取ることができる明示的に指定する必要があります、ThemeShadow.Receiversコレクション。To cast a shadow from a XAML element that isn't in a Popup, you must explicitly specify the other elements that can receive the shadow in the ThemeShadow.Receivers collection. 受信側は、ビジュアル ツリー内の魔法の先祖をすることはできません。Receivers cannot be an ancestor of the caster in the visual tree.

この例では、その背後のグリッドに影をキャストする 2 つの四角形を示します。This example shows two Rectangles that cast shadows onto a Grid behind them:

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

相互、影が両方の横にある 2 つ青緑色四角形。

ThemeShadow のパフォーマンスのベスト プラクティスPerformance best practices for ThemeShadow

  1. システムは、キャスターと受信者のペアが 5 の制限を設定し、これを超えた場合、シャドウ オフになります。The system sets a limit of 5 caster-receiver pairs, and will turn off shadow if this is exceeded. 5 キャスターと受信者のペアのシステムによって適用される制限を引き続き使用します。Stick to the system-enforced limit of 5 caster-receiver pairs.

  2. 最低限必要なカスタム レシーバー要素の数を制限します。Limit the number of custom receiver elements to the minimum necessary.

  3. 複数のレシーバー要素は、同じ権限の昇格では場合を 1 つの親要素をターゲットにする代わりにそれらを結合してみます。If multiple receiver elements are at the same elevation, try to combine them by targeting a single parent element instead.

  4. 複数の要素は、同一のレシーバー要素の上に影の同じ型にキャストする場合は、共有リソースとして、シャドウを追加し、再利用します。If multiple elements will cast the same type of shadow onto the same receiver elements then add the shadow as a shared resource and reuse it.

ドロップ シャドウDrop shadow

DropShadow がその環境に自動的に応答しないと、光源を使用しません。DropShadow is not automatically responsive to its environment and does not use light sources. たとえば、実装を参照してください、 DropShadow クラスします。For example implementations, see the DropShadow Class.

どのシャドウを使用する必要がありますか。Which shadow should I use?

プロパティProperty ThemeShadowThemeShadow DropShadowDropShadow
SDK の最小値Min SDK Windows 10 のバージョンが 1903Windows 10 version 1903 1439314393
適応性Adaptability Yes XNo
カスタマイズCustomization XNo Yes
光源Light source 自動 (既定では、グローバルですがアプリごとにオーバーライドできます)Automatic (global by default, but can override per app) なしNone
3D 環境でサポートされていますSupported in 3D environments Yes XNo
  • シャドウの目的は、単純な視覚的処理ではなく、意味のある階層を提供することに注意してください。Keep in mind that the purpose of shadow is to provide meaningful hierarchy, not as a simple visual treatment.
  • 一般に、その環境に自動的に対応する、ThemeShadow の使用をお勧めします。Generally, we recommend using ThemeShadow, which adapts automatically to its environment.
  • パフォーマンスの問題の影の数を制限するか、その他のビジュアルの処理方法を使用して、DropShadow を使用します。For concerns about performance, limit the number of shadows, use other visual treatment, or use DropShadow.
  • ビジュアルの階層を実現するシナリオが高度な場合は、その他の視覚的処理 (例: 色) を使用することを検討します。If you have more advanced scenarios to achieve visual hierarchy, consider using other visual treatment (e.g. color). シャドウが必要な場合は、DropShadow を使用します。If shadow is needed, then use DropShadow.