Dela via

Textkontroller

Textkontroller består av textinmatningsrutor, lösenordsrutor, automatiska förslagsrutor och textblock. XAML-ramverket innehåller flera kontroller för återgivning, inmatning och redigering av text samt en uppsättning egenskaper för formatering av texten.

Viktiga API:er: TextBlock-klass, RichTextBlock-klass, TextBox-klass, RichEditBox-klass, AutoSuggestBox-klass, PasswordBox-klass

Är det här rätt kontroll?

Vilken textkontroll du använder beror på ditt scenario. Använd den här informationen om du vill välja rätt textkontroll som ska användas i din app.

Rendera skrivskyddad text

Använd en TextBlock för att visa mest skrivskyddad text i din app. Du kan använda den för att visa text med en rad eller flera rader, infogade hyperlänkar och text med formatering som fet, kursiv eller understruken.

TextBlock är vanligtvis enklare att använda och ger bättre prestanda för textåtergivning än RichTextBlock, så det är att föredra för de flesta appgränssnittstexter. Du kan enkelt komma åt och använda text från en TextBlock i din app genom att hämta värdet för egenskapen Text .

Den innehåller också många av samma formateringsalternativ för att anpassa hur texten återges. Även om du kan placera radbrytningar i texten är TextBlock utformat för att visa ett stycke och stöder inte text indrag.

Använd en RichTextBlock när du behöver stöd för flera stycken, text med flera kolumner eller andra komplexa textlayouter eller infogade gränssnittselement som bilder. RichTextBlock innehåller flera funktioner för avancerad textlayout.

Innehållsegenskapen för RichTextBlock är egenskapen Block , som stöder styckebaserad text via elementet Stycke . Den har ingen textegenskap som du kan använda för att enkelt komma åt kontrollens textinnehåll i din app.

Textinmatning

Använd en TextBox-kontroll för att låta en användare ange och redigera oformaterad text, till exempel i ett formulär. Du kan använda egenskapen Text för att hämta och ange texten i en textruta.

Du kan göra en textruta skrivskyddad, men detta bör vara ett tillfälligt villkorstillstånd. Om texten aldrig kan redigeras kan du överväga att använda en TextBlock i stället.

Använd en PasswordBox-kontroll för att samla in ett lösenord eller andra privata data, till exempel ett personnummer. En lösenordsruta är en textinmatningsruta som döljer de tecken som skrivs i den för sekretessens skull. En lösenordsruta ser ut som en textinmatningsruta, förutom att den återger punkter i stället för den text som har angetts. Punkttecknet kan anpassas.

Använd en AutoSuggestBox-kontroll för att visa användaren en lista med förslag att välja mellan när de skriver. En automatisk förslagsruta är en textpostruta som utlöser en lista med grundläggande sökförslag. Föreslagna termer kan hämtas från en kombination av populära söktermer och historiska användarangivna termer.

Du bör också använda en AutoSuggestBox-kontroll för att implementera en sökruta.

Använd en RichEditBox för att visa och redigera textfiler. Du använder inte en RichEditBox för att hämta användarindata till din app på samma sätt som du använder andra standardrutor för textinmatning. I stället använder du den för att arbeta med textfiler som är separata från din app. Du sparar vanligtvis text som angetts i en RichEditBox i en .rtf fil.

Är textinmatning det bästa alternativet?

