Windows 應用程式中的陰影

Windows 應用程式使用陰影來表達深度並增加視覺層次。 陰影有助於營造 高低感，引導使用者將注意力集中在介面中最重要的元素。

陰影是使用者感知高度的一種方式。 高處物體上方的光線會在下方的表面上產生陰影。 物體越高，陰影越大越柔和。 UI 中高架物件不一定需要陰影，但它們有助於營造高低感。

在 Windows 應用程式中，陰影應該以有目的的方式使用，而非美觀。 使用過多陰影會降低或消除陰影對使用者專注的能力。

如果你用標準控制，陰影已經整合進你的介面裡了。 不過，你可以透過 ThemeShadow 或 DropShadow API 手動在 UI 中加入陰影。

主題影子

ThemeShadow 類型可套用於任意 XAML 元素，根據 x、y、z 座標適當繪製陰影。

  • 它會依據 z-depth 值為元素施加陰影，以模擬深度效果。
  • 它透過內建的陰影美學，讓整個應用程式及不同應用程式的陰影保持一致。

以下是 ThemeShadow 在 MenuFlyout 上實作的方式。 MenuFlyout 內建一個深度為 32px 的陰影，套用在主選單和所有巢狀選單上。

一張 ThemeShadow 套用至 MenuFlyout 的螢幕截圖，顯示三個已開啟且巢狀的選單。

打開 WinUI 圖庫應用程式，看看 ThemeShadow 的運作

ThemeShadow 在常用控制項中

以下常見控制項會自動使用 ThemeShadow 從 32px 深度投射陰影，除非另有說明：

Popups中的ThemeShadow

你的應用程式介面常常會用彈出視窗來處理需要使用者注意力和快速行動的情況。 這些都是很好的例子，說明應該用 shadow 來幫助你 app 介面建立階層結構。

當在彈出視窗中套用任何 XAML 元素時，ThemeShadow 會自動投射陰影。 它會在背後的應用程式背景內容以及下方其他開啟的彈出視窗投下陰影。

若要使用 ThemeShadow 搭配彈出視窗，請使用 Shadow 屬性將 ThemeShadow 套用到 XAML 元素。 接著，將該元素提升到其他在其後方的元素之上，例如使用Translation屬性的 z 分量。 大多數彈出式介面的建議預設高度相對於應用程式背景內容的有效高度是 32 像素。

這個範例顯示一個 Rectangle 在彈出視窗中投射陰影到應用程式的背景內容以及其後方的其他彈出視窗上。

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

一個帶陰影的長方形彈出視窗。

在自訂 Flyout 控制中停用預設的 ThemeShadow

基於 Flyout、 DatePickerFlyout、 MenuFlyout 或 TimePickerFlyout 的控制會自動使用 ThemeShadow 投射陰影。

如果預設陰影在你的控制項內容中看起來不正確，你可以在相關的 FlyoutPresenter 中設定 IsDefaultShadowEnabled 屬性為 為 false ：

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

其他元素中的主題陰影

備註

從 Windows 11 開始，如果應用程式針對 Windows SDK 版本 22000 或更新，Receivers 集合會被忽略。 不過不會有錯誤，陰影會繼續運作。

一般而言，我們鼓勵你仔細思考陰影的使用，並將其使用限制在引入有意義的視覺層次的情況下。 不過，我們確實提供一種方法，可以從任何 UI 元素投射陰影，以應對進階情境的需求。

要從不在彈出視窗中的 XAML 元素投射陰影，必須在 ThemeShadow.Receivers 集合中明確指定其他可以接收陰影的元素。 接收者不能是視覺樹中發送者的祖先。

這個例子顯示了兩個矩形，它們會把陰影投射到它們背後的格子上：

<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 類別。

小提示

從 Windows 11 開始，如果應用程式針對 Windows SDK 版本 22000 或更新版本，ThemeShadow 會像投影影一樣運作。 如果你用的是 DropShadow，可以考慮改用 ThemeShadow。

我該用哪一種陰影？

房產 主題影子 陰影
Min SDK SDK 18362 SDK 14393
適應性 Yes 否
自訂 否 Yes
光源 None None
支援 3D 環境 是的（雖然在 3D 環境中可行，但陰影是模擬的。） 否
  • 請記住，陰影的目的是提供有意義的層級結構，而非單純的視覺處理。
  • 一般來說，我們建議使用 ThemeShadow，因為它提供一致的陰影值。
  • 因應效能問題，可以限制陰影數量、使用其他視覺處理，或使用 DropShadow。
  • 如果你有更進階的視覺層次，可以考慮使用其他視覺處理方式（例如顏色）。 如果需要陰影，就用 DropShadow。
  • Last updated on