Oktatási tipp

A tanítási tipp egy részben állandó és tartalomban gazdag lebegő ablak, amely kontextuális információkat biztosít. Gyakran használják a felhasználók tájékoztatására, emlékeztetésére és tanítására olyan fontos és új funkciókról, amelyek javíthatják a felhasználói élményt.

Egy oktató tipp lehet, hogy könnyen elutasítható, vagy explicit cselekvést igényel a bezáráshoz. A tanítási tipp egy adott felhasználói felületi elemet célozhat meg nyíllal, és nyíl vagy cél nélkül is használható.

Ez a megfelelő vezérlő?

A Tanítási tipp vezérlővel a felhasználó figyelmét az új vagy fontos frissítésekre és funkciókra összpontosíthatja, emlékeztetheti a felhasználót azokra a nem alapvető lehetőségekre, amelyek javítják a felhasználói élményt, vagy megtanítják a felhasználónak, hogyan kell elvégezni a feladatokat.

Mivel az útmutató átmeneti, nem ez lenne az ajánlott eszköz a hibákra vagy a fontos állapotváltozásokra való figyelmeztetéshez.

Recommendations

• A tippek türelmetlenek, és nem tartalmazhatnak olyan információkat vagy lehetőségeket, amelyek kritikus fontosságúak az alkalmazások felhasználói élményéhez.
• Próbálja meg elkerülni, hogy túl gyakran jelenjenek meg a tanítási tippek. A tanítási tippek nagy valószínűséggel egyéni figyelmet kapnak, amikor hosszú munkamenetek során vagy több munkamenet között vannak megosztva.
• A tippeket tartsa tömören és világos legyen a témájuk. A kutatások azt mutatják, hogy a felhasználók átlagosan csak 3-5 szót olvasnak, és csak 2-3 szót olvasnak, mielőtt eldöntik, hogy használják-e a tippet.
• A tantippek gamepad-akadálymentessége nem garantált. A gamepad bemenetét előrejelző alkalmazások esetében lásd játékpad és távvezérlés interakcióit. Javasolt tesztelni az oktatótippek gamepad általi akadálymentességét az alkalmazás felhasználói felületének minden lehetséges konfigurációjával.
• Ha engedélyezi, hogy a tanítási tipp kilépjen az xaml gyökérből, javasoljuk, hogy engedélyezze az IsLightDismissEnabled tulajdonságot is, és állítsa be a PreferredPlacement módot úgy, hogy a xaml gyökérhez legközelebbi középpontban legyen.

Nyílt tanítási tipp újrakonfigurálása

Egyes tartalmak és tulajdonságok újrakonfigurálhatók, amíg a tanítási tipp meg van nyitva, és azonnal érvénybe lép. Más tartalmak és tulajdonságok, mint például az ikontulajdonság, a Művelet és Bezárás gombok, valamint az újrakonfigurálás a könnyű elutasítás és az explicit elvetés között, mind szükségessé teszik a tanítási tipp bezárását és újbóli megnyitását, hogy a változtatások érvénybe lépjenek. Vegye figyelembe, hogy az elbocsátási viselkedés manuális elbocsátásról világos elbocsátásra való váltása a tanítási tipp megnyitásakor a bezárás gomb eltávolítását eredményezi, mielőtt engedélyezve lenne a fényelvetési viselkedés, és a tipp továbbra is elakadhat a képernyőn.

Példák

A tanítási tippek több konfigurációval is rendelkezhetnek, köztük az alábbi figyelemre méltók:

Egy tanítási tipp megcélozhat egy adott felhasználói felületi elemet a végével, hogy javítsa az általa bemutatandó információ érthetőségét.

Ha a bemutatott információk nem egy adott felhasználói felületi elemre vonatkoznak, a farok eltávolításával létrehozhat egy nem célzott tanítási tippet.

Az oktatási tipp megkívánhatja a felhasználótól, hogy a felső sarokban lévő "X" gombot vagy az alul található "Bezárás" gombot használja. Előfordulhat, hogy a tanítási tipp úgy van beállítva, hogy automatikusan eltűnik; ebben az esetben nincs lezáró gomb, és a tanítási tipp eltűnik, amikor a felhasználó görget vagy más elemekre kattint az alkalmazásban. Az ilyen viselkedés miatt a legjobb megoldás a könnyű bezárású tippek használata, amikor egy tippet görgethető területre kell helyezni.

