Tips pengajaran

Tips pengajaran adalah jendela pop-up semi-persisten yang berisikan banyak konten untuk menyediakan informasi kontekstual. Ini sering digunakan untuk memberi tahu, mengingatkan, dan mengajar pengguna tentang fitur penting dan baru yang dapat meningkatkan pengalaman mereka.

Tip pengajaran mungkin mematikan cahaya atau memerlukan tindakan eksplisit untuk ditutup. Tips pengajaran dapat menargetkan elemen UI tertentu dengan ekornya dan juga digunakan tanpa ekor atau target.

Apakah ini kontrol yang tepat?

Gunakan kontrol TeachingTip untuk memfokuskan perhatian pengguna pada pembaruan dan fitur baru atau penting, mengingatkan pengguna tentang opsi yang tidak penting yang akan meningkatkan pengalaman mereka, atau mengajarkan pengguna bagaimana tugas harus diselesaikan.

Karena tip pengajaran bersifat sementara, itu bukanlah kontrol yang direkomendasikan untuk memberi peringatan kepada pengguna tentang kesalahan atau perubahan status penting.

Recommendations

• Tips tidak aman dan tidak boleh berisi informasi atau opsi yang penting bagi pengalaman aplikasi.
• Cobalah untuk menghindari menunjukkan tips mengajar terlalu sering. Tips mengajar paling mungkin akan mendapatkan perhatian individu ketika dijadwalkan secara bertahap sepanjang sesi yang panjang atau lintas beberapa sesi.
• Jaga agar tips tetap jelas dan topiknya tetap jelas. Penelitian menunjukkan pengguna, rata-rata, hanya membaca 3-5 kata dan hanya memahami 2-3 kata sebelum memutuskan apakah akan berinteraksi dengan tip.
• Aksesibilitas gamepad untuk tip pengajaran tidak dijamin. Untuk aplikasi yang memprediksi input gamepad, silakan lihat gamepad dan interaksi kontrol jarak jauh. Dianjurkan untuk menguji aksesibilitas dari gamepad pada setiap saran pengajaran dengan menggunakan semua konfigurasi UI aplikasi yang mungkin.
• Saat mengaktifkan Teaching Tip untuk keluar dari XAML Root, dianjurkan juga untuk mengaktifkan properti IsLightDismissEnabled dan mengatur mode PreferredPlacement sedekat mungkin dengan pusat XAML Root.

Mengonfigurasi ulang petunjuk mengajar yang terbuka

Beberapa konten dan properti dapat dikonfigurasi ulang saat petunjuk pengajaran aktif dan akan segera berlaku. Konten dan properti lainnya, seperti properti ikon, tombol Tindakan dan Tutup, serta mengonfigurasi ulang antara penutupan ringan dan penutupan eksplisit, memerlukan petunjuk pengajaran ditutup dan dibuka kembali agar perubahan pada properti ini diterapkan. Perhatikan bahwa mengubah perilaku penghentian dari penghentian manual ke penghentian ringan saat tip pengajaran terbuka akan menyebabkan tombol Tutup pada tip pengajaran dihapus sebelum perilaku penghentian ringan diaktifkan dan tip tersebut dapat tertahan di layar.

Examples

Tips pengajaran dapat memiliki beberapa konfigurasi, termasuk yang terkenal ini:

Petunjuk pengajaran dapat menargetkan elemen UI tertentu dengan ujungnya untuk meningkatkan kejernihan kontekstual informasi yang disajikannya.

Ketika informasi yang disajikan tidak berkaitan dengan elemen UI tertentu, tip pengajaran yang tidak ditargetkan dapat dibuat dengan menghapus ekor.

Tips pengajaran dapat mengharuskan pengguna untuk menutupnya melalui tombol "X" di sudut atas atau tombol "Tutup" di bagian bawah. Tips pengajaran juga dapat menggunakan fitur 'light-dismiss', yaitu tidak memiliki tombol tutup dan tips pengajaran akan tertutup saat pengguna menggulir atau berinteraksi dengan elemen lain dari aplikasi. Karena perilaku ini, tips pengabaian ringan adalah solusi terbaik ketika tip perlu ditempatkan di area yang dapat digulirkan.

Membuat panduan mengajar

• API Penting:Kelas TeachingTip

