Bilgi rozeti

Badging, bildirimleri görüntülemenin veya bir uygulama içindeki bir alana odaklanmanın (bildirimler, yeni içeriği gösteren veya uyarı göstermek) müdahaleci olmayan ve sezgisel bir yoludur. info badge, bir uygulamaya eklenebilen ve sayı, simge veya basit bir nokta görüntülenecek şekilde özelleştirilebilen küçük bir kullanıcı arabirimi parçasıdır.

info badge, XAML navigation view'e entegre edilmiştir, ancak XAML ağacında bağımsız bir öğe olarak da yer alabilir ve bu da size seçtiğiniz herhangi bir kontrol veya kullanıcı arabirimine bir info badge yerleştirme olanağı sağlar. info badgedışında bir yerde navigation view kullandığınızda, info badgene zaman gösterilip kapatılacağını ve info badgenereye yerleştirileceği program aracılığıyla belirlemek sizin sorumluluğunuzdadır.

Doğru kontrol bu mu?

Kullanıcının odağını uygulamanızın belirli bir alanına müdahalesiz bir şekilde getirmek istediğinizde bir info badge kullanılmalıdır. Bir info badge göründüğünde, kullanıcının bir alana odaklanmasını sağlamak ve ardından aktivitesine sorunsuz bir şekilde devam etmesine izin vermek için tasarlanmıştır. Kullanıcıya, info badge'in neden göründüğünün ayrıntılarına bakıp bakmama konusunda seçim yapma fırsatı sunar. Bilgi rozetleri yalnızca kapatılabilir ve kalıcı olmayan iletileri temsil etmelidir; bir info badge ne zaman görünebileceğine, kaybolabileceğine ve değişebileceğine dair belirli kurallara sahip olmalıdır.

Uygun info badge kullanımı örnekleri:

• Yeni iletilerin geldiğini belirtmek için.
• Yeni makalelerin okunabilecek durumda olduğunu belirtmek için.
• Sayfada yeni seçenekler olduğunu belirtmek için.
• Belirli bir sayfada uygulamanın çalışmasını engellemeyen bir öğeyle ilgili bir sorun olabileceğini belirtmek için.

Farklı bir denetim ne zaman kullanılmalıdır?

Bir info badge, kritik hataları görüntülemek veya anında eyleme ihtiyaç duyan son derece önemli iletileri iletmek için kullanılmamalıdır. Bilgi rozetleri, uygulamayı kullanmaya devam etmek için hemen etkileşime alınması gereken durumlarda kullanılmamalıdır.

Uygunsuz info badge kullanımı örnekleri:

• Uygulamayı kullanmaya devam etmeden önce uygulamanın içindeki bir sayfada ele alınması gereken acil bir konuyu belirtmek için. Bu senaryo için bir content dialogkullanın.
• Kullanıcının info badge'ı kapatmasının hiçbir yolu olmayan bir uygulamada görünmek. Bunun gibi kalıcı bir uyarı için info barkullanın.
• Kullanıcının odağını bir alana kalıcı bir şekilde getirmek için info badge kullanmak, info badge'i kapatmanın bir yolu olmadan yapılmaktadır.
• Uygulamanızda normal bir simge veya resim olarak bir info badge kullanma. Bunun yerine, uygun bir görüntü veya simge kullanın (bkz. IconElement ve IconSource).

info badgetürleri

Aşağıda gösterildiği gibi, aralarından seçim yapabileceğiniz üç info badge stili vardır: nokta, simgesive sayısal .

Nokta, simge ve sayısal Bilgi Rozetleri

Nokta info badge

Nokta info badge, 4 piksel çapında basit bir elipstir. Kenarlık yoktur ve metni veya içindeki başka bir şeyi tutması amaçlanmamıştır.

Kullanıcının odağını info badge'e yönlendirmek istediğiniz genel senaryolar için info badge noktasını kullanmalısınız; örneğin, yeni içerik veya güncellemelerin mevcut olduğunu belirtmek için.

Simge info badge

simge info badge içinde bir simge bulunan 16 piksel çapında bir elipstir. info badge, desteklenen simge türleri için esneklik sağlayan bir IconSource özelliği vardır.

Kullanıcının dikkatini çekmekle birlikte hızlı bir ileti göndermek için info badge simgesini kullanmalısınız; örneğin, kullanıcıyı engellemeyen bir şeyin yanlış gittiğini, ek önemli bir güncelleştirmenin mevcut olduğunu veya uygulamada belirli bir şeyin etkin olduğunu (geri sayım süreölçerinin devam etmesi gibi) uyarmak için kullanmanız gerekir.

