Öğretim ipucu

Öğretim ipucu, bağlamsal bilgiler sağlayan yarı kalıcı ve içerik açısından zengin bir açılır öğedir. Genellikle kullanıcılara deneyimlerini geliştirebilecek önemli ve yeni özellikler hakkında bilgi vermek, hatırlatmak ve öğretmek için kullanılır.

Öğretim ipucu otomatik olarak kapatılabilir veya açık bir eylem gerektirebilir. Öğretim ipucu belirli bir kullanıcı arabirimi öğesini kuyruğuyla hedefleyebilir ve kuyruk veya hedef olmadan da kullanılabilir.

Doğru kontrol bu mu?

Bir kullanıcının dikkatini yeni veya önemli güncelleştirmelere ve özelliklere odaklamak, kullanıcıya deneyimini geliştirecek gerekli olmayan seçenekleri anımsatmak veya kullanıcıya bir görevin nasıl tamamlanması gerektiğini öğretmek için Bir Öğretim İpucu denetimi kullanın.

Öğretim ipucu geçici olduğundan, kullanıcılara hatalar veya önemli durum değişiklikleri hakkında bilgilendirmek için önerilen denetim değildir.

Recommendations

• İpuçları kesin değildir ve bir uygulamanın deneyimi için kritik öneme sahip bilgiler veya seçenekler içermemelidir.
• Öğretim ipuçlarını çok sık göstermemeye çalışın. Öğretim ipuçlarının bireysel ilgi görme olasılığı, uzun oturumlar boyunca veya birden çok oturuma yayarak onları kademelendirdiklerinde daha yüksektir.
• İpuçlarını kısa ve konularını net tutun. Araştırmalar, kullanıcıların ortalama olarak yalnızca 3-5 sözcük okuduğunu ve bir ipucuyla etkileşime girip girmemeye karar vermeden önce yalnızca 2-3 sözcüğü anladığını göstermektedir.
• Öğretim ipucunun gamepad ile erişilebilirliği garanti edilmez. Gamepad girişini tahmin eden uygulamalar için bkz. oyun yüzeyi ve uzaktan kumanda etkileşimleri. Bir uygulamanın kullanıcı arabiriminin tüm olası yapılandırmalarını kullanarak her öğretim ipucunun gamepad erişilebilirliğini test etmek önerilir.
• Bir öğretim ipucunu xaml kökünü terk etmesi için etkinleştirirken, IsLightDismissEnabled özelliğini etkinleştirmeniz ve PreferredPlacement özelliğini xaml kökünün merkezine en yakın şekilde ayarlamanız da teşvik edilir.

Açık öğretim ipucunu yeniden yapılandırma

Öğretim ipucu açıkken bazı içerik ve özellikler yeniden yapılandırılabilir ve hemen geçerlilik kazanır. Simge özelliği, Eylem ve Kapat düğmeleri ve hafif kapatma ile açık kapatma arasındaki yeniden yapılandırmalar gibi diğer içerikler ve özellikler, bu özelliklerdeki değişikliklerin etkili olabilmesi için öğretim ipucunun kapatılıp yeniden açılmasını gerektirir. Bir öğretim ipucu açıkken, kapatma davranışını manuel kapatmadan hafif kapatmaya değiştirdiğinizde, hafif kapatma davranışı etkinleştirilmeden önce öğretim ipucunun Kapat düğmesinin kaldırılmasına neden olacağını ve ipucunun ekranda takılı kalabileceğini unutmayın.

Örnekler

Bir öğretim ipucu, aşağıdakiler de dahil olmak üzere çeşitli yapılandırmalara sahip olabilir:

Öğretim ipucu, sunduğu bilgilerin bağlamsal açıklığını artırmak için belirli bir kullanıcı arayüzü öğesini hedef alabilir.

Sunulan bilgiler belirli bir kullanıcı arabirimi öğesiyle ilgili olmadığında kuyruk kaldırılarak hedeflenmemiş bir öğretim ipucu oluşturulabilir.