Buka aplikasi Galeri WinUI 3 dan lihat TeachingTip beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Berikut adalah XAML untuk kontrol tip pengajaran yang ditargetkan yang menunjukkan tampilan default TeachingTip dengan judul dan subtitel. Perhatikan bahwa tip pengajaran dapat muncul di mana saja di pohon elemen atau kode belakang. Dalam contoh di bawah ini, ini terletak di ResourceDictionary.

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

Berikut hasilnya saat Halaman yang berisi tombol dan tips pengajaran ditampilkan:

Dalam contoh di atas, properti Judul dan Subjudul digunakan untuk mengatur judul dan subjudul tips pengajaran. Properti Target diatur ke "SaveButton" untuk membuat koneksi visual antara dirinya sendiri dan tombol . Untuk menunjukkan tip pembelajaran, properti IsOpen diatur ke true.

Tips yang tidak ditargetkan

Tidak semua tips terkait dengan elemen pada layar. Untuk skenario ini, jangan menetapkan target dan tips pengajaran akan ditampilkan relatif terhadap tepi akar xaml. Namun, tip pengajaran dapat menghapus ekor sambil mempertahankan penempatan relatif terhadap elemen UI dengan mengatur properti TailVisibility ke "Collapsed". Contoh berikut adalah tip pengajaran yang tidak ditargetkan.

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

Perhatikan bahwa dalam contoh ini TeachingTip berada di pohon elemen daripada di ResourceDictionary atau dalam kode di belakang. Ini tidak berpengaruh pada perilaku; TeachingTip hanya ditampilkan saat dibuka, dan tidak memakan ruang tata letak.

Penempatan yang disukai

Tip pengajaran mereplikasi perilaku penempatan FlyoutPlacementMode dengan properti PreferredPlacement. Mode penempatan default akan mencoba menempatkan tip pengajaran yang ditargetkan di atas targetnya dan tip pengajaran yang tidak ditargetkan yang berpusat di bagian bawah akar xaml. Seperti halnya Flyout, jika mode penempatan yang disukai tidak akan memberikan ruang bagi tip pengajaran untuk ditampilkan, mode penempatan lain akan dipilih secara otomatis.

Untuk aplikasi yang memprediksi input gamepad, silakan lihat gamepad dan interaksi kontrol jarak jauh. Dianjurkan untuk menguji aksesibilitas dari gamepad pada setiap saran pengajaran dengan menggunakan semua konfigurasi UI aplikasi yang mungkin.

Tip pengajaran yang terarah dengan PreferredPlacement yang disetel ke "BottomLeft" akan muncul dengan ekor yang terpusat di bagian bawah target dengan badan tip pengajaran dipindahkan ke kiri.

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

Tip pengajaran yang tidak ditargetkan dengan PreferredPlacement yang disetel ke "BottomLeft" akan ditampilkan di pojok kiri bawah root xaml.

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

Diagram di bawah ini menggambarkan hasil dari semua 13 mode PreferredPlacement yang dapat diatur untuk tips pengajaran yang ditargetkan.

Diagram di bawah ini menggambarkan hasil dari semua 13 mode PreferredPlacement yang dapat diatur untuk tips pengajaran yang tidak ditargetkan. Ilustrasi menampilkan sembilan tips pengajaran, masing-masing menunjukkan mode penempatan yang berbeda yang tidak ditargetkan. Setiap tips pengajaran diberi label dengan mode yang diwakilinya. Kata pertama dari mode penempatan menunjukkan sisi dari xaml root tempat tips pengajaran akan muncul berpusat. Jika ada kata kedua dalam mode penempatan, tips pengajaran akan memposisikan dirinya ke sudut yang ditentukan dari xaml root tersebut. Misalnya, mode penempatan "TopRight" akan membuat tips pengajaran muncul di sudut kanan atas xaml root. Untuk mode penempatan yang tidak ditargetkan, urutan kata tidak memengaruhi penempatan. TopRight setara dengan RightTop. Mode penempatan "Pusat" unik dan akan membuat tips pengajaran muncul di tengah vertikal dan horizontal dari xaml root.

Tambahkan margin penempatan