'nüzün IconSource'si için bir info badge kullanmak istiyorsanız, bit eşleminin info badge içine sığmasını sağlamak sizin sorumluluğunuzdadır (simgenin boyutunu veya info badge'in boyutunu değiştirerek).

Sayısal info badge

Sayısal info badge, info badgesimgesiyle aynı şekil ve boyuta sahiptir, ancak içinde Değer özelliği tarafından belirlenen bir sayı tutar. Sayılar tamsayı olmalı ve sıfırdan büyük veya sıfıra eşit olmalıdır. Gösterilen sayı birden fazla basamağa ulaştığında, info badge genişliği düzgün bir animasyonla otomatik olarak genişler.

Yeni e-postalar veya iletiler gibi dikkat edilmesi gereken belirli sayıda öğe olduğunu göstermek için sayısal info badge kullanmanız gerekir.

Önceden ayarlanmış info badge stilleri

info badge'in kullanıldığı en yaygın senaryoları desteklemeye yardımcı olmak amacıyla, denetim, yerleşik olarak önceden ayarlanmış info badge stillerini içerir. info badge istediğiniz renk/simge/sayı bileşimini kullanacak şekilde özelleştirebilirsiniz ancak bu yerleşik ön ayarlar, info badge erişilebilirlik yönergeleriyle uyumlu olduğundan ve simge ve sayı boyutlandırma açısından orantılı olduğundan emin olmak için hızlı bir seçenektir.

info badgeiçin aşağıdaki stil ön ayarları kullanılabilir:

Dikkat

• AttentionDotInfoBadgeStyle
• AttentionIconInfoBadgeStyle
• AttentionValueInfoBadgeStyle

Informational

• InformationalDotInfoBadgeStyle
• InformationalIconInfoBadgeStyle
• InformationalValueInfoBadgeStyle

Success

• SuccessDotInfoBadgeStyle
• SuccessIconInfoBadgeStyle
• SuccessValueInfoBadgeStyle

Dikkat

• CautionDotInfoBadgeStyle
• CautionIconInfoBadgeStyle
• CautionValueInfoBadgeStyle

Critical

• CriticalDotInfoBadgeStyle
• CriticalIconInfoBadgeStyle
• CriticalValueInfoBadgeStyle

Bir stil bir info badge üzerine ayarlanırsa ve çakışan bir özellik de ayarlanırsa, bu özellik stilin çakışan kısmını geçersiz kılar, ancak çakışmayan stil unsurları uygulanmaya devam eder.

Örneğin, CriticalIconInfoBadgeStyle'ı bir info badge'e uygulayıp aynı zamanda InfoBadge.Value = "1"'yi ayarlarsanız, önceden ayarlanmış simgeyi görüntülemek yerine, "Kritik" arka plan rengine sahip ve içinde 1 sayısını gösteren bir info badge elde edersiniz.

Bu örnek, info badge önceden ayarlanmış stilin rengini ve simgesini alan bir oluşturur.

<InfoBadge Style="{ThemeResource AttentionIconInfoBadgeStyle}"/>

Mavi

Erişilebilirlik

info badge denetiminin herhangi bir ekran okuyucu işlevi veya kullanıcı arabirimi otomasyonu (UIA) kendi başına yerleşik değildir, denetim odaklanılabilir değildir ve etkileşime alınamaz.

bir info badgeiçinde navigation view kullanıyorsanız, navigation view yerleşik ekran okuyucu ve yardımcı teknoloji desteği sağlar. Bir navigation view sekmeyle gezindiğinizde ve üzerinde navigation view bulunan bir info badge öğeye geçtiğinde, ekran okuyucu bu öğede bir info badge olduğunu duyurur. Söz konusu info badge sayısalsa, ekran okuyucu da info badgedeğerini duyurur.

info badgedışında bir navigation view kullanıyorsanız uygulamanızın tam olarak erişilebilir olduğundan emin olmak için aşağıdakileri öneririz:

• info badge üst öğesi, sekmeyle odaklanabilir ve erişilebilir olmalıdır.
• Üst öğe, info badge ekran okuyuculara duyurur.
• uygulama, info badge ilk kez görüntülendiğinde bir UIA bildirimi gönderir.
• Kullanıcı arabiriminden bir info badge kaybolduğunda uygulama bir UIA bildirimi gönderir.
• Uygulama, mevcut bir info badgeile önemli bir değişiklik gerçekleştiğinde bir UIA bildirimi gönderir.
  • "Önemli değişiklik" tanımı bireysel geliştirici olarak size bağlı. Buna örnek olarak şunlar verilebilir: farklı türler arasında geçiş yapan bir info badge, durumunu göstermek için rengini değiştiren bir info badge veya değeri belirli bir önemli sayıyı aşan bir info badge.

Üst öğenin ekran okuyuculara ne duyurabileceğini denetlemek için AutomationProperties sınıfının ekli özelliklerini kullanabilirsiniz. info badgeiçin, üst öğede AutomationProperties.FullDescription veya AutomationProperties.ItemStatus ekli özellikleri ayarlamanız önerilir.

info badgegörünmesi veya kapatılması durumunda UIA bildirimleri göndermek için AutomationPeer.RaiseAutomationEvent yöntemini kullanabilirsiniz.

info badge, erişilebilirlik gereksinimlerini karşılayan varsayılan bir boyutta gelir. yükseklik/genişlik/renk vb. dahil olmak üzere info badge birçok yönünü özelleştirebilirsiniz, ancak varsayılan info badge boyut ve renk için erişilebilirlik yönergelerimize uyması önemlidir.

InfoBadge oluşturma

Önemli

Bazı bilgiler, yayımlanmadan önce önemli ölçüde değiştirilebilen yayın öncesi ürünle ilgilidir. Microsoft, burada sağlanan bilgilerle ilgili olarak açık veya zımni hiçbir garanti vermez.

• Önemli API'ler:InfoBadge sınıfı, IconSource özelliği, Value özelliği

WinUI 3 Galeri uygulamasını açın ve InfoBadge'in nasıl çalıştığını görün

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

XAML'de veya kodda bir InfoBadge oluşturabilirsiniz. Oluşturduğunuz InfoBadge türü, ayarladığınız özelliklere göre belirlenir.

Nokta

Noktalı InfoBadge oluşturmak için, varsayılan InfoBadge denetimini hiçbir özellik ayarsız kullanın.

<InfoBadge />

İkon

InfoBadge simgesi oluşturmak için IconSource özelliğini ayarlayın.

<InfoBadge x:Name="SyncStatusInfoBadge">
    <InfoBadge.IconSource>
        <SymbolIconSource Symbol="Sync"/>
    </InfoBadge.IconSource>
</InfoBadge>

Numeric

Sayısal bir InfoBadge oluşturmak için Value özelliğini ayarlayın.

<InfoBadge x:Name="EmailInfoBadge" Value="{x:Bind numUnreadMail}"/>

Çoğu senaryoda, InfoBadge'ın Value özelliğini uygulamanızın arka ucundaki değişen bir tamsayı değerine bağlarsınız; böylece InfoBadge'ı belirli bir değere göre kolayca artırabilir/daraltabilir ve gösterebilirsiniz/gizleyebilirsiniz.

Uyarı

hem Icon hem de Value özellikleri ayarlanırsa, Value özelliği önceliklidir ve InfoBadge sayısal bir InfoBadge olarak görünür.

NavigationView'da InfoBadge Kullanma

Uygulamanızda NavigationView kullanıyorsanız, uygulama genelinde bildirimleri ve uyarıları göstermek için NavigationView'da bir InfoBadge kullanmanızı öneririz. InfoBadge öğesini bir NavigationViewItem üzerine yerleştirmek için InfoBadge nesnesini NavigationViewItem.InfoBadge özelliğine atayın.

Left-Expanded modunda InfoBadge, NavigationViewItem'ın kenarına doğru hizalanmış olarak görünür.

Sol genişletilmiş bir NavigationView

Left-Compact modunda, InfoBadge simgenin sağ üst köşesinde üst üste bindirilmiş olarak görünür.

Üst modda InfoBadge, genel öğenin sağ üst köşesine hizalanır.

Üst mod NavigationView, InfoBadgeTop mode NavigationView with an InfoBadge, Top mode NavigationView with an InfoBadgeile,,

Aynı NavigationView'da bir NavigationViewItem'a sayısal InfoBadge ve başka bir NavigationViewItem'a noktalı InfoBadge ekleme gibi farklı infobadges türlerini tek bir NavigationView'da kullanmamanızı öneririz.

Örnek: NavigationView'de sayısal InfoBadge'i artırma

Bu örnek, bir e-posta uygulamasının gelen kutusundaki yeni e-posta sayısını görüntülemek ve yeni bir ileti alındığında InfoBadge'da gösterilen sayıyı artırmak için NavigationView'da InfoBadge'ı nasıl kullanabileceğinin benzetimini yapar.

<NavigationView SelectionChanged="NavigationView_SelectionChanged">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Home" Icon="Home"/>
        <NavigationViewItem Content="Account" Icon="Contact"/>
        <NavigationViewItem x:Name="InboxPage" Content="Inbox" Icon="Mail">
            <NavigationViewItem.InfoBadge>
                <InfoBadge x:Name="bg1"
                                Value="{x:Bind mailBox.NewMailCount, Mode=OneWay}"
                                Visibility="{x:Bind mailBox.HasNewMail, Mode=OneWay}"/>
            </NavigationViewItem.InfoBadge>
        </NavigationViewItem>
    </NavigationView.MenuItems>
    <Frame x:Name="contentFrame" />
</NavigationView>

public sealed partial class MainWindow : Window
{
    MailBox mailBox = new MailBox();

    public MainWindow()
    {
        this.InitializeComponent();

    }

    private void NavigationView_SelectionChanged(NavigationView sender,
                               NavigationViewSelectionChangedEventArgs args)
    {
        if (args.SelectedItem == InboxPage)
        {
            mailBox.ResetNewMailCount();
        }
        else
        {
            mailBox.CheckMail();
        }
    }
}

public class MailBox : DependencyObject
{
    DispatcherQueueTimer timer;

    // Dependency Properties for binding.
    public int NewMailCount
    {
        get { return (int)GetValue(NewMailCountProperty); }
        set { SetValue(NewMailCountProperty, value); }
    }
    public static readonly DependencyProperty NewMailCountProperty =
        DependencyProperty.Register("NewMailCount", typeof(int), typeof(MailBox), new PropertyMetadata(0));

    public bool HasNewMail
    {
        get { return (bool)GetValue(HasNewMailProperty); }
        set { SetValue(HasNewMailProperty, value); }
    }
    public static readonly DependencyProperty HasNewMailProperty =
        DependencyProperty.Register("HasNewMail", typeof(bool), typeof(MailBox), new PropertyMetadata(false));

    public MailBox()
    {
        timer = this.DispatcherQueue.CreateTimer();
        timer.Interval = new TimeSpan(15000000);
        timer.Tick += (s, e) =>
        {
            NewMailCount++;
            if (HasNewMail == false) { HasNewMail = true; }
        };
        timer.Start();
    }

    public void ResetNewMailCount()
    {
        NewMailCount = 0;
        HasNewMail = false;
        timer.Stop();
    }

    public void CheckMail()
    {
        timer.Start();
    }
}

17 sayısını görüntüleyen Gelen Kutusu öğesinde InfoBadge ile NavigationView

NavigationView'da Hiyerarşi

hiyerarşik NavigationViewvarsa, NavigationViewItem'ler diğer NavigationViewItem'ler içinde iç içe yerleşmişse, üst öğeler yukarıda açıklandığı gibi aynı tasarım/yerleştirme desenlerini izler.

Üst NavigationViewItem ve alt NavigationViewItem'ların her birinin kendi InfoBadge özelliği olacaktır. Ebeveynin InfoBadge değerini, çocukların InfoBadge değerlerini belirleyen faktörlere bağlayabilirsiniz. Örneğin, ebeveynin InfoBadge'ında çocukların sayısal InfoBadge değerlerinin toplamını gösterebilirsiniz.

Bu görüntüde, PaneDisplayMode değerinin Üst olarak ayarlandığı hiyerarşik bir NavigationView gösterilir. Burada en üst düzeydeki öğede sayısal bir bilgi rozeti gösterilir. Uygulama, üst öğe InfoBadge'ı alt öğelerin InfoBadges'lerinde görüntülenen öğeleri temsil edecek şekilde ayarlamıştır çünkü alt öğeler şu anda genişletilmemiştir (ve bu nedenle görünmez).

Başka bir denetimde InfoBadge kullanma

Uygulamanızdaki NavigationView dışındaki öğelerde uyarılar veya bildirimler göstermek isteyebilirsiniz. Özel dikkat gerektiren bir ListViewItem veya bildirim görüntüleyen bir menü öğeniz olabilir. Bu gibi durumlarda InfoBadge'ı diğer denetimlerle doğrudan kullanıcı arabiriminizle tümleştirebilirsiniz.

InfoBadge bir UIElement olduğundan paylaşılan kaynak olarak kullanılamaz.

Bunu yapmak için, InfoBadge'ı herhangi bir denetim gibi kullanın – görünmesini istediğiniz yere InfoBadge işaretlemesini basitçe ekleyin. InfoBadge, Denetimidevraldığından, InfoBadge'ınızı tam olarak istediğiniz yere konumlandırmak için kullanabileceğiniz kenar boşluğu, hizalama, doldurma ve daha fazlası gibi tüm yerleşik konumlandırma özelliklerine sahiptir.

Düğmesi veya ListViewItemgibi başka bir denetimin içine InfoBadge yerleştirirseniz, üst denetimin sınırlayıcı kutusunun ötesine genişletecek şekilde konumlandırırsanız büyük olasılıkla kırpılır. InfoBadge'ınız başka bir denetimin içindeyse, denetimin sınırlayıcı kutusunun genel sınırlarının ötesine konumlandırılmamalıdır.

Örnek: InfoBadge'i başka bir denetimin içine yerleştirme

Burada sağ üst köşesine infobadge yerleştirilmiş ve içeriğin üzerine yerleştirilmiş rozet bulunan bir Düğme yer alır. Bu örnek, Düğme dışında birçok denetime de uygulanabilir; yalnızca başka bir WinUI 3 denetiminin içine InfoBadge yerleştirmeyi, konumlandırmayı ve göstermeyi gösterir.

<Button Width="200" Height="60" Padding="4"
        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid>
        <SymbolIcon Symbol="Sync"/>
        <InfoBadge x:Name="buttonInfoBadge"
                        Background="#C42B1C"
                        HorizontalAlignment="Right" 
                        VerticalAlignment="Top"
                        Width="16" Height="16">
            <InfoBadge.IconSource>
                <FontIconSource Glyph="&#xEA6A;"/>
            </InfoBadge.IconSource>
        </InfoBadge>
    </Grid>
</Button>

InfoBadge'i Yönetme

InfoBadge genellikle geçici bir uyarı görüntüler, bu nedenle bunu göstermek veya gizlemek ve uygulamanız çalışırken düzenli aralıklarla stilini değiştirmek yaygın bir durumdur.

InfoBadge'ı gösterme ve gizleme

Bir InfoBadge'ı kullanıcı eylemlerine, program mantığına, sayaçlara vb. göre göstermek ve gizlemek için Görünürlük özelliğini veya Opacity özelliğini kullanabilirsiniz.

Diğer UIElement'lerde olduğu gibi, Visibility.Collapsed ayarlandığında InfoBadge düzeninizde yer kaplamaz, bu nedenle diğer öğelerin gösterildiğinde ve gizlendiğinde gezinmesine neden olabilir.

Yeniden konumlandırılan öğeler önemliyse, InfoBadge'ı göstermek ve gizlemek için Opacity özelliğini kullanabilirsiniz. Opacity varsayılan olarak 1.0 olarak ayarlanır; InfoBadge'ı gizlemek için 0 olarak ayarlayabilirsiniz. Opacity özelliğini kullandığınızda, InfoBadge şu anda gizli olsa bile düzende yer kaplamaya devam eder.

InfoBadge stilini değiştirme

InfoBadge görüntülenirken görüntülenen simgeyi veya sayıyı değiştirebilirsiniz. Kullanıcı eylemine dayalı olarak sayısal InfoBadge değerini azaltma veya artırma işlemi, InfoBadge.Valuedeğeri değiştirilerek gerçekleştirilebilir. InfoBadge simgesi, InfoBadge.IconSource'ı yeni bir IconSource nesnesi olarak ayarlayarak değiştirilebilir. Simgeleri değiştirirken, jarring görsel efektini önlemek için yeni simgenin eski simgeyle aynı boyutta olduğundan emin olun.

Varsayılan davranış

InfoBadge.Value veya InfoBadge.IconSource ayarlı değilse, InfoBadge varsayılan olarak bir nokta gösterir (özellikle Value-1 olarak ayarlanırsa ve IconSource varsayılan değerler olan nullolarak ayarlanır). Hem Value hem de IconSource özellikleri ayarlanırsa, InfoBadge Value özelliğini kabul eder ve bir sayı değeri görüntüler.

InfoBadge'ın türünü gösterilirken de değiştirebilirsiniz. InfoBadge türünü değiştirmek için, geçerli türün karşılık gelen özelliğinin (Value veya IconSource) varsayılan değerine (-1 veya null) ayarlandığından ve yeni türün özelliğini uygun bir değere eşit olarak ayarladığınızdan emin olun. InfoBadge türünü sayısal veya simgeden nokta türü InfoBadge olarak değiştirmek için, InfoBadge.Value-1 ve InfoBadge.IconSourcenullolarak ayarlandığından emin olun.

InfoBadge'ınızı nasıl konumlandırdığınıza bağlı olarak, bunun InfoBadge'ın boyutu ve şekli değiştikçe öğelerin değişmesine neden olabileceğini unutmayın.

İlgili makaleler

• NavigationView (Gezinti Görünümü)