Bilgi Çubuğu

InfoBar denetimi, yüksek oranda görünür ancak müdahaleci olmayan kullanıcılara uygulama genelinde durum iletileri görüntülemeye yöneliktir. Gösterilen ileti türünü ve kendi eylem çağrısınızı veya köprü düğmesini ekleme seçeneğini kolayca belirtmek için yerleşik Önem Derecesi düzeyleri vardır. Bilgi Çubuğu diğer kullanıcı arabirimi içeriğiyle satır içi olduğundan, denetimin kullanıcı tarafından her zaman görünür veya kapatılmış olması seçeneği vardır.

Doğru kontrol bu mu?

Bir kullanıcıya, değiştirilen bir uygulama durumu hakkında bilgi verilmesi, onaylanması veya eylemde bulunılması gerektiğinde InfoBar denetimi kullanın. Varsayılan olarak, bildirim kullanıcı tarafından kapatılana kadar içerik alanında kalır ancak kullanıcı akışını kesmesi gerekmez.

InfoBar düzeninizde yer kaplar ve diğer alt öğeler gibi davranır. Diğer içerikleri örtmez veya üstünde kalmaz.

Uygulamanın durumunu değiştirmeyen bir kullanıcı eylemini onaylamak veya yanıtlamak, zamana duyarlı uyarılar veya temel olmayan iletiler için InfoBar denetimi kullanmayın.

Açıklamalar

Uygulama algısını veya deneyimini doğrudan senaryolar için durum çözümlendiğinde veya kullanıcı tarafından kapatılan bir InfoBar kullanın.

Aşağıda bazı örnekler verilmiştir:

• İnternet bağlantısı kesildi
• Belge otomatik olarak tetiklendiğinde kaydedilirken hata oluştu, belirli bir kullanıcı eylemiyle ilgili değil
• Kaydetmeye çalışırken mikrofon takılı değil
• Uygulama aboneliğinin süresi doldu

Uygulama algısını veya deneyimini dolaylı olarak senaryolar için kullanıcı tarafından kapatılan bir InfoBar kullanın

Aşağıda bazı örnekler verilmiştir:

• Arama kaydedilmeye başladı
• Uygulanan güncellemeye 'Sürüm Notları' bağlantısı eklendi.
• Hizmet koşulları güncelleştirildi ve onay gerekiyor
• Uygulama genelinde yedekleme başarıyla, asenkron olarak tamamlandı.
• Uygulamanın aboneliğinin süresi dolmak üzere

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

ContentDialog, Flyout veya TeachingTip'in daha uygun olduğu bazı senaryolar vardır.

• Kalıcı bir bildirime ihtiyaç duyulmayan senaryolar, örneğin belirli bir kullanıcı arabirimi öğesi bağlamında bilgi görüntülemek için, bir Flyout daha iyi bir seçenektir.
• Uygulamanın bir kullanıcı eylemini onayladığı, kullanıcının okuması gereken bilgileri gösteren senaryolar için contentdialog kullanın.
  • Ayrıca, uygulamada bir durum değişikliği o kadar ciddiyse ki kullanıcının uygulamayla daha fazla etkileşim kurma yeteneğini engellemesi gerekiyorsa, ContentDialog kullanın.
• Bildirimin geçici bir öğretim anı olduğu senaryolarda Öğretim İpucu daha iyi bir seçenektir.

Doğru bildirim denetimini seçme hakkında daha fazla bilgi için İletişim Kutuları ve Açılır Menüler makalesine bakın.

Recommendations

Kullanılabilirliğe Girme ve Kullanılabilirlikten Çıkma

Yanıp sönen içerik

Ekranda yanıp sönmesini önlemek için Bilgi Çubuğu görünmemeli ve görünümden hızla kaybolmamalıdır. Fotoğraflara duyarlı kişiler için yanıp sönen görsellerden kaçının ve uygulamanızın kullanılabilirliğini geliştirin.

Uygulama durumu koşuluyla görünüme otomatik olarak giren ve görünümden çıkan InfoBar'lar için, içeriğin bir satırda hızla veya birden çok kez görünmesini veya kaybolmasını önlemek için uygulamanıza mantık eklemeniz önerilir. Ancak, genel olarak, bu denetim uzun süreli durum iletileri için kullanılmalıdır.

Bilgi Çubuğunu Güncelleştirme

