Stíny v aplikacích Windows

Windows aplikace používají stíny k vyjádření hloubky a přidání vizuální hierarchie. Stíny pomáhají vytvářet vzhled vyvýšení, směřující pozornost uživatele na nejdůležitější prvky v uživatelském rozhraní.

Stín je jedním ze způsobů, jak uživatel vnímá vyvýšení. Světlo nad zvýšeným objektem vytvoří stín na povrchu níže. Čím vyšší je objekt, tím větší a měkčí se stín stane. Objekty ve zvýšené poloze ve vašem uživatelském rozhraní nemusí mít stíny, ale pomáhají vytvořit dojem výšky.

V Windows aplikacích by stíny měly být použity účelně, nikoli estetickým způsobem. Použití příliš velkého počtu stínů sníží nebo odstraní schopnost stínu zaměřit uživatele.

Pokud používáte standardní ovládací prvky, stíny jsou už začleněné do uživatelského rozhraní. Stíny však můžete do uživatelského rozhraní zahrnout ručně pomocí rozhraní API ThemeShadow nebo DropShadow .

TémaShadow

Typ ThemeShadow lze použít u libovolného elementu XAML, který nakreslí stíny odpovídajícím způsobem na základě souřadnic x, y, z.

• Používá stíny na prvky založené na hodnotě hloubky z a emulaci hloubky.
• Díky integrované estetice stínů udržuje stíny konzistentní v celém prostředí i napříč aplikacemi.

Zde je postup implementace ThemeShadow v MenuFlyout. MenuFlyout má vestavěný stín s hloubkou 32px, použitý na hlavní nabídku a všechny vnořené nabídky.

ThemeShadow v běžných ovládacích prvcích

Následující běžné ovládací prvky automaticky použijí ThemeShadow k vrhání stínů z hloubky 32 px, pokud není uvedeno jinak:

• Kontextová nabídka, Panel příkazů, rozbalovací panel příkazů, Panel nabídek
• Dialogy a vyskakovací okna (Dialog na 128px)
• NavigationView
• ComboBox, DropDownButton, SplitButton, ToggleSplitButton
• Výuková rada
• AutoSuggestBox
• Výběr kalendáře, data a času
• Nástrojová tip (16 px)
• Číselné pole
• Zobrazení panelu
• Ovládací prvek přenosu médií, InkToolbar
• BreadcrumbBar
• Připojená animace

MotivShadow v automaticky otevíraných otevíraných oken

Často se v uživatelském rozhraní vaší aplikace používá automaticky otevírané okno pro scénáře, ve kterých potřebujete pozornost uživatele a rychlou akci. Toto jsou skvělé příklady, kdy by se stín měl použít k vytvoření hierarchie v uživatelském rozhraní vaší aplikace.

ThemeShadow automaticky vrhá stíny při použití na libovolný prvek XAML v Popupu. Stíny vrhají na obsah pozadí aplikace a na všechna ostatní otevřená vyskakovací okna pod nimi.

Chcete-li použít ThemeShadow u Popups, použijte vlastnost Shadow, která umožňuje aplikovat ThemeShadow na prvek XAML. Potom zvyšte prvek z jiných prvků za ním, například pomocí komponenty Translation z vlastnosti. U většiny vyskakovacích oken je doporučená výchozí úroveň vzhledem k obsahu na pozadí aplikace 32 pixelů.

Tento příklad ukazuje obdélník v překryvném okně vrhající stín na pozadí aplikace a na všechna ostatní překryvná okna za ním.

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

Zakázání výchozího ThemeShadow u vlastních ovládacích prvků Flyout

Ovládací prvky založené na Flyout, DatePickerFlyout, MenuFlyout nebo TimePickerFlyout automaticky používají ThemeShadow k vrhání stínu.

Pokud výchozí stín na obsahu ovládacího prvku nevypadá správně, můžete ho zakázat nastavením vlastnosti IsDefaultShadowEnabled na přidruženou položku FlyoutPresenter:false

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

ThemeShadow v jiných prvcích

Obecně doporučujeme pečlivě zvážit použití stínu a omezit jeho použití na případy, kdy představuje smysluplnou vizuální hierarchii. Poskytujeme však způsob, jak vrhnout stín z jakéhokoli prvku uživatelského rozhraní v případě, že máte pokročilé scénáře, které to vyžadují.

Chcete-li vrhat stín z XAML prvku, který není ve vyskakovacím okně, musíte explicitně určit ostatní prvky, které mohou přijímat stín, v kolekci ThemeShadow.Receivers. Přijímače nemohou být předkem odesílatele ve vizuálním stromu.

Tento příklad ukazuje dva obdélníky, které vrhají stíny na mřížku za nimi.

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

Vržený stín

DropShadow neposkytuje předdefinované stínové hodnoty a musíte je zadat sami. Příklad implementace, viz DropShadow třída.

Jaký stín mám použít?

• Mějte na paměti, že účelem stínu je poskytnout smysluplnou hierarchii, ne jako jednoduchou vizuální léčbu.
• Obecně doporučujeme použít ThemeShadow, který poskytuje konzistentní stínové hodnoty.
• V případě problémů s výkonem omezte počet stínů, použijte jinou vizuální léčbu nebo použijte DropShadow.
• Pokud máte pokročilejší scénáře pro dosažení vizuální hierarchie, zvažte použití jiné vizuální léčby (například barvy). V případě potřeby stínu použijte DropShadow.

Související články

• Zvýšení a vrstvení ve Windows
• Materiály (akryl / Mica)