Oktatói tipp létrehozása

• Fontos API-k:Tanítási tipp osztály

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a tanítási tippet működés közben

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Itt található az XAML egy célzott tanítási tipp vezérlőelemhez, amely bemutatja a Tanítási tipp alapértelmezett megjelenését címmel és alcímmel. Vegye figyelembe, hogy a tanítási tipp bárhol megjelenhet az elemfa vagy a kód mögött. Az alábbi példában egy ResourceDictionary-ban található.

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

Az alábbi eredmény jelenik meg, amikor megjelenik a gombot és a tanítási tippet tartalmazó oldal:

A fenti példában a Cím és Alcím tulajdonságokat használjuk a tanítási tipp címének és alcímének beállításához. A Target tulajdonság a "SaveButton" értékre van állítva, hogy létrehozza a vizualizációs kapcsolatot maga és a gomb között. A tanítási tipp megjelenítéséhez az IsOpen tulajdonsága a következőképpen van beállítva: true.

Nem célzott tippek

Nem minden tipp kapcsolódik egy elemhez a képernyőn. Ezekben a forgatókönyvekben ne állítson be célértéket, és a tanítási tipp ehelyett az xaml gyökér széleihez képest jelenik meg. A tanítási tipp azonban eltávolíthatja a farokrészt, miközben megtartja az elhelyezést egy felhasználói felületi elemhez képest, ha a TailVisibility tulajdonságot "Összecsukva" értékre állítja. Az alábbi példa egy nem célzott tanítási tipp.

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

Vegye figyelembe, hogy ebben a példában a Tanítási tipp az elemfában van, nem pedig a ResourceDictionaryban vagy a mögöttes kódban. Ez nincs hatással a viselkedésre; a Tanítási tipp csak megnyitáskor jelenik meg, és nem foglal helyet az elrendezésben.

Előnyben részesített elhelyezés

A tanítási tipp replikálja a Flyout FlyoutPlacementMode elhelyezési viselkedését a PreferredPlacement tulajdonsággal. Az alapértelmezett elhelyezési mód megkísérli a célzott tanítási tippet a cél fölé helyezni, valamint a nem célzott tanítási tippet középre a xaml gyökér alján. A Flyouthoz hasonlóan, ha az előnyben részesített elhelyezési mód nem hagy helyet a tanítási tipp megjelenítéséhez, a rendszer automatikusan kiválaszt egy másik elhelyezési módot.

A gamepad bemenetét előrejelző alkalmazások esetében lásd játékpad és távvezérlés interakcióit. Javasolt tesztelni az oktatótippek gamepad általi akadálymentességét az alkalmazás felhasználói felületének minden lehetséges konfigurációjával.

Egy célzott tanítási tipp, amelynek PreferredPlacement beállítása "BottomLeft" lesz, a farok a cél alján középre kerül, és a tanítási tipp teste balra tolódik.

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

A xaml gyökér bal alsó sarkában megjelenik egy nem célzott tanítási tipp, amelynek PreferredPlacement értéke "BottomLeft" lesz.

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

Az alábbi ábra mind a 13 PreferredPlacement mód eredményét ábrázolja, amelyek beállíthatók a célzott tanítási tippekhez.

Az alábbi ábra a nem célzott tanítási tippekhez beállítható 13 PreferredPlacement mód eredményét mutatja be.

Elhelyezési margó hozzáadása

A PlacementMargin tulajdonság használatával szabályozhatja, hogy egy célzott tanítási tipp milyen távolságra van a céltól, és hogy a nem célzott tanítási tippek milyen távolságra vannak az xaml-gyökér széleitől. A Margóhoz hasonlóan a PlacementMargin négy értékkel rendelkezik – bal, jobb, felső és alsó –, így csak a megfelelő értékek használhatók. A PlacementMargin.Left például akkor érvényes, ha a tipp a céltól balra vagy a xaml gyökér bal szélén van.