Det finns många sätt att få användarindata i din app. De här frågorna hjälper dig att svara på om någon av standardtextinmatningsrutorna eller en annan kontroll passar bäst för att få användarindata.

  • Är det praktiskt att effektivt räkna upp alla giltiga värden? I så fall bör du överväga att använda en av markeringskontrollerna, till exempel en kryssruta, listruta, listruta, alternativknapp, skjutreglage, växlingsknapp, datumväljare eller tidsväljare.
  • Finns det en ganska liten uppsättning giltiga värden? I så fall bör du överväga en listruta eller en listruta, särskilt om värdena är längre än några tecken.
  • Är giltiga data helt obehindrat? Eller är giltiga data endast begränsade efter format (begränsad längd eller teckentyper)? I så fall använder du en textinmatningskontroll. Du kan begränsa antalet tecken som kan anges och du kan verifiera formatet i din appkod.
  • Representerar värdet en datatyp som har en specialiserad gemensam kontroll? I så fall använder du lämplig kontroll i stället för en textinmatningskontroll. Du kan till exempel använda en DatePicker i stället för en textinmatningskontroll för att acceptera en datumpost.
  • Om data är strikt numeriska:
    • Anges värdet ungefärligt och/eller i förhållande till en annan kvantitet på samma sida? I så fall använder du ett skjutreglage.
    • Skulle användaren dra nytta av omedelbar feedback om effekten av att ställa in ändringar? I så fall använder du ett skjutreglage, eventuellt med en tillhörande kontroll.
    • Kommer det angivna värdet sannolikt att justeras efter att resultatet observerats, till exempel med volym- eller skärmljusstyrka? I så fall använder du ett skjutreglage.

Examples

WinUI 2-galleri
WinUI-galleri

Om du har installerat WinUI 2-galleriappen klickar du här för att öppna appen och se textkontrollerna i praktiken.

Textruta

En textruta

Automatisk förslagsruta

Exempel på den utökade auto-suggest-kontrollen

Rutan Lösenord

Fokustillstånd för lösenordsruta som skriver text

Skapa en textkontroll

Se dessa artiklar för information och exempel som är specifika för varje textkontroll.

Riktlinjer för teckensnitt och format

I de här artiklarna finns riktlinjer för teckensnitt:

Penninmatning

Gäller för: Textruta, RichEditBox, AutoSuggestBox

Från och med Windows 10, version 1803, har XAML-textinmatningsrutor inbäddat stöd för penninmatning med Windows Ink. När en användare trycker på en textinmatningsruta med en Windows-penna omvandlas textrutan så att användaren kan skriva direkt till den med en penna i stället för att öppna en separat indatapanel.

Textrutan expanderas när den knackas med pennan

Mer information finns i Textinmatning med handskriftsvyn.

Välj rätt tangentbord för textkontrollen

Gäller för: Textruta, PasswordBox RichEditBox

För att hjälpa användarna att ange data med hjälp av pektangentbordet eller soft input panel (SIP) kan du ange textkontrollens indataomfång så att det matchar den typ av data som användaren förväntas ange.

Tips Den här informationen gäller endast SIP. Den gäller inte för maskinvarutangentbord eller skärmtangentbordet som är tillgängligt i alternativen För enkel åtkomst i Windows.

Pektangentbordet kan användas för textinmatning när appen körs på en enhet med en pekskärm. Pektangentbordet anropas när användaren trycker på ett redigerbart indatafält, till exempel en textruta eller RichEditBox. Du kan göra det mycket snabbare och enklare för användare att ange data i din app genom att ange textkontrollens indataomfång så att det matchar den typ av data som du förväntar dig att användaren ska ange. Indataomfånget ger ett tips till systemet om vilken typ av textinmatning som förväntas av kontrollen så att systemet kan tillhandahålla en specialiserad pektangentbordslayout för indatatypen.

Om en textruta till exempel bara används för att ange en 4-siffrig PIN-kod anger du egenskapen InputScope till Tal. Detta talar om för systemet att visa nummerknappsatslayouten, vilket gör det enklare för användaren att ange PIN-koden.

Viktigt!
Indataomfånget gör inte att någon indataverifiering utförs och hindrar inte användaren från att ange några indata via ett maskinvarutangentbord eller någon annan indataenhet. Du ansvarar fortfarande för att verifiera indata i koden efter behov.

Mer information finns i Använda indataomfång för att ändra pektangentbordet.

Färgteckensnitt

Gäller för: TextBlock, RichTextBlock, TextBox, RichEditBox

Windows har möjlighet för teckensnitt att innehålla flera färgade lager för varje tecken. Till exempel definierar Segoe UI Emoji-teckensnittet färgversioner av Uttryckssymbolen och andra Emoji-tecken.

