Aracılığıyla paylaş

Windows uygulamalarında gölgeler

Windows uygulamalar derinliği ifade etmek ve görsel hiyerarşi eklemek için gölgeler kullanır. Gölgeler, kullanıcının kullanıcı arabiriminizdeki en önemli öğelere odaklanmasını sağlayarak yükseltme görünümünün oluşturulmasına yardımcı olur.

Gölge, kullanıcının yükseltmeyi algılama yollarından biridir. Yükseltilmiş bir nesnenin üzerindeki ışık, aşağıdaki yüzeyde bir gölge oluşturur. Nesne ne kadar yüksek olursa gölge o kadar büyük ve yumuşak olur. Kullanıcı arabiriminizdeki yükseltilmiş nesnelerin gölgeleri olması gerekmez, ancak bunlar yükseltme görünümünün oluşturulmasına yardımcı olur.

Windows uygulamalarda gölgeler estetik değil amaca yönelik kullanılmalıdır. Çok fazla gölge kullanılması, gölgenin kullanıcıyı odaklama becerisini azaltır veya ortadan kaldırır.

Standart denetimler kullanıyorsanız, gölgeler kullanıcı arabiriminize zaten dahil edilmiştir. Ancak , ThemeShadow veya DropShadow API'lerini kullanarak kullanıcı arabiriminize gölgeleri el ile ekleyebilirsiniz.

ThemeShadow

ThemeShadow türü, x, y, z koordinatlarına göre uygun şekilde gölge çizmek için herhangi bir XAML öğesine uygulanabilir.

  • Z derinliği değerine göre öğelere gölge uygulayarak derinlik etkisi oluşturur.
  • Yerleşik gölge estetiği sayesinde gölgelerin tüm uygulamalarda tutarlı olmasını sağlar.

Bir MenuFlyout'ta ThemeShadow'un nasıl uygulandığı aşağıda verilmiştir. MenuFlyout, ana menüye ve tüm iç içe menülere 32 piksel derinliği uygulanmış yerleşik bir gölgeye sahiptir.

Üç açık, iç içe menü içeren bir MenuFlyout'a uygulanan ThemeShadow'un ekran görüntüsü.

WinUI Galerisi uygulamasını açın ve ThemeShadow'un nasıl çalıştığını görün

Ortak denetimlerde ThemeShadow