Az alábbi példa egy nem célzott tippet mutat be, amelyen a PlacementMargin bal/felső/jobb/alsó érté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>

Tartalom hozzáadása

A tartalom a Content tulajdonság használatával adható hozzá egy oktatótipphez. Ha több tartalom jeleníthető meg, mint amennyit egy oktatótipp mérete megenged, a görgetősáv automatikusan engedélyezve lesz, hogy a felhasználó görgethesse a tartalomterületet.

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

Gombok hozzáadása

Alapértelmezés szerint egy általános "X" bezárás gomb jelenik meg a tanítási tipp címe mellett. A Bezárás gomb testreszabható a CloseButtonContent tulajdonság segítségével, ebben az esetben a gomb a tanítási tipp aljára kerül.

Megjegyzés: Nem jelenik meg a bezárás gomb a világos elbocsátást engedélyező tippeken

Egyéni műveletgombot ActionButtonContent tulajdonság beállításával adhat hozzá (és opcionálisan a ActionButtonCommand és a ActionButtonCommandParameter tulajdonságokat).

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

Főhős tartalma

Széltől-szélig tartalom hozzáadható egy oktatótipphez a HeroContent tulajdonság beállításával. A hős tartalom elhelyezkedése a tanítási tipp tetején vagy alján állítható be a HeroContentPlacement tulajdonság áthelyezésével.

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

Ikon hozzáadása

A IconSource tulajdonság használatával a cím és az alcím mellett egy ikon is hozzáadható. Az ajánlott ikonméretek közé tartozik a 16px, a 24px és a 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>

A fényelzárás engedélyezése

Az automatikus bezáródás funkció alapértelmezés szerint le van tiltva, de az IsLightDismissEnabled tulajdonság beállításával engedélyezhető, így egy oktatótipp például akkor bezárul, amikor egy felhasználó görget vagy az alkalmazás más elemeivel interakcióba lép. Az ilyen viselkedés miatt a legjobb megoldás a könnyű bezárású tippek használata, amikor egy tippet görgethető területre kell helyezni.

A bezárás gombot a rendszer automatikusan eltávolítja a könnyű elbocsátást lehetővé tevő oktatási tippnél, hogy a felhasználók számára azonosítható legyen a könnyű elbocsátási viselkedés.

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

A XAML-gyökérhatár kikerülése

A Windows 10 1903-as verziójától (Build 18362) kezdve a tanítási tipp túllépheti az XAML-gyökér és a képernyő határait a ShouldConstrainToRootBounds tulajdonság beállításával. Ha ez a tulajdonság engedélyezve van, a tanítási tipp nem kísérli meg az XAML-gyökér vagy a képernyő határán maradni, és mindig a beállított PreferredPlacement módba kerül. Javasoljuk, hogy engedélyezze a IsLightDismissEnabled tulajdonságot, és állítsa be a PreferredPlacement módot a XAML-gyökér közepéhez legközelebb, hogy a legjobb felhasználói élményt biztosítsa.

A Windows korábbi verzióiban a rendszer figyelmen kívül hagyja ezt a tulajdonságot, és a tanítási tipp mindig az XAML-gyökérhatáron belül marad.

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

Lezárás megszakítása és halasztása

A záró esemény használható a tanítási tipp bezárásának megszakítására és/vagy elhalasztására. Ezzel megnyithatja a tanítási tippet, vagy időt hagyhat egy művelet vagy egyéni animáció végrehajtására. A tanítási tipp bezárásának visszavonásakor az IsOpen visszaáll igazra, azonban a halasztás ideje alatt hamis marad. Programozott bezárás is megszakítható.

Megjegyzés:

Ha egyetlen elhelyezési lehetőség sem teszi lehetővé a tanítási tipp teljes megjelenítését, a tanítási tipp végigmegy az esemény életciklusán, hogy erőszakos bezárást hajtson végre, ahelyett, hogy egy akadálymentes bezáró gomb nélkül jelenne meg. Ha az alkalmazás megszakítja a záróeseményt, előfordulhat, hogy a tanítási tipp akadálymentes Bezárás gomb nélkül is nyitva marad.

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

Kapcsolódó cikkek

• párbeszédpanelek és felugró ablakok