Tip k výuce
Tip pro výuku je částečně trvalý informační panel s bohatým obsahem, který poskytuje kontextové informace. Často se používá k informování, připomenutí a výuce uživatelů o důležitých a nových funkcích, které můžou zlepšit jejich zkušenosti.
Tip pro výuku může být světlý nebo vyžadovat, aby se explicitní akce zavřela. Výuková rada může cílit na konkrétní prvek uživatelského rozhraní pomocí šipky a může být použita také bez šipky nebo cílového prvku.
Je to správná kontrola?
Pomocí ovládacího prvku TeachingTip zaměřte pozornost uživatele na nové nebo důležité aktualizace a funkce, připomeňte uživateli nepodstatné možnosti, které by zlepšily jejich zkušenost, nebo naučte uživatele, jak úkol splnit.
Vzhledem k tomu, že výukový tip je přechodný, není doporučeným ovládacím prvkem pro poskytování upozornění uživatelům o chybách nebo důležitých změnách stavu.
Doporučení
- Tipy jsou nedostupné a neměly by obsahovat informace ani možnosti, které jsou pro prostředí aplikace důležité.
- Snažte se vyhnout zobrazování tipů pro výuku příliš často. Výukové tipy mají největší pravděpodobnost získání individuální pozornosti, když jsou rozloženy během dlouhých sezení nebo přes více sezení.
- Nechte tipy stručné a jejich téma jasné. Výzkum ukazuje, že uživatelé v průměru přečtou si jen 3-5 slov a pochopí pouze 2-3 slova před rozhodnutím, zda budou chtít interagovat s doporučením.
- Přístupnost výukového tipu pro herní ovladač není zaručena. U aplikací, které predikují vstup gamepadu, viz interakce mezi gamepadem a dálkovým ovládáním. Doporučuje se otestovat přístupnost herního panelu každého tipu pro výuku pomocí všech možných konfigurací uživatelského rozhraní aplikace.
- Při povolení tipu pro výuku, aby unikl z kořene XAML, se doporučuje také povolit vlastnost IsLightDismissEnabled a nastavit režim PreferredPlacement co nejblíže ke středu kořene XAML.
Změna konfigurace otevřeného výukového tipu
Během otevření tipu pro výuku je možné překonfigurovat určitý obsah a vlastnosti a projeví se okamžitě. Ostatní obsah a vlastnosti, jako je například vlastnost ikony, tlačítka Akce a Zavřít a změna konfigurace mezi nepovinným zavřením a explicitním zavřením, budou všechny vyžadovat zavření a opětovné otevření výukového tipu, aby se změny těchto vlastností projevily. Všimněte si, že změna chování při zavření z ručního zavření na lehké zavření, když je otevřený tip pro výuku, způsobí, že tlačítko Zavřít bude odstraněno dříve, než bude povoleno chování lehkého zavření, a tip může zůstat zablokovaný na obrazovce.
Příklady
Tip pro výuku může mít několik konfigurací, včetně těchto pozoruhodných:
Instrukční tip může cílit na konkrétní prvek uživatelského rozhraní, aby lépe objasnil kontext informací, které prezentuje.
Pokud zobrazené informace nesouvisí s konkrétním prvkem uživatelského rozhraní, může být vytvořen nesměrovaný tip výuky odebráním ocasu.
Tip pro výuku může vyžadovat, aby ho uživatel zavřel pomocí tlačítka "X" v horním rohu nebo tlačítka Zavřít v dolní části. Poradce pro výuku může být také se zapnutou možností snadného zavření, v takovém případě není k dispozici tlačítko pro zavření a poradce pro výuku se zavře, když se uživatel posune nebo interaguje s jinými prvky aplikace. Díky tomuto chování jsou tipy pro zrušení světla nejlepším řešením, když je potřeba umístit tip do posuvné oblasti.
Vytvoření výukového tipu
- Důležitá rozhraní API:třída TeachingTip
Galerie WinUI 3 aplikace obsahuje interaktivní příklady většiny ovládacích prvků, funkcí a možností WinUI 3. Získejte aplikaci z Microsoft Storu nebo získejte zdrojový kód na GitHubu.
Tady je XAML pro cílený ovládací prvek pro výukový tip, který předvádí základní vzhled výukového tipu včetně názvu a podnadpisu. Všimněte si, že výukové doporučení se může objevit kdekoli ve stromu prvků nebo kódu na pozadí. V následujícím příkladu se nachází ve službě 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();
}
}
Tady je výsledek, když se zobrazí stránka obsahující tlačítko a tip k výuce:
Ve výše uvedeném příkladu se vlastnosti Title a Subtitle používají k nastavení názvu a podnadpisu výukového tipu. Vlastnost Target je nastavena na "SaveButton" pro navázání vizuálního propojení mezi ní a tlačítkem. Chcete-li zobrazit výukový tip, jeho vlastnost IsOpen je nastavena na true.
Necílové tipy
Ne všechny tipy souvisí s prvkem na obrazovce. V těchto scénářích nenastavujte žádný cíl a výukový tip se místo toho zobrazí vzhledem k okrajům kořene XAML. Tip pro výuku ale může mít ocas odebrán a přitom zachovat umístění vzhledem k prvku uživatelského rozhraní nastavením vlastnosti TailVisibility na "Collapsed". Následující příklad je neadresovaný výukový tip.
<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>
Všimněte si, že v tomto příkladu je Tip k výuce ve stromu elementů, nikoli ve slovníku prostředků nebo v kódu na pozadí. To nemá žádný vliv na chování; výukový popis se zobrazí jenom při otevření a nezabírá žádné místo v rozložení.
Upřednostňované umístění
Rada pro výuku replikuje chování při umístění FlyoutPlacementMode s vlastností PreferredPlacement. Výchozí režim umístění se pokusí umístit výukový tip zaměřený na cíl nad cíl a výukový tip nezaměřený na konkrétní cíl uprostřed dolní části kořenového prvku xaml. Stejně jako u vyskakovacího okna, pokud upřednostňovaný režim umístění nebude mít dostatek prostoru pro zobrazení instruktážního tipu, bude automaticky zvolen jiný režim umístění.
Pro ty aplikace, které předpovídají vstupy gamepadu, se podívejte na téma interakce gamepadu a dálkového ovládání. Doporučuje se otestovat přístupnost herního panelu každého tipu pro výuku pomocí všech možných konfigurací uživatelského rozhraní aplikace.
Cílený výukový tip s nastaveným PreferredPlacement na "BottomLeft" se zobrazí s ocasem vystředěným na dolním okraji svého cíle a tělem výukového tipu posunutým směrem doleva.
<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>
V levém dolním rohu kořene xaml se zobrazí necílový tip pro výuku s jeho upřednostňovaným místem nastaveným na "BottomLeft".
<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>
Následující diagram znázorňuje výsledek všech 13 režimů PreferredPlacement, které lze nastavit pro cílené tipy pro výuku.
Následující diagram znázorňuje výsledek všech 13 režimů PreferredPlacement, které lze nastavit pro necílové tipy pro výuku.
Přidejte okraj umístění
Pomocí vlastnosti PlacementMargin můžete ovládat, jak daleko je cílený tip pro výuku odsazen od svého cíle a jak daleko je necílený tip pro výuku odsazen od okrajů kořene XAML. Stejně jako marginmá UmístěníMargin čtyři hodnoty – vlevo, vpravo, nahoře a dole – takže se použijí jenom relevantní hodnoty. Například PlacementMargin.Left se použije, když je špička vlevo od cíle nebo na levém okraji kořene XAML.
Následující příklad ukazuje tip bez cílení s PlacementMargin vlevo/nahoře/vpravo/dole, všechny nastavené na hodnotu 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>
Přidání obsahu
Obsah lze přidat do výukového tipu pomocí vlastnosti Content. Pokud je k dispozici více obsahu, než jakou velikost výukového tipu povolí, posuvník se automaticky povolí, aby se uživatel mohl posouvat v oblasti obsahu.
<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>
cs-CZ: 
Přidání tlačítek
Ve výchozím nastavení se vedle názvu výukového tipu zobrazí standardní tlačítko "X". Tlačítko Zavřít lze přizpůsobit pomocí vlastnosti CloseButtonContent, v takovém případě se tlačítko přesune do dolní části výukového tipu.
Poznámka: Na tipech s povolenou funkcí light-dismiss se nezobrazí tlačítko pro zavření
Vlastní tlačítko akce lze přidat nastavením ActionButtonContent vlastnost (a volitelně ActionButtonCommand a ActionButtonCommandParameter vlastnosti).
<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>
Obsah hlavního hrdiny
Obsah přes celou šířku může být přidán do výukové rady nastavením vlastnosti HeroContent. Umístění obsahu hrdiny lze nastavit na začátek nebo konec výukového tipu nastavením vlastnosti 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>
Přidání ikony
Ikonu lze přidat vedle názvu a podnadpisu pomocí vlastnosti IconSource. Mezi doporučené velikosti ikon patří 16px, 24px 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>
Povolení světlého zavření
Funkce light-dismiss je ve výchozím nastavení zakázána, ale lze ji povolit nastavením vlastnosti IsLightDismissEnabled tak, aby se výukový tip zavřel například tehdy, když se uživatel posouvá nebo interaguje s jinými prvky aplikace. Díky tomuto chování jsou tipy pro zrušení světla nejlepším řešením, když je potřeba umístit tip do posuvné oblasti.
Tlačítko Zavřít bude automaticky odebráno z výukového tipu s funkcí lehkého zavření, aby uživatelé identifikovali jeho chování při zavření.
<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>
Unikání z kořenových hranic XAML
Počínaje Windows 10, verze 1903 (build 18362), může tip pro výuku uniknout hranicím kořenového XAML a obrazovky nastavením vlastnosti ShouldConstrainToRootBounds. Pokud je tato vlastnost povolená, tip pro výuku se nepokusí zůstat v mezích kořenového adresáře XAML ani na obrazovce a bude vždy umístěn v nastaveném režimu PreferredPlacement. Doporučujeme povolit vlastnost IsLightDismissEnabled a nastavit režim PreferredPlacement nejblíže ke středu kořenového adresáře XAML, aby se zajistilo nejlepší prostředí pro uživatele.
V dřívějších verzích Windows je tato vlastnost ignorována a tip výuky vždy zůstává v mezích kořenového adresáře 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>
Zrušení a odložení uzavření
Událost Ukončení lze použít ke zrušení a/nebo odložení uzavření instruktáže. Toto může být použito k tomu, aby byl vzdělávací tip otevřený, nebo k poskytnutí času na provedení akce či vlastní animace. Když se zavření výukového tipu zruší, IsOpen se vrátí na true, ale během odkladu zůstane false. Programové zavření je také možné zrušit.
Poznámka
Pokud žádná možnost umístění neumožní úplné zobrazení instruktážního tipu, instruktážní tip projde svým cyklem událostí, aby vynutil uzavření, než aby se zobrazil bez dostupného tlačítka pro zavření. Pokud aplikace zruší uzavírací událost, může výukový tip zůstat otevřený bez přístupného tlačítka Zavřít.
<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();
}
}
}
}
UWP a WinUI 2
Důležitý
Informace a příklady v tomto článku jsou optimalizované pro aplikace, které používají Windows App SDK a WinUI 3, ale obecně platí pro aplikace pro UPW, které používají WinUI 2. Informace o konkrétních platformách a příklady najdete v referenčních informacích k rozhraní API pro UPW.
Tato část obsahuje informace, které potřebujete k použití ovládacího prvku v aplikaci pro UWP nebo WinUI 2.
Výukový tip pro aplikace pro UPW vyžaduje WinUI 2. Další informace, včetně pokynů k instalaci, naleznete v tématu WinUI. Rozhraní API pro tento ovládací prvek jsou v oboru názvů Microsoft.UI.Xaml.Controls.
- WinUI 2 APIS:výuka
- Otevřete aplikaci Galerie WinUI 2 a podívejte se na ukázkový tip v akci. Aplikace WinUI 2 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcí WinUI 2. Získejte aplikaci z Microsoft Storu nebo získejte zdrojový kód na GitHubu.
Pokud chcete použít kód v tomto článku s WinUI 2, použijte alias v JAZYCE XAML (používáme muxc) k reprezentaci rozhraní API knihovny uživatelského rozhraní Systému Windows, která jsou součástí vašeho projektu. Další informace najdete v tématu Začínáme s WinUI 2.
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:TeachingTip />
Související články
Windows developer