Öğretim ipucu, kullanıcının üst köşede bulunan bir "X" düğmesi veya alttaki "Kapat" düğmesi aracılığıyla kapatmasını gerektirebilir. Bir öğretim ipucu da hafifçe kapatılabilir ve bu durumda kapatma düğmesi yoktur ve bir kullanıcı uygulamanın diğer öğeleriyle gezindiğinde veya etkileşime geçtiğinde öğretim ipucu kapatılır. Bu davranış nedeniyle, bir ipucunun kaydırılabilir bir alana yerleştirilmesi gerektiğinde en iyi çözüm ışık kapatma ipuçlarıdır.

Öğretim ipucu oluştur

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

WinUI 3 Galeri uygulamasını açın ve Öğretim İpucu'nu çalışır durumda 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.

Aşağıda, bir başlık ve alt başlıkla Öğretim İpucu'nun varsayılan görünümünü gösteren, hedeflenen bir öğretim ipucu denetiminin XAML'i yer alır. Öğretim ipucunun öğe ağacında veya arkasındaki kodda herhangi bir yerde görünebileceğini unutmayın. Aşağıdaki örnekte bir ResourceDictionary içinde yer almaktadır.

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Save automatically"
            Subtitle="When you save your file to OneDrive, we save your changes as you go - so you never have to.">
        </TeachingTip>
    </Button.Resources>
</Button>

public MainPage()
{
    this.InitializeComponent();

    if(!HaveExplainedAutoSave())
    {
        AutoSaveTip.IsOpen = true;
        SetHaveExplainedAutoSave();
    }
}

Düğmeyi ve öğretim ipucunu içeren Sayfa gösterildiğinde elde edilen sonuç aşağıdadır:

Yukarıdaki örnekte, Öğretim ipucunun başlığını ve alt başlığını ayarlamak için Başlık ve Alt Başlık özellikleri kullanılır. Target özelliği, kendisiyle düğme arasında görsel bağlantı kurmak için "SaveButton" olarak ayarlanır. Öğretim ipucunu göstermek için IsOpen özelliği olarak trueayarlanır.

Hedeflenmemiş ipuçları

Tüm ipuçları ekrandaki bir öğeyle ilgili değildir. Bu senaryolar için bir hedef ayarlamayın, bunun yerine öğretim ipucu XAML kökünün kenarlarına göre görüntülenecektir. Ancak, TailVisibility özelliğini "Gizli" olarak ayarlayarak bir kullanıcı arabirimi öğesine göre yerleştirmeyi korurken bir öğretim ipucunun kuyruğu kaldırılabilir. Aşağıdaki örnek, hedeflenmemiş bir öğretim ipucudur.

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to.">
</TeachingTip>

Bu örnekte Öğretim İpucunun ResourceDictionary yerine öğe ağacında veya arkasındaki kodda yer aldığına dikkat edin. Bunun davranış üzerinde hiçbir etkisi yoktur; Öğretim İpucu yalnızca açıldığında görüntülenir ve düzen alanı kaplamaz.

Tercih edilen yerleştirme

Öğretim ipucu, Flyout'un FlyoutPlacementMode yerleştirme davranışını PreferredPlacement özelliğiyle çoğaltır. Varsayılan yerleştirme modu, hedeflenen bir öğretim ipucunu hedefinin üstüne ve xaml kökünde ortalanmış hedeflenmemiş bir öğretim ipucunu yerleştirmeye çalışır. Flyout'ta olduğu gibi, tercih edilen yerleştirme modu, öğretim ipucunun gösterilmesi için yeterli alan bırakmazsa, başka bir yerleştirme modu otomatik olarak seçilir.

Gamepad girişini tahmin eden uygulamalar için bkz. oyun yüzeyi ve uzaktan kumanda etkileşimleri. Bir uygulamanın kullanıcı arabiriminin tüm olası yapılandırmalarını kullanarak her öğretim ipucunun gamepad erişilebilirliğini test etmek önerilir.

PreferredPlacement değeri "BottomLeft" olarak ayarlanmış hedefli bir öğretici ipucu, kuyruğu hedefin alt ortasında yer alacak şekilde ve ipucu gövdesi sola kaydırılarak görünür.

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to."
            PreferredPlacement="BottomLeft">
        </TeachingTip>
    </Button.Resources>
</Button>

PreferredPlacement değeri "BottomLeft" olarak ayarlanmış hedeflenmemiş bir öğretim ipucu, xaml kökünün sol alt köşesinde görünür.

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to."
    PreferredPlacement="BottomLeft">