Aşağıdaki yaygın denetimler, aksi belirtilmedikçe 32 piksel derinliğindeki gölgeleri gölgelendirmek için ThemeShadow'ı otomatik olarak kullanır:

  • Bağlam menüsü, Komut çubuğu, Komut çubuğu açılır öğesi, MenuBar
  • İletişim kutuları ve açılır menüler (128px'te iletişim kutusu)
  • NavigationView (Gezinti Görünümü)
  • ComboBox (Kombinasyon Kutusu), DropDownButton (Açılır Düğme), SplitButton (Bölmeli Düğme), ToggleSplitButton (Aç/Kapa Bölmeli Düğme)
  • Öğretim İpucu
  • Otomatik Öneri Kutusu
  • Takvim/Tarih/Saat seçicileri
  • Araç ipucu (16 piksel)
  • Sayı Kutusu
  • TabView
  • Medya taşıma denetimi, InkToolbar
  • BreadcrumbBar
  • Bağlı animasyon

Açılan Pencerelerde ThemeShadow

Genellikle uygulamanızın kullanıcı arabirimi, kullanıcının dikkatinin ve hızlı eyleminin gerektiği senaryolar için bir açılır pencere kullanır. Bunlar, uygulamanızın kullanıcı arabiriminde hiyerarşi oluşturmaya yardımcı olmak için gölge kullanılması gereken harika örneklerdir.

ThemeShadow, açılır penceredeki herhangi bir XAML öğesine uygulandığında otomatik olarak gölgeler oluşturur. Arkasındaki uygulama arka plan içeriğine ve altındaki diğer açılır pencerelere gölge ekler.

Açılır Pencereler ile ThemeShadow kullanmak için, özelliğini kullanarak bir XAML öğesine ThemeShadow’u uygulayın. Ardından, özelliğinin z bileşenini kullanarak öğeyi arkasındaki diğer öğelerden, örneğin, yükseltin. Çoğu Açılır Kullanıcı Arabirimi için, uygulama arka plan içeriğine göre önerilen varsayılan yükseltme 32 etkin pikseldir.

Bu örnek, bir Açılır Penceredeki Dikdörtgenin uygulama arka plan içeriğine ve arkasındaki diğer Açılır Pencerelere gölge düşürdüğünü göstermektedir.

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

Gölgeli tek bir dikdörtgen açılır pencere.

Özel Açılır Pencere denetimlerinde varsayılan ThemeShadow'un devre dışı bırakılması

Flyout, DatePickerFlyout, MenuFlyout veya TimePickerFlyout tabanlı denetimler gölge oluşturmak için otomatik olarak ThemeShadow kullanır.

Denetiminizin içeriğinde varsayılan gölge doğru görünmüyorsa, ilişkili FlyoutPresenter üzerinde IsDefaultShadowEnabled özelliğini olarak ayarlayarak bu gölgeyi devre dışı bırakabilirsiniz:

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

Diğer öğelerde ThemeShadow

Uyarı

Windows 11'den başlayarak, uygulama Windows SDK 22000 veya sonraki bir sürümünü hedefliyorsa, Receivers koleksiyonu yoksayılır. Ancak hata olmaz ve gölge çalışmaya devam eder.

Genel olarak, gölge kullanımınız hakkında dikkatli düşünmenizi ve kullanımını anlamlı görsel hiyerarşisi sunduğu durumlarla sınırlamanızı öneririz. Ancak, bunu gerektiren gelişmiş senaryolarınız olması durumunda herhangi bir kullanıcı arabirimi öğesinden gölge oluşturmanın bir yolunu sunuyoruz.

Popup içinde olmayan bir XAML öğesinden gölge oluşturmak için, koleksiyonda gölgeyi alabilecek diğer öğeleri açıkça belirtmeniz gerekir. Alıcılar, görsel ağaçta atıcının bir atası olamaz.

Bu örnek, arkalarındaki bir Izgara üzerine gölgeler oluşturan iki Dikdörtgeni gösterir.

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

Yan yana iki turkuaz dikdörtgen, her ikisi de gölgeli.

Gölge

DropShadow yerleşik gölge değerleri sağlamaz ve bunları kendiniz belirtmeniz gerekir. Örnek uygulamalar için dropShadow sınıfına bakın.

Tavsiye

Windows 11'den başlayarak, uygulama Windows SDK 22000 veya sonraki bir sürümü hedeflediyse, ThemeShadow gölge gibi davranır. DropShadow kullanıyorsanız, bunun yerine ThemeShadow kullanmayı düşünebilirsiniz.

Hangi gölgeyi kullanmalıyım?

Mülkiyet ThemeShadow DropShadow
Minimum SDK SDK 18362 SDK 14393
Adaptasyon Evet Hayı
Özelleştirme Hayı Evet
Açık kaynak Hiç kimse Hiç kimse
3B ortamlarda desteklenir Evet (3B bir ortamda çalışırken gölgeler taklit edilir.) Hayı
  • Gölgenin amacının basit bir görsel işlem olarak değil anlamlı bir hiyerarşi sağlamak olduğunu unutmayın.
  • Genellikle tutarlı gölge değerleri sağlayan ThemeShadow kullanmanızı öneririz.
  • Performansla ilgili endişeler için gölge sayısını sınırlayın, diğer görsel işlemleri kullanın veya DropShadow kullanın.
  • Görsel hiyerarşisi elde etmek için daha gelişmiş senaryolarınız varsa, diğer görsel işlemleri (örneğin, renk) kullanmayı göz önünde bulundurun. Gölge gerekiyorsa DropShadow'ı kullanın.
  • Last updated on