Árnyékok Windows alkalmazásokban

Windows alkalmazások árnyékokkal fejezik ki a mélységet, és vizuális hierarchiát adnak hozzá. Az árnyékok segítenek a jogosultságszint-emelés megjelenésében, így a felhasználói felület legfontosabb elemeire irányíthatja a felhasználó fókuszát.

Az árnyék az egyik módja annak, hogy a felhasználó érzékelje a magasságot. Egy emelt tárgy fölötti fény árnyékot hoz létre az alábbi felszínen. Minél magasabb az objektum, annál nagyobb és lágyabb lesz az árnyék. A felhasználói felületen lévő emelt szintű objektumoknak nem kell árnyékokkal rendelkezniük, de segítenek a szintemelés megjelenésének kialakításában.

Az Windows alkalmazásokban az árnyékokat nem esztétikai, hanem céltudatos módon kell használni. Ha túl sok árnyékot használ, az csökkenti vagy megszünteti az árnyék azon képességét, hogy a felhasználót összpontosítsa.

Ha standard vezérlőket használ, az árnyékok már be vannak ágyazva a felhasználói felületbe. Az árnyékokat azonban manuálisan is felveheti a felhasználói felületbe a ThemeShadow vagy a DropShadow API-k használatával.

ThemeShadow

A ThemeShadow típus bármely XAML-elemre alkalmazható, hogy az x, y és z koordináták alapján megfelelő árnyékokat rajzoljon.

• Árnyékokat alkalmaz a z mélységi értéken alapuló elemekre, mélységet emulálva.
• A beépített árnyékesztétikának köszönhetően az árnyékok egységesek maradnak az alkalmazásokban és a különböző alkalmazások között.

Az alábbiakban bemutatjuk, hogyan lett implementálva a ThemeShadow egy MenuFlyout-on. A MenuFlyout beépített árnyékkal rendelkezik, amelynek mélysége 32px a főmenüre és az összes beágyazott menüre alkalmazva.

ThemeShadow a gyakori vezérlőkben

A következő gyakori vezérlők automatikusan a ThemeShadow használatával árnyékokat vetnek 32px mélységből, kivéve, ha másként van megadva:

• Helyi menü, Parancssáv, Parancssáv kibontható, Menüsáv
• Párbeszédpanelek és Lenyíló panelek (Párbeszédpanel 128px-en)
• Navigációs nézet
• ComboBox, DropDownButton, SplitButton, ToggleSplitButton
• Tanítási tipp
• AutoSuggestBox
• Naptár/Dátum/Időválasztók
• Elemleírás (16px)
• Szám mező
• TabView
• Médiaátvitel-vezérlés, InkToolbar
• BreadcrumbBar
• Csatlakoztatott animáció

ThemeShadow a felugró ablakokban

Gyakran előfordul, hogy az alkalmazás felhasználói felülete előugró ablakokat használ olyan helyzetekben, ahol a felhasználó figyelmére és gyorsműveletre van szüksége. Ezek nagyszerű példák arra, hogy az árnyék segítségével hierarchiát hozhat létre az alkalmazás felhasználói felületén.

A ThemeShadow automatikusan árnyékot vet, amikor egy előugró ablak bármely XAML-elemére alkalmazza. Árnyékot vet az alkalmazás háttértartalmaira, és az alatta lévő többi megnyitott előugró ablakra.

A ThemeShadow előugró elemekkel való használatához használja a Shadow tulajdonságot a ThemeShadow XAML-elemre való alkalmazásához. Ezután emelje fel az elemet a mögötte lévő többi elemből, például a tulajdonság z összetevőjének Translation használatával. A legtöbb előugró felhasználói felület esetében az alkalmazás háttértartalmaihoz képest ajánlott alapértelmezett magasság 32 effektív képpont.

Ez a példa egy téglalapot mutat be egy előugró ablakban, amely árnyékot vet az alkalmazás háttértartalmaira és a mögötte lévő egyéb előugró ablakokra:

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

Az alapértelmezett ThemeShadow letiltása egyéni úszóablak-vezérlők esetén

A Flyout, a DatePickerFlyout, a MenuFlyout vagy a TimePickerFlyout függvényen alapuló vezérlők automatikusan a ThemeShadow használatával árnyékot vetnek.

Ha az alapértelmezett árnyék nem tűnik helyesnek a vezérlő tartalmán, akkor letilthatja az IsDefaultShadowEnabled tulajdonság false beállításával a társított FlyoutPresenterre:

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

ThemeShadow más elemekben

Általában azt javasoljuk, hogy alaposan gondolja át az árnyék használatát, és korlátozza annak használatát azokra az esetekre, amikor értelmes vizuális hierarchiát vezet be. Azonban biztosítunk egy módot arra, hogy árnyékot vetjen bármely felhasználói felületi elemből, ha speciális forgatókönyvek szükségesek hozzá.

Ha olyan XAML-elemből szeretne árnyékot vetíteni, amely nem szerepel előugró ablakban, explicit módon meg kell adnia azokat az elemeket, amelyek megkaphatják az árnyékot a ThemeShadow.Receivers gyűjteményben. A fogadók nem lehetnek a vetítő vizuális fa ős elemei.

Ez a példa két téglalapot mutat be, amelyek árnyékot vetnek egy rácsra mögöttük:

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

Árnyék elvetése

A DropShadow nem biztosít beépített árnyékértékeket, és ezeket saját maga kell megadnia. Például implementációk: DropShadow osztály.

Melyik árnyékot használjam?

• Ne feledje, hogy az árnyék célja, hogy értelmes hierarchiát biztosítson, nem pedig egyszerű vizuális kezelésként.
• Általában a ThemeShadow használatát javasoljuk, amely konzisztens árnyékértékeket biztosít.
• A teljesítménnyel kapcsolatos aggodalmakért korlátozza az árnyékok számát, használjon más vizuális kezelést, vagy használja a DropShadow-t.
• Ha fejlettebb forgatókönyvekkel rendelkezik a vizualizációs hierarchia eléréséhez, fontolja meg más vizualizációs kezelés (például szín) használatát. Ha árnyékra van szükség, használja a DropShadow parancsot.

Kapcsolódó cikkek

• Emelés és rétegezés a Windows-ban
• Anyagok (Akril / Mica)