</TeachingTip>

Aşağıdaki diyagramda, hedeflenen öğretim ipuçları için ayarlanabilen 13 PreferredPlacement modunun tümünün sonucu gösterilmiştir.

Aşağıdaki diyagramda, hedeflenmemiş öğretim ipuçları için ayarlanabilen 13 PreferredPlacement modunun tümünün sonucu gösterilmiştir.

Yerleştirme kenar boşluğu ekleyin

PlacementMargin özelliğini kullanarak hedeflenen bir öğretim ipucunun hedefinden ne kadar uzağa ayarlandığını ve hedeflenmemiş bir öğretim ipucunun xaml kökünün kenarlarından ne kadar uzağa ayarlandığını denetleyebilirsiniz. Kenar Boşluğu gibi PlacementMargin'de de sol, sağ, üst ve alt gibi dört değer vardır, bu nedenle yalnızca ilgili değerler kullanılır. Örneğin, PlacementMargin.Left ipucu hedefin solunda veya xaml kökünün sol kenarında olduğunda uygulanır.

Aşağıdaki örnekte, PlacementMargin'in Sol/Üst/Sağ/Alt tümü 80 olarak ayarlanmış hedeflenmemiş bir ipucu gösterilmektedir.

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to."
    PreferredPlacement="BottomLeft"
    PlacementMargin="80">
</TeachingTip>

Sağ alt köşeye doğru yerleştirilmiş ancak tamamen sağ alt köşeye yaslanmamış bir öğretim ipucuna sahip örnek bir uygulama. İpucu başlığı "Otomatik olarak kaydediliyor" ve alt başlıkta "Değişikliklerinizi siz ilerledikçe kaydediyoruz, böylece hiçbir zaman kaydetmek zorunda kalmazsınız" ifadesi yer alır. Öğretim ipucunun sağ üst köşesinde bir kapatma düğmesi vardır.

İçerik ekleme

İçerik, content özelliği kullanılarak bir öğretim ipucuna eklenebilir. Gösterilecek içerik, öğretim ipucunun boyutunun izin verecek boyutundan daha fazlaysa, kullanıcının içerik alanını kaydırmasına izin vermek için kaydırma çubuğu otomatik olarak etkinleştirilir.

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to.">
                <StackPanel>
                    <CheckBox x:Name="HideTipsCheckBox" Content="Don't show tips at start up" IsChecked="{x:Bind HidingTips, Mode=TwoWay}" />
                    <TextBlock>You can change your tip preferences in <Hyperlink NavigateUri="app:/item/SettingsPage">Settings</Hyperlink> if you change your mind.</TextBlock>
                </StackPanel>
        </TeachingTip>
    </Button.Resources>
</Button>

Düğme ekleme

Varsayılan olarak, öğretim ipucu başlığının yanında standart bir "X" kapatma düğmesi gösterilir. Kapat düğmesi CloseButtonContent özelliğiyle özelleştirilebilir ve bu durumda düğme öğretim ipucunun altına taşınır.

Not: Işık kapatma etkin ipuçlarında kapat düğmesi görünmez

ActionButtonContent özelliği (ve isteğe bağlı olarak ActionButtonCommand ve ActionButtonCommandParameter özellikleri) ayarlanarak özel bir eylem düğmesi eklenebilir.

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to."
            ActionButtonContent="Disable"
            ActionButtonCommand="{x:Bind DisableAutoSaveCommand}"
            CloseButtonContent="Got it!">
                <StackPanel>
                    <CheckBox x:Name="HideTipsCheckBox" Content="Don't show tips at start up" IsChecked="{x:Bind HidingTips, Mode=TwoWay}" />
                    <TextBlock>You can change your tip preferences in <Hyperlink NavigateUri="app:/item/SettingsPage">Settings</Hyperlink> if you change your mind.</TextBlock>
                </StackPanel>
        </TeachingTip>
    </Button.Resources>
</Button>

Hero içeriği

Baştan uca içerik, HeroContent özelliği ayarlanarak bir öğretim ipucuna eklenebilir. HeroContentPlacement özelliği ayarlanarak, hero içeriğinin konumu öğretim ipucunun tepesine veya tabanına yerleştirilebilir.

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to.">
            <TeachingTip.HeroContent>
                <Image Source="Assets/cloud.png" />
            </TeachingTip.HeroContent>
        </TeachingTip>
    </Button.Resources>