Denetim açıldıktan sonra, iletiyi veya Önem Derecesini güncelleştirme gibi çeşitli özelliklerde yapılan değişiklikler bildirim olayı oluşturmaz. InfoBar'ın güncelleştirilmiş içeriğinin ekran okuyucularını kullanan kullanıcıları bilgilendirmek isterseniz, olayı tetikleyebilmek için denetimi kapatıp yeniden açmanızı öneririz.

satır içi iletileri içeriği sıfırlama

Diğer kullanıcı arabirimi içeriğiyle satır içi olan InfoBar'lar için, sayfanın geri kalanının öğenin eklenmesine nasıl tepki göstereceğini unutmayın.

Önemli bir yüksekliğe sahip InfoBar'lar sayfadaki diğer öğelerin düzenini önemli ölçüde değiştirebilir. Bilgi Çubuğu özellikle art arda hızla görünür veya kaybolursa, kullanıcı değişen görsel durumuyla karıştırılabilir.

Renk ve Simge

Renk ve simgeyi önceden ayarlanmış Önem Derecesi düzeylerinin dışında özelleştirirken, standart simgeler ve renkler kümesinden gelen çağrışımlar için kullanıcı beklentilerini göz önünde bulundurun.

Ayrıca, önceden ayarlanmış Önem Derecesi renkleri tema değişiklikleri, yüksek karşıtlık modu, renk karışıklığı erişilebilirliği ve ön plan renkleri ile karşıtlık için zaten tasarlanmıştır. Mümkün olduğunda bu renkleri kullanmanızı ve çeşitli renk durumlarına ve erişilebilirlik özelliklerine uyum sağlamak için uygulamanıza özel mantık eklemeniz önerilir.

İletinizin kullanıcılar tarafından açıkça iletildiğinden ve erişilebilir olduğundan emin olmak için lütfen Standart Simgeler ve Renk için UX kılavuzunu görüntüleyin.

Severity

Başlık, İleti veya özel içerikte iletilenen bilgilerle eşleşmeyen bir bildirim için Önem Derecesi özelliğini ayarlamaktan kaçının.

Eşlik eden bilgiler, bu Önem Derecesini kullanmak için aşağıdakileri iletmeyi hedeflemelidir.

• Hata: Oluşan bir hata veya sorun.
• Uyarı: Gelecekte bir soruna neden olabilecek bir koşul.
• Başarı: Uzun süre çalışan bir ve/veya arka plan görevi tamamlandı.
• Varsayılan: Kullanıcının dikkatini gerektiren genel bilgiler.

Bildiriminizin anlamını belirten tek kullanıcı arabirimi bileşenleri simgeler ve renk olmamalıdır. Bilgileri görüntülemek için bildirimin Başlığındaki ve/veya İletideki metinler eklenmelidir.

Message

Bildiriminizdeki metinler tüm dillerde sabit bir uzunluk olmayacaktır. Başlık ve İleti özelliği için bu, bildiriminizin ikinci bir satıra genişletilip genişletmeyeceğini etkileyebilir. İleti uzunluğuna veya belirli bir dile ayarlanmış diğer kullanıcı arabirimi öğelerine göre konumlandırmaktan kaçınmanızı öneririz.

Bildirim, sağdan sola (RTL) veya soldan sağa (LTR) dillere yerelleştirildiğinde standart yansıtma davranışını izler. Simge yalnızca yönsellik varsa yansıtılır.

Lütfen Düzeni ve yazı tiplerini ayarlama kılavuzunu görüntüleyin ve bildiriminizdeki metin yerelleştirmesi hakkında daha fazla bilgi için RTL'yi destekleyin.

Bilgi Çubuğu Oluşturma

• Önemli API'ler:InfoBar sınıfı

WinUI 3 Galeri uygulamasını açın ve InfoBar'ı çalışır durumda görün

WinUI 3 Galeri uygulaması çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

Aşağıdaki XAML' de, bilgilendirme bildirimi için varsayılan stile sahip bir satır içi Bilgi Çubuğu açıklanmaktadır. Diğer öğeler gibi bir bilgi çubuğu da yerleştirilebilir ve temel düzen davranışını izler. Örneğin, dikey bir StackPanel'de Bilgi Çubuğu yatay olarak genişleterek kullanılabilir genişliği doldurur.

Varsayılan olarak, Bilgi Çubuğu görünmez. Bilgi Çubuğu'nu görüntülemek için XAML veya arkasındaki kodda IsOpen özelliğini true olarak ayarlayın.

