Cienie w aplikacjach Windows

Windows aplikacje używają cieni do wyrażania głębokości i dodawania hierarchii wizualizacji. Cienie pomagają w tworzeniu wyglądu wysokości, kierując uwagę użytkownika na najważniejsze elementy interfejsu użytkownika.

Cień jest jednym ze sposobów, w jakie użytkownik postrzega podniesienie wizualne. Światło nad podwyższonym obiektem tworzy cień na powierzchni poniżej. Im wyższy obiekt, tym większy i łagodniejszy staje się cień. Podniesione obiekty w interfejsie użytkownika nie muszą posiadać cieni, ale pomagają w tworzeniu wyglądu podniesienia.

W Windows aplikacjach cienie powinny być używane w celowy, a nie estetyczny sposób. Użycie zbyt wielu cieni spowoduje zmniejszenie lub wyeliminowanie możliwości cienia, aby skoncentrować użytkownika.

Jeśli używasz standardowych kontrolek, cienie są już włączone do interfejsu użytkownika. Można jednak ręcznie uwzględnić cienie w interfejsie użytkownika przy użyciu interfejsu API ThemeShadow lub DropShadow .

Motyw Przyćmień

Typ ThemeShadow można zastosować do dowolnego elementu XAML, aby odpowiednio narysować cienie na podstawie współrzędnych x, y, z.

• Stosuje cienie do elementów na podstawie wartości głębokości z, emulując głębokość.
• Dzięki wbudowanej estetyce cieni zapewnia spójność we wszystkich i pomiędzy aplikacjami.

Oto jak ThemeShadow został zaimplementowany w menu rozwijanym. MenuFlyout ma wbudowany cień o głębokości 32 piksele, zastosowany do menu głównego i wszystkich menu zagnieżdżonych.

"ThemeShadow" w standardowych kontrolkach

Następujące typowe kontrolki będą automatycznie używać kontrolki ThemeShadow do rzutowania cieni z głębokości 32 pikseli, chyba że określono inaczej:

• Menu kontekstowe, Pasek poleceń, Wysuwane menu paska poleceń, MenuBar
• Okna dialogowe i wysuwane (Okno dialogowe o rozmiarze 128 pikseli)
• Widok nawigacji
• ComboBox, DropDownButton, SplitButton, ToggleSplitButton
• Etykietka nauczania
• AutosuggestBox
• Selektory kalendarza/daty/godziny
• Etykietka narzędzia (16 pikseli)
• Pole liczbowe
• TabView
• Kontrola transportu multimediów, InkToolbar
• Pasek okruszków
• Połączona animacja

ThemeShadow w oknach podręcznych

Często zdarza się, że interfejs użytkownika aplikacji używa wyskakującego okienka w scenariuszach, w których potrzebujesz uwagi użytkownika i szybkiej akcji. Są to doskonałe przykłady, gdy cień powinien służyć do tworzenia hierarchii w interfejsie użytkownika aplikacji.

ThemeShadow automatycznie rzuca cienie po zastosowaniu do dowolnego elementu XAML w Popup. Spowoduje to rzutowanie cieni na zawartość tła aplikacji oraz na wszystkie inne otwarte okna podręczne poniżej.

Aby użyć ThemeShadow z okienkami podręcznymi, użyj właściwości Shadow, aby zastosować ThemeShadow do elementu XAML. Następnie unieś element ponad innymi elementami znajdującymi się za nim, na przykład używając składnika z właściwości Translation. W przypadku większości interfejsu użytkownika menu podręcznego zalecana domyślna wysokość w stosunku do zawartości tła aplikacji to 32 efektywne piksele.

W tym przykładzie pokazano prostokąt w oknie podręcznym, który rzuca cień na zawartość tła aplikacji oraz na inne okna podręczne znajdujące się za nim.

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

Wyłączanie domyślnego elementu ThemeShadow w niestandardowych kontrolkach Flyout.

Kontrolki oparte na Flyout, DatePickerFlyout, MenuFlyout lub TimePickerFlyout automatycznie używają ThemeShadow do rzutowania cienia.

Jeśli domyślny cień nie wygląda poprawnie na zawartości kontrolki, możesz ją wyłączyć, ustawiając właściwość false na skojarzoną kontrolkę FlyoutPresenter:

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

ThemeShadow w innych elementach

Ogólnie rzecz biorąc, zachęcamy do starannego myślenia o użyciu cienia i ograniczenia jego użycia do przypadków, w których wprowadza znaczącą hierarchię wizualną. Jednak udostępniamy sposób rzutowania cienia z dowolnego elementu interfejsu użytkownika na wypadek, gdy masz zaawansowane scenariusze, które ich wymagają.

Aby element XAML rzucał cień, gdy nie znajduje się w oknie podręcznym, należy jawnie określić inne elementy, które mogą przyjmować ten cień w kolekcji ThemeShadow.Receivers. Odbiorniki nie mogą być przodkiem rzutownika w drzewie wizualnym.

Na tym przykładzie pokazano dwa prostokąty, które rzucają cienie na siatkę umieszczoną 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);

Cień

Funkcja DropShadow nie udostępnia wbudowanych wartości cieni i musisz je określić samodzielnie. Na przykład implementacje zobacz klasę DropShadow .

Którego cienia należy użyć?

• Należy pamiętać, że celem cienia jest zapewnienie znaczącej hierarchii, a nie jako prostego zabiegu wizualnego.
• Ogólnie rzecz biorąc, zalecamy użycie elementu ThemeShadow, który zapewnia spójne wartości w tle.
• W przypadku obaw dotyczących wydajności należy ograniczyć liczbę cieni, użyć innego leczenia wizualnego lub użyć funkcji DropShadow.
• Jeśli masz bardziej zaawansowane scenariusze do osiągnięcia hierarchii wizualnej, rozważ użycie innego leczenia wizualnego (na przykład kolor). Jeśli cień jest potrzebny, użyj funkcji DropShadow.

Powiązane artykuły

• Podniesienie uprawnień i warstwowanie w Windows
• Materiały (akrylowe / mica)