Anda dapat mengontrol seberapa jauh tip pengajaran yang ditargetkan terpisah dari targetnya dan seberapa jauh tip pengajaran yang tidak ditargetkan terpisah dari tepi akar xaml dengan menggunakan properti PlacementMargin . Seperti Margin, PlacementMargin memiliki empat nilai - kiri, kanan, atas, dan bawah - sehingga hanya nilai yang relevan yang digunakan. Misalnya, PlacementMargin.Left berlaku ketika tip berada di sebelah kiri target atau di tepi kiri root XAML.

Contoh berikut menunjukkan tip yang tidak ditargetkan dengan PlacementMargin kiri/atas/kanan/bawah semua diatur ke 80.

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

Tambahkan konten

Konten dapat ditambahkan ke tip pengajaran menggunakan properti Konten . Jika ada lebih banyak konten yang akan ditampilkan daripada ukuran tip pengajaran, bilah gulir akan diaktifkan secara otomatis untuk memungkinkan pengguna menggulir area konten.

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

Menambahkan tombol

Secara default, tombol tutup "X" standar ditampilkan di samping judul tip pengajaran. Tombol Tutup dapat disesuaikan dengan properti CloseButtonContent , dalam hal ini tombol dipindahkan ke bagian bawah tip pengajaran.

Catatan: Tidak ada tombol tutup yang akan muncul pada tips dengan fitur tutup otomatis

Tombol tindakan kustom dapat ditambahkan dengan mengatur properti ActionButtonContent (dan secara opsional properti ActionButtonCommand dan ActionButtonCommandParameter ).

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

Konten Utama

Konten edge ke edge dapat ditambahkan ke tip pengajaran dengan mengatur properti HeroContent . Lokasi konten hero dapat diatur pada bagian atas atau bawah tip pengajaran dengan mengatur properti HeroContentPlacement.

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

Tambahkan ikon

Ikon dapat ditambahkan di samping judul dan subtitel menggunakan properti IconSource . Ukuran ikon yang direkomendasikan termasuk 16px, 24px, dan 32px.

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

Aktifkan pengalih cahaya

Fungsionalitas penutupan otomatis yang secara default dinonaktifkan dapat diaktifkan dengan mengatur properti IsLightDismissEnabled sehingga tips bimbingan akan ditutup, misalnya, ketika pengguna menggulir atau berinteraksi dengan elemen lain dari aplikasi. Karena perilaku ini, tips pengabaian ringan adalah solusi terbaik ketika tip perlu ditempatkan di area yang dapat digulirkan.

Tombol tutup akan secara otomatis dihapus dari tip pembelajaran yang mendukung pengabaian ringan untuk mengidentifikasi perilaku pengabaian ringannya kepada pengguna.

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

Melampaui batasan root XAML

Dimulai dengan Windows 10, versi 1903 (Build 18362), tips pengajaran dapat lolos dari batas induk XAML dan layar dengan mengatur properti ShouldConstrainToRootBounds. Ketika properti ini diaktifkan, tip pengajaran tidak akan mencoba untuk tetap berada dalam batasan akar XAML maupun layar dan akan selalu berada pada mode PreferredPlacement yang ditetapkan. Dianjurkan untuk mengaktifkan properti IsLightDismissEnabled dan mengatur mode PreferredPlacement sedekat mungkin dengan pusat akar XAML untuk memastikan pengalaman terbaik bagi pengguna.

Pada versi Windows sebelumnya, properti ini diabaikan dan tip pengajaran selalu tetap berada dalam batas akar XAML.

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

Membatalkan dan menunda penutupan

Acara Penutupan dapat digunakan untuk membatalkan dan/atau menunda penutupan tips pengajaran. Ini dapat digunakan untuk menjaga panduan mengajar tetap terbuka atau memberi waktu untuk tindakan atau animasi khusus terjadi. Ketika penutupan tip pengajaran dibatalkan, IsOpen akan kembali ke true, namun, itu akan tetap false selama penundaan. Penutupan terprogram juga dapat dibatalkan.

Nota

Jika tidak ada opsi penempatan yang memungkinkan tip pengajaran ditampilkan sepenuhnya, tip pengajaran akan melalui siklus peristiwanya untuk memaksa penutupan daripada ditampilkan tanpa tombol tutup yang dapat diakses. Jika aplikasi membatalkan acara Penutupan, tips pengajaran dapat tetap terbuka tanpa tombol Tutup yang dapat diakses.

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

Artikel terkait

• Dialog dan flyout