<InfoBar x:Name="UpdateAvailableNotification"
    Title="Update available."
    Message="Restart the application to apply the latest update.">
</InfoBar>

public MainPage()
{
    this.InitializeComponent();

    if(IsUpdateAvailable())
    {
        UpdateAvailableNotification.IsOpen = true;
    }
}

Önceden tanımlanmış önem derecesi düzeylerini kullanma

Bilgi çubuğunun türü Önem Derecesi özelliği aracılığıyla, bildirimin kritikliğine bağlı olarak tutarlı bir durum rengi, simgesi ve yardımcı teknoloji ayarlarını otomatik olarak ayarlamak için ayarlanabilir. Önem Derecesi ayarlanmadıysa, varsayılan bilgi stili uygulanır.

<InfoBar x:Name="SubscriptionExpiringNotification"
    Severity="Warning"
    Title="Your subscription is expiring in 3 days."
    Message="Renew your subscription to keep all functionality" />

InfoBar'da programlı kapatma

InfoBar, kapat düğmesi veya program aracılığıyla kullanıcı tarafından kapatılabilir. Durum çözülene kadar bildirimin görüntüde olması gerekiyorsa ve kullanıcının bilgi çubuğunu kapatma becerisini kaldırmak istiyorsanız, IsClosable özelliğini false olarak ayarlayabilirsiniz.

Bu özelliğin varsayılan değeri true değeridir; bu durumda kapat düğmesi bulunur ve 'X' biçiminde olur.

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working."
    IsClosable="False" />

Özelleştirme: Arka plan rengi ve simgesi

Önceden tanımlanmış önem derecesi düzeylerinin dışında, Background ve IconSource özellikleri simgeyi ve arka plan rengini özelleştirmek için ayarlanabilir. Bilgi Çubuğu, tanımlanan önem derecesinin yardımcı teknoloji ayarlarını veya tanımlı değilse varsayılan ayarları korur.

Standart Background özelliği aracılığıyla özel bir arka plan rengi ayarlanabilir ve bu, önem derecesi tarafından ayarlanan rengi geçersiz kılacaktır. Kendi renginizi ayarlarken içerik okunabilirliğini ve erişilebilirliğini unutmayın.

IconSource özelliği aracılığıyla özel bir simge ayarlanabilir. Varsayılan olarak, bir simge görünür (denetimin daraltılmadığı varsayılır). Bu simge, IsIconVisible özelliği false olarak ayarlanarak kaldırılabilir. Özel simgeler için önerilen simge boyutu 20 pikseldir.

<InfoBar x:Name="CallRecordingNotification"
    Title="Recording started"
    Message="Your call has begun recording."
    Background="{StaticResource LavenderBackgroundBrush}">
    <InfoBar.IconSource>
        <SymbolIconSource Symbol="Phone" />
    </InfoBar.IconSource>
</InfoBar>

Eylem ekle düğmesi

ButtonBase'i devralan kendi düğmenizi tanımlayıp ActionButton özelliğinde ayarlayarak ek bir eylem düğmesi eklenebilir. Tutarlılık ve erişilebilirlik için Düğme ve KöprüDüğmesi türünde eylem düğmelerine özel stil uygulanır. ActionButton özelliğinin yanı sıra, özel içerik aracılığıyla ek eylem düğmeleri eklenebilir ve iletinin altında görünür.

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working.">
    <InfoBar.ActionButton>
        <Button Content="Network Settings" Click="InternetInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

<InfoBar x:Name="TermsAndConditionsUpdatedNotification"
    Title="Terms and Conditions Updated"
    Message="Dismissal of this message implies agreement to the updated Terms and Conditions. Please view the changes on our website.">
    <InfoBar.ActionButton>
        <HyperlinkButton Content="Terms and Conditions Sep 2020"
            NavigateUri="https://www.example.com"
            Click="UpdateInfoBarHyperlinkButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Sağa hizalanmış eylem düğmesi

Varsayılan olarak, eylem düğmesi doğrudan İleti'nin sağındaki kullanılabilir alana sola hizalanır. İsteğe bağlı olarak, bu düğmeyi tek satır, yatay, düzende kapat düğmesinin doğrudan soluna hizalamak için düğmenizde HorizontalAlignment değerini "sağa" olarak ayarlayabilirsiniz.

<InfoBar x:Name="RightAlignedButtonNotification"
    Title="Title"
    Message="Essential app message">
    <InfoBar.ActionButton>
        <Button Content="Hello" HorizontalAlignment="Right"/>
    </InfoBar.ActionButton>