Standard- och RTF-kontrollerna stöder visningsfärgsteckensnitt. Som standard är egenskapen IsColorFontEnabledsann och teckensnitt med dessa ytterligare lager återges i färg. Standardfärgteckensnittet i systemet är Segoe UI Emoji och kontrollerna återgår till det här teckensnittet för att visa tecken i färg.

<TextBlock FontSize="30">Hello ☺⛄☂♨⛅</TextBlock>

Den renderade texten ser ut så här:

Textblock med färgteckensnitt

Mer information finns i egenskapen IsColorFontEnabled .

Riktlinjer för rad- och styckeavgränsare

Gäller för: TextBlock, RichTextBlock, textruta med flera rader, RichEditBox

Använd radavgränsningstecknet (0x2028) och styckeavgränsartecknet (0x2029) för att dela oformaterad text. En ny rad påbörjas efter varje radavgränsare. Ett nytt stycke påbörjas efter varje styckeavgränsare.

Det är inte nödvändigt att starta den första raden eller stycket i en fil med dessa tecken eller att avsluta den sista raden eller stycket med dem. Detta indikerar att det finns en tom rad eller ett stycke på den platsen.

Din app kan använda radavgränsaren för att ange en ovillkorlig radslut. Radavgränsare motsvarar dock inte de separata vagnretur- och radmatningstecken, eller till en kombination av dessa tecken. Radavgränsare måste bearbetas separat från vagnretur och radmatningstecken.

Appen kan infoga en styckeavgränsare mellan textstycken. Med den här avgränsaren kan du skapa oformaterade textfiler som kan formateras med olika linjebredder i olika operativsystem. Målsystemet kan ignorera alla radavgränsare och endast bryt stycken vid styckeavgränsarna.

Riktlinjer för stavningskontroll

Gäller för: Textruta, RichEditBox

Under textinmatning och redigering informerar stavningskontroll användaren om att ett ord är felstavat genom att markera det med en röd squiggle och ger användaren ett sätt att korrigera felstavningen.

Här är ett exempel på den inbyggda stavningskontroll:

den inbyggda stavningskontroll

Använd stavningskontroll med textinmatningskontroller för dessa två syften:

  • Så här korrigerar du felstavningar automatiskt

    Stavningskontrollmotorn korrigerar automatiskt felstavade ord när den är säker på korrigeringen. Motorn ändrar till exempel automatiskt "the" till "the".

  • Visa alternativa stavningar

    När stavningskontrollmotorn inte är säker på korrigeringarna lägger den till en röd linje under det felstavade ordet och visar alternativen i en snabbmeny när du trycker eller högerklickar på ordet.

  • Använd stavningskontroll för att hjälpa användare när de anger ord eller meningar i textinmatningskontroller. Stavningskontroll fungerar med touch-, mus- och tangentbordsindata.

  • Använd inte stavningskontroll när ett ord sannolikt inte finns i ordlistan eller om användarna inte skulle värdera stavningskontroll. Aktivera den till exempel inte om textrutan är avsedd att avbilda ett telefonnummer eller namn.

  • Inaktivera inte stavningskontroll bara för att den aktuella stavningskontrollmotorn inte stöder ditt appspråk. När stavningskontrollsprogrammet inte stöder ett språk gör det ingenting, så det skadar inte att lämna alternativet på. Vissa användare kan också använda en IME (Input Method Editor) för att ange ett annat språk i din app, och det språket kan stödjas. När du till exempel skapar en japansk språkapp, även om stavningskontrollmotorn kanske för närvarande inte känner igen språket, ska du inte inaktivera stavningskontroll. Användaren kan växla till en engelsk IME och skriva engelska i appen. Om stavningskontroll är aktiverat kontrolleras stavningskontrollen på engelska.

För TextBox- och RichEditBox-kontroller aktiveras stavningskontroll som standard. Du kan inaktivera det genom att ange egenskapen IsSpellCheckEnabled till false.

För designers

För utvecklare (XAML)