</Button>

Simge ekleme

IconSource özelliği kullanılarak başlık ve alt başlığın yanına bir simge eklenebilir. Önerilen simge boyutları 16px, 24px ve 32px'tir.

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to."
            <TeachingTip.IconSource>
                <SymbolIconSource Symbol="Save" />
            </TeachingTip.IconSource>
        </TeachingTip>
    </Button.Resources>
</Button>

Işık kapatmayı etkinleştirme

Light-dismiss işlevi varsayılan olarak devre dışıdır. Ancak, bir kullanıcı uygulamanın diğer öğeleriyle kaydırma yaptığında veya etkileşime geçtiğinde bir bilgilendirme ipucunun kapanması istenirse, IsLightDismissEnabled özelliği etkinleştirilmelidir. Bu davranış nedeniyle, bir ipucunun kaydırılabilir bir alana yerleştirilmesi gerektiğinde en iyi çözüm ışık kapatma ipuçlarıdır.

Kapat düğmesi, kullanıcıların ışıkla kapatma özelliğini anlamalarını sağlamak amacıyla ışıkla kapatma etkin öğretim ipuçlarından otomatik olarak kaldırılır.

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to."
    IsLightDismissEnabled="True">
</TeachingTip>

XAML kök sınırlarından kaçış

Windows 10, sürüm 1903'den (Derleme 18362) başlayarak bir öğretim ipucu, ShouldConstrainToRootBounds özelliğini ayarlayarak XAML kökünün ve ekranın sınırlarını aşabilir. Bu özellik etkinleştirildiğinde, bir öğretim ipucu XAML kökünün veya ekranın sınırları içinde kalmaya çalışmaz ve her zaman ayarlanan PreferredPlacement modda konumlandırılır. Kullanıcılar için en iyi deneyimi sağlamak üzere IsLightDismissEnabled özelliğini etkinleştirmeniz ve PreferredPlacement modunu XAML kökünün merkezine en yakın olacak şekilde ayarlamanız teşvik edilir.

Windows önceki sürümlerinde bu özellik yoksayılır ve öğretim ipucu her zaman XAML kökünün sınırları içinde kalır.

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to."
    PreferredPlacement="BottomRight"
    PlacementMargin="-80,-50,0,0"
    ShouldConstrainToRootBounds="False">
</TeachingTip>

Kapatma işlemini iptal etme ve erteleme

Kapanış olayı, bir öğretim ipucunun kapanışını iptal etmek ve/veya ertelemek için kullanılabilir. Bu, öğretim ipucunu açık tutmak veya bir eylem veya özel animasyon için zaman vermek için kullanılabilir. Bir öğretim ipucunun kapatılması iptal edildiğinde, IsOpen tekrar doğruya dönecektir, ancak erteleme sırasında yanlış kalmaya devam eder. Programlı kapatma işlemi de iptal edilebilir.

Uyarı

Hiçbir yerleştirme seçeneği, öğretim ipucunun tam olarak gösterilmesine izin vermezse, ipucu, erişilebilir bir kapatma düğmesi olmadan görüntülenmek yerine, kendisini kapatmak için olay yaşam döngüsünü tamamlar. Uygulama Kapanış olayını iptal ederse, öğretim ipucu erişilebilir bir Kapat düğmesi olmadan açık kalabilir.

<TeachingTip x:Name="EnableNewSettingsTip"
    Title="New ways to protect your privacy!"
    Subtitle="Please close this tip and review our updated privacy policy and privacy settings."
    Closing="OnTipClosing">
</TeachingTip>

private void OnTipClosing(muxc.TeachingTip sender, muxc.TeachingTipClosingEventArgs args)
{
    if (args.Reason == muxc.TeachingTipCloseReason.CloseButton)
    {
        using(args.GetDeferral())
        {
            bool success = UpdateUserSettings(User thisUsersID);
            if(!success)
            {
                // We were not able to update the settings!
                // Don't close the tip and display the reason why.
                args.Cancel = true;
                ShowLastErrorMessage();
            }
        }
    }
}

İlgili makaleler

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