</InfoBar>

İçerik kaydırma

Özel içerik hariç InfoBar içeriği tek bir yatay çizgiye sığamazsa, bunlar dikey olarak düzenlenir. Başlık, İleti ve EylemDüğmesi (varsa) ayrı satırlarda görünür.

<InfoBar x:Name="BackupCompleteNotification"
    Severity="Success"
    Title="Backup complete: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    Message="All documents were uploaded successfully. Ultrices sagittis orci a scelerisque. Aliquet risus feugiat in ante metus dictum at tempor commodo. Auctor augue mauris augue neque gravida.">
    <InfoBar.ActionButton>
        <Button Content="Action"
            Click="BackupInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Özel içerik

XAML içeriği, Content özelliği kullanılarak bir InfoBar'a eklenebilir. Denetim içeriğinin geri kalanının altında, ayrı bir satırda görünür. Bilgi Çubuğu, tanımlanan içeriğe uyacak şekilde genişletilecektir.

<InfoBar x:Name="BackupInProgressNotification"
    Title="Backup in progress"
    Message="Your documents are being saved to the cloud"
    IsClosable="False">
    <InfoBar.Content>
        <ProgressBar IsIndeterminate="True" Margin="0,0,0,6" MaxWidth="200"/>
    </InfoBar.Content>
</InfoBar>

Hafif stil

Denetime benzersiz bir görünüm vermek için varsayılan Style ve ControlTemplate değerlerini değiştirebilirsiniz. Kullanılabilir tema kaynaklarının listesi için InfoBar API belgelerinin Denetim Stili ve Şablon bölümüne bakın.

Daha fazla bilgi için Stil denetimleri makalesinin Hafif stil bölümüne bakın.

Örneğin, aşağıdakiler bir sayfadaki tüm bilgi bilgi çubuklarının arka plan renginin mavi olmasına neden olur:

<Page.Resources>
    <x:SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="LightBlue"></x:SolidColorBrush>
</Page.Resources>

Kapat iptal etme

Kapatma olayı, InfoBar'ın kapanışını iptal etmek ve/veya ertelemek için kullanılabilir. Bu, InfoBar'ı açık tutmak veya özel bir eylemin gerçekleşmesi için zaman vermek için kullanılabilir. InfoBar'ın kapatılması iptal edildiğinde, IsOpen true değerine geri döner. Programlı kapatma işlemi de iptal edilebilir.

<InfoBar x:Name="UpdateAvailable"
    Title="Update Available"
    Message="Please close this tip to apply required security updates to this application"
    Closing="InfoBar_Closing">
</InfoBar>

public void InfoBar_Closing(InfoBar sender, InfoBarClosingEventArgs args)
{
    if (args.Reason == InfoBarCloseReason.CloseButton) 
    {
        if (!ApplyUpdates()) 
        {
            // could not apply updates - do not close
            args.Cancel = true;
        }
    }
}

UWP ve WinUI 2

Önemli

Bu makaledeki bilgiler ve örnekler, Windows Uygulama SDK'sı ve WinUI 3kullanan uygulamalar için iyileştirilmiştir, ancak genellikle WinUI 2kullanan UWP uygulamaları için geçerlidir. Platforma özgü bilgiler ve örnekler için UWP API başvurusuna bakın.

Bu bölüm, denetimi bir UWP veya WinUI 2 uygulamasında kullanmak için ihtiyacınız olan bilgileri içerir.

UWP uygulamaları için Bilgi Çubuğu için WinUI 2 gerekir. Yükleme yönergeleri de dahil olmak üzere daha fazla bilgi için bkz. WinUI 2. Bu denetimin API'leri Microsoft.UI.Xaml.Controls ad alanında bulunur.

• WinUI 2 Apis:InfoBar sınıfı
• WinUI 2 Galeri uygulamasını açın ve infobar'ı çalışır durumda olarak görün. WinUI 2 Galeri uygulaması çoğu WinUI 2 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın.

Bu makaledeki kodu WinUI 2 ile kullanmak için, projenize dahil edilen Windows UI Kitaplığı API'lerini temsil etmek için XAML'de bir diğer ad kullanın (muxckullanıyoruz). Daha fazla bilgi için WinUI 2'yi kullanmaya başlama hakkında bölümüne bakın.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:InfoBar />

İlgili makaleler

• İletişim kutuları ve açılır pencereler