Undervisningstips

Ett undervisningstips är ett delvis beständigt och innehållsrikt popupfönster som ger kontextuell information. Det används ofta för att informera, påminna och lära användare om viktiga och nya funktioner som kan förbättra deras upplevelse.

Ett undervisningstips kan vara lätt att avfärda eller kräva en explicit åtgärd för att stängas. Ett undervisningstips kan rikta in sig på ett specifikt användargränssnittselement med svansen och även användas utan svans eller mål.

Är det här rätt kontroll?

Använd en TeachingTip-kontroll för att fokusera en användares uppmärksamhet på nya eller viktiga uppdateringar och funktioner, påminna en användare om icke-nödvändiga alternativ som skulle förbättra deras upplevelse eller lära en användare hur en uppgift ska slutföras.

Eftersom undervisningstipset är tillfälligt är det inte den rekommenderade kontrollen för att fråga användarna om fel eller viktiga statusändringar.

Recommendations

• Tips är obeständiga och får inte innehålla information eller alternativ som är viktiga för upplevelsen av ett program.
• Försök att undvika att visa undervisningstips för ofta. Undervisningstips får mest sannolikt individuell uppmärksamhet när de fördelas under långa sessioner eller över flera sessioner.
• Håll tipsen kortfattade och deras ämne tydligt. Forskning visar att användare i genomsnitt bara läser 3-5 ord och bara förstår 2-3 ord innan de bestämmer sig för om de ska interagera med ett tips.
• Tillgänglighet med gamepad av ett undervisningstips är inte garanterad. För program som förutsäger indata från gamepad kan du läsa mer i interaktioner med gamepad och fjärrstyrning. Vi rekommenderar att du testar spelpadens tillgänglighet för varje undervisningstips med hjälp av alla möjliga konfigurationer av en apps användargränssnitt.
• När du aktiverar ett undervisningstips för att undkomma xaml-roten rekommenderar vi att du även aktiverar egenskapen IsLightDismissEnabled och ställer in preferredPlacement-läget närmast mitten av xaml-roten.

Konfigurera om ett öppet undervisningstips

Vissa innehåll och egenskaper kan konfigureras om medan undervisningstipset är öppet och börjar gälla omedelbart. Annat innehåll och andra egenskaper, till exempel ikonegenskapen, knapparna Åtgärd och Stäng, och omkonfiguration mellan ljusstängning och explicit avstängning kräver att undervisningstipset stängs och öppnas igen för att ändringarna av dessa egenskaper ska påverkas. Observera att om du ändrar avslutningsbeteendet från manuell avstängning till lätt avstängning medan ett instruktionstips är öppet, kommer instruktionstipset att få sin Stäng-knapp borttagen innan det lätt avslutande beteendet aktiveras, vilket kan medföra att tipset blir kvar på skärmen.

Examples

Ett undervisningstips kan ha flera konfigurationer, inklusive dessa viktiga:

Ett undervisningstips kan rikta in sig på ett specifikt användargränssnittselement med sin pekare för att förbättra den kontextuella tydligheten av den information som presenteras.

När den information som presenteras inte gäller för ett visst användargränssnittselement kan du skapa ett icke-målriktat undervisningstips genom att ta bort svansen.

Ett undervisningstips kan kräva att användaren stänger den via en "X"-knapp i ett övre hörn eller en "Stäng"-knapp längst ned. Ett undervisningstips kan också aktivera lätt avfärdning, i så fall finns det ingen avfärdningsknapp, och undervisningstipset stängs istället när en användare scrollar eller interagerar med andra delar av applikationen. På grund av det här beteendet är tips för att stänga av ljus den bästa lösningen när ett tips måste placeras i ett rullningsbart område.

Skapa ett undervisningstips

• Viktiga API:er:TeachingTip-klass

Öppna WinUI 3-galleriappen och se instruktionstipset i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på WinUI-kontroller och funktioner. Hämta appen från Microsoft Store eller bläddra i källkoden på GitHub.

Här är XAML för en målstyrd kontroll för undervisningstips som visar standardutseendet för TeachingTip, med en titel och en underrubrik. Observera att undervisningstipset kan visas var som helst i elementträdet eller koden bakom. I det här exemplet nedan finns den i en 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();
    }
}

Här är resultatet när sidan som innehåller knappen och undervisningstipset visas:

I exemplet ovan används egenskaperna Rubrik och Underrubrik för att ange undervisningstipsets rubrik och underrubrik. Egenskapen Target är inställd på "SaveButton" för att upprätta den visuella anslutningen mellan sig själv och knappen. För att visa undervisningstipset är dess IsOpen-egenskap inställd på true.

Tips som inte är riktade

Alla tips är inte relaterade till ett element på skärmen. I dessa scenarier ska du inte ange något mål och undervisningstipset visas i stället i förhållande till xaml-rotens kanter. Ett undervisningstips kan dock få svansen borttagen och behålla placeringen i förhållande till ett användargränssnittselement genom att ställa in egenskapen TailVisibility till "Komprimerad". Följande exempel är ett icke-målinriktat undervisningstips.

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

Observera att i det här exemplet finns TeachingTip i elementträdet i stället för i en ResourceDictionary eller i koden bakom. Detta påverkar inte beteendet. TeachingTip visas bara när den öppnas och tar inte upp något layoututrymme.

Prioriterad placering

Undervisningstipset replikerar Flyouts FlyoutPlacementMode-placeringsbeteende med egenskapen PreferredPlacement . Standardplaceringsläget försöker placera ett målinriktat undervisningstips ovanför målet och ett icke-riktat undervisningstips centrerat längst ned i xaml-roten. Precis som med Flyout, om det föredragna placeringsläget inte skulle lämna utrymme för undervisningstipset att visa, väljs ett annat placeringsläge automatiskt.

För program som förutsäger indata från gamepad kan du läsa mer i interaktioner med gamepad och fjärrstyrning. Vi rekommenderar att du testar spelpadens tillgänglighet för varje undervisningstips med hjälp av alla möjliga konfigurationer av en apps användargränssnitt.

Ett riktat instruktionstips med sin föredragna placering inställd på "Nedersta Vänstra Hörnet" kommer att visas med svansen centrerad längst ner på sitt mål med instruktionstipsens huvud skiftad åt vänster.

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

Ett icke-målinriktat undervisningstips med dess PreferredPlacement inställt på "BottomLeft" visas i det nedre vänstra hörnet av xaml-roten.

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

Diagrammet nedan visar resultatet av alla 13 PreferredPlacement-lägen som kan ställas in för riktade undervisningstips.

Diagrammet nedan visar resultatet av alla 13 PreferredPlacement-lägen som kan ställas in för icke-riktade undervisningstips.

Lägg till en placeringsmarginal

Du kan styra hur långt ett målinriktat undervisningstips skiljer sig från målet och hur långt ett icke-riktat undervisningstips skiljer sig från kanterna på xaml-roten med hjälp av egenskapen PlacementMargin . Precis som Marginal har PlacementMargin fyra värden – vänster, höger, överkant och nederkant – så endast relevanta värden används. Till exempel gäller PlacementMargin.Left när spetsen är till vänster om målet eller på vänstra kanten av XAML-roten.

I följande exempel visas ett icke-målrelaterat tips, med PlacementMargin-värdena vänster/överkant/höger/nederkant som alla är inställda på 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>

Lägga till innehåll

Innehåll kan läggas till i ett undervisningstips med hjälp av egenskapen Innehåll . Om det finns mer innehåll att visa än vad storleken på ett undervisningstips tillåter, aktiveras automatiskt en rullningslist så att en användare kan bläddra i innehållsområdet.

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

Lägg till knappar

Som standard visas en standardknapp för "X"-stängning bredvid rubriken på ett undervisningstips. Knappen Stäng kan anpassas med egenskapen CloseButtonContent , i vilket fall knappen flyttas till slutet av undervisningstipset.

Obs! Ingen stängningsknapp visas på lättaktiverade tips

Du kan lägga till en anpassad åtgärdsknapp genom att ange egenskapen ActionButtonContent (och eventuellt egenskaperna ActionButtonCommand och 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>

Hero-innehåll

Kant-till-kant-innehåll kan läggas till i ett undervisningsråd genom att ange egenskapen HeroContent. Platsen för hero-innehåll kan ställas in längst upp eller längst ned i ett undervisningstips genom att ange egenskapen 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>

Lägg till en ikon

En ikon kan läggas till bredvid rubriken och underrubriken med hjälp av egenskapen IconSource . Rekommenderade ikonstorlekar är 16px, 24px och 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>

Aktivera lättavfärdning

Funktionen för att stänga av ljus är inaktiverad som standard, men den kan aktiveras genom att ange egenskapen IsLightDismissEnabled så att ett undervisningstips stänger, till exempel när en användare rullar eller interagerar med andra element i programmet. På grund av det här beteendet är tips för att stänga av ljus den bästa lösningen när ett tips måste placeras i ett rullningsbart område.

Stängningsknappen tas automatiskt bort från ett ljusavvisande aktiverat instruktionstips för att visa dess ljusavvisande beteende för användarna.

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

Bryta sig ur XAML-rotens gränser

Från och med Windows 10 version 1903 (version 18362) kan ett undervisningstips kringgå gränserna för XAML-roten och skärmen genom att ange egenskapen ShouldConstrainToRootBounds. När den här egenskapen är aktiverad kommer ett undervisningstips inte att försöka hålla sig inom gränserna för XAML-roten eller skärmen och kommer alltid att placeras i det angivna PreferredPlacement läget. Vi rekommenderar att du aktiverar egenskapen IsLightDismissEnabled och ställer in PreferredPlacement läge närmast mitten av XAML-roten för att säkerställa bästa möjliga upplevelse för användarna.

I tidigare versioner av Windows ignoreras den här egenskapen och undervisningstipset ligger alltid inom gränserna för XAML-roten.

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

Avbryta och skjuta upp stängning

Avslutningshändelsen kan användas för att avbryta och/eller skjuta upp stängningen av ett undervisningstips. Detta kan användas för att hålla undervisningstipset öppet eller ge tid för en åtgärd eller anpassad animering. När stängningen av ett undervisningstips avbryts kommer IsOpen att återgå till true, men den kommer att fortsätta vara falsk under fördröjningen. En programmatisk stängning kan också avbrytas.

Anmärkning

Om inget placeringsalternativ skulle göra det möjligt för ett undervisningstips att visas helt, itererar undervisningstipset genom sin händelselivscykel för att tvinga fram en stängning snarare än att visas utan en tillgänglig stängningsknapp. Om appen avbryter avslutningshändelsen kan undervisningstipset förbli öppet utan en tillgänglig stängningsknapp.

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

Relaterade artiklar

• dialogrutor och utfällningsmenyer