Tekstvak

Met het besturingselement Tekstvak kan een gebruiker tekst in een app typen. Het wordt meestal gebruikt om één regel tekst vast te leggen, maar kan worden geconfigureerd voor het vastleggen van meerdere regels tekst. De tekst wordt op het scherm weergegeven in een eenvoudige, uniforme, tekst zonder opmaak.

een tekstvak

Tekstvak heeft een aantal functies waarmee het invoeren van tekst kan worden vereenvoudigd. Het wordt geleverd met een vertrouwd, ingebouwd contextmenu met ondersteuning voor het kopiëren en plakken van tekst. Met de knop Alles wissen kan een gebruiker snel alle tekst verwijderen die is ingevoerd. Er zijn ook functies voor spellingcontrole ingebouwd en standaard ingeschakeld.

Is dit de juiste controle?

Gebruik een tekstvak controle om een gebruiker ongeformatteerde tekst in te laten voeren en bewerken, zoals in een formulier. U kunt de eigenschap Text gebruiken om de tekst in een tekstvak op te halen en in te stellen.

U kunt een tekstvak alleen-lezen maken, maar dit moet een tijdelijke, voorwaardelijke status zijn. Als de tekst nooit kan worden bewerkt, kunt u in plaats daarvan een TextBlock gebruiken.

Gebruik een PasswordBox besturingselement voor het verzamelen van een wachtwoord of andere persoonlijke gegevens, zoals een burgerservicenummer. Een wachtwoordvak ziet eruit als een tekstvak, behalve dat er opsommingstekens worden weergegeven in plaats van de tekst die is ingevoerd.

Gebruik een AutoSuggestBox besturingselement om de gebruiker zoektermen te laten invoeren of om de gebruiker een lijst met suggesties weer te geven waaruit u kunt kiezen terwijl ze typen.

Gebruik een RichEditBox- om rtf-tekstbestanden weer te geven en te bewerken.

Zie het artikel Tekstbesturingselementen voor meer informatie over het kiezen van het juiste tekstbesturingselement.

Aanbevelingen

Gebruik een label of plaatsaanduiding als het doel van het tekstvak niet duidelijk is. Een label is zichtbaar of het invoervak wel of niet een waarde heeft. Tekst van tijdelijke aanduiding wordt weergegeven in het invoervak en verdwijnt zodra een waarde is ingevoerd.
Geef het tekstvak een geschikte breedte voor het bereik van waarden dat kan worden ingevoerd. De lengte van Word verschilt per taal, dus houd rekening met lokalisatie als u wilt dat uw app wereldklaar is.
Een tekstvak is meestal één regel (TextWrap = "NoWrap"). Wanneer gebruikers een lange tekenreeks moeten invoeren of bewerken, stelt u het invoervak in op meerdere regels (TextWrap = "Wrap").
Over het algemeen wordt een tekstvak gebruikt voor bewerkbare tekst. Maar u kunt een tekstvak alleen-lezen maken, zodat de inhoud ervan kan worden gelezen, geselecteerd en gekopieerd, maar niet bewerkt.
Als u de rommel in een weergave wilt verminderen, kunt u overwegen om een set tekstinvoervakken alleen weer te geven wanneer een selectievakje is aangevinkt. U kunt ook de ingeschakelde status van een tekstvak binden aan een besturingselement, zoals een selectievakje.
Overweeg hoe u wilt dat een tekstvak zich gedraagt wanneer het een waarde bevat en de gebruiker erop tikt. Het standaardgedrag is geschikt voor het bewerken van de waarde in plaats van deze te vervangen; de invoegpositie wordt tussen woorden geplaatst en er wordt niets geselecteerd. Als vervanging de meest voorkomende use-case is voor een bepaald invoervak, kunt u alle tekst in het veld selecteren wanneer het besturingselement de focus krijgt en de selectie wordt vervangen door typen.

Invoervakken met één regel

Gebruik verschillende tekstvakken met één regel om veel kleine stukjes tekstgegevens vast te leggen. Als de tekstvakken van nature gerelateerd zijn, groepeer deze dan samen.
Maak de grootte van tekstvakken met één regel iets breder dan de langst verwachte invoer. Als dit het besturingselement te breed maakt, verdeel het dan in twee besturingselementen. U kunt bijvoorbeeld één adresinvoer splitsen in 'Adresregel 1' en 'Adresregel 2'.
Stel een maximale lengte in voor tekens die kunnen worden ingevoerd. Als de back-upgegevensbron geen lange invoertekenreeks toestaat, beperkt u de invoer en gebruikt u een validatiepop-up om gebruikers te laten weten wanneer ze de limiet bereiken.
Gebruik besturingselementen voor tekstinvoer met één regel om kleine stukjes tekst van gebruikers te verzamelen.

In het volgende voorbeeld ziet u een tekstvak met één regel om een antwoord op een beveiligingsvraag vast te leggen. Het antwoord is naar verwachting kort en daarom is hier een tekstvak met één regel geschikt.
Gebruik een set korte, vaste tekstinvoerbesturingselementen met één regel om gegevens met een specifieke indeling in te voeren.
Gebruik een besturingselement voor tekstinvoer met één regel zonder beperkingen om tekenreeksen in te voeren of te bewerken, gecombineerd met een opdrachtknop waarmee gebruikers geldige waarden kunnen selecteren.

Besturingselementen voor tekstinvoer met meerdere regels

Wanneer u een tekstvak met opmaak aanmaakt, voorziet u deze van stijlknoppen en voert u hun acties uit.
Gebruik een lettertype dat overeenkomt met de stijl van uw app.
Maak de hoogte van het tekstveld voldoende om plaats te bieden aan standaardinvoer.
Wanneer u lange tekstgedeelten met een maximum aantal tekens of woorden vastlegt, gebruikt u een platte tekst vak en geeft u een real-time teller op om de gebruikers te laten zien hoeveel tekens of woorden zij nog hebben voordat ze de limiet bereiken. U moet de teller zelf maken; plaats het onder het tekstvak en werk het dynamisch bij terwijl de gebruiker elk teken of woord invoert.
Laat de besturingselementen voor tekstinvoer niet in hoogte groeien terwijl gebruikers typen.
Gebruik geen tekstvak met meerdere regels wanneer gebruikers slechts één regel nodig hebben.
Gebruik geen opmaaktekstveld als een gewoon tekstveld voldoende is.

Een tekstvak maken

Belangrijke API's:TextBox-klasse, Text-eigenschap

Open de app WinUI 3 Gallery en zie het tekstvak in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Hier is de XAML voor een eenvoudig tekstvak met een koptekst en plaatsaanduidingstekst.

<TextBox Width="500" Header="Notes" PlaceholderText="Type your notes here"/>

TextBox textBox = new TextBox();
textBox.Width = 300;
textBox.Header = "Notes";
textBox.PlaceholderText = "Type your notes here";
// Add the TextBox to the visual tree.
rootGrid.Children.Add(textBox);

Dit is het tekstvak dat het resultaat is van deze XAML.

Een eenvoudig tekstvak

Een tekstvak gebruiken voor gegevensinvoer in een formulier

Het is gebruikelijk om een tekstvak te gebruiken om gegevensinvoer in een formulier te accepteren en de eigenschap Text te gebruiken om de volledige tekenreeks uit het tekstvak op te halen. Meestal gebruikt u een gebeurtenis zoals een knop Verzenden om toegang te krijgen tot de eigenschap Tekst, maar u kunt de gebeurtenis TextChanged of TextChanging gebeurtenis afhandelen als u iets moet doen wanneer de tekst wordt gewijzigd.

In dit voorbeeld ziet u hoe u de huidige inhoud van een tekstvak kunt ophalen en instellen.

<TextBox name="SampleTextBox" Text="Sample Text"/>

string sampleText = SampleTextBox.Text;
...
SampleTextBox.Text = "Sample text retrieved";

U kunt een Koptekst (of label) en Tijdelijke aanduidingstekst (of watermerk) aan het tekstvak toevoegen om de gebruiker een indicatie te geven van de functie van het tekstvak. Als u het uiterlijk van de koptekst wilt aanpassen, kunt u de eigenschap HeaderTemplate instellen in plaats van Koptekst. Zie Richtlijnen voor labelsvoor ontwerpinformatie.

U kunt het aantal tekens beperken dat de gebruiker kan typen door de eigenschap MaxLength in te stellen. MaxLength beperkt echter niet de lengte van geplakte tekst. Gebruik de gebeurtenis Plakken om geplakte tekst te wijzigen als dit belangrijk is voor uw app.

Het tekstvak bevat een wisknop ('X') die wordt weergegeven wanneer tekst in het vak wordt ingevoerd. Wanneer een gebruiker op de X klikt, wordt de tekst in het tekstvak gewist. Het ziet er zo uit.

een tekstvak met een knop Alles wissen

De knop Alles wissen wordt alleen weergegeven voor bewerkbare tekstvakken met één regel die tekst bevatten en de focus hebben.

De knop Alles wissen wordt niet weergegeven in een van deze gevallen:

IsReadOnly is waar
AcceptsReturn is waar
TextWrap- heeft een andere waarde dan NoWrap-

In dit voorbeeld ziet u hoe u de huidige inhoud van een tekstvak kunt ophalen en instellen.

<TextBox name="SampleTextBox" Text="Sample Text"/>

string sampleText = SampleTextBox.Text;
...
SampleTextBox.Text = "Sample text retrieved";

Een tekstvak alleen voor lezen maken

U kunt een tekstvak alleen-lezen maken door de eigenschap IsReadOnly in te stellen op true. Doorgaans schakelt u deze eigenschap in uw app-code in op basis van voorwaarden in uw app. Als u tekst nodig hebt die altijd alleen-lezen is, kunt u in plaats daarvan een TextBlock gebruiken.

U kunt een tekstvak alleen-lezen maken door de eigenschap IsReadOnly in te stellen op true. U hebt bijvoorbeeld een tekstvak voor een gebruiker om opmerkingen in te voeren die alleen onder bepaalde voorwaarden zijn ingeschakeld. U kunt het tekstvak alleen-lezen maken totdat aan de voorwaarden wordt voldaan. Als u alleen tekst wilt weergeven, kunt u in plaats daarvan een TextBlock of RichTextBlock gebruiken.

Een alleen-lezen tekstvak ziet er hetzelfde uit als een tekstvak voor lezen/schrijven, dus het kan verwarrend zijn voor een gebruiker. Een gebruiker kan tekst selecteren en kopiëren. IsIngeschakeld

Invoer met meerdere regels inschakelen

Er zijn twee eigenschappen die u kunt gebruiken om te bepalen of in het tekstvak tekst op meer dan één regel wordt weergegeven. Normaal gesproken stelt u beide eigenschappen in om een tekstvak met meerdere regels te maken.

Als u het tekstvak de nieuwe regel of retourtekens wilt toestaan en weergeven, stelt u de eigenschap AcceptsReturn in op true.
Om tekstomloop in te schakelen, stelt u de eigenschap TextWrapping in op Wrap. Dit zorgt ervoor dat de tekst terugloopt wanneer deze de rand van het tekstvak bereikt, onafhankelijk van regelscheidingstekens.

Opmerking

TextBox en RichEditBox bieden geen ondersteuning voor de WrapWholeWords- waarde voor hun TextWrapping-eigenschappen. Als u WrapWholeWords probeert te gebruiken als een waarde voor TextBox.TextWrapping of RichEditBox.TextWrapping, wordt er een ongeldige argumentuitzondering gegenereerd.

Een tekstvak met meerdere regels blijft verticaal groeien wanneer tekst wordt ingevoerd, tenzij deze wordt beperkt door de eigenschap Height of MaxHeight of door een bovenliggende container. U moet testen of een tekstvak met meerdere regels niet verder groeit dan het zichtbare gebied en de groei ervan beperken als dat wel het geval is. U wordt aangeraden altijd een juiste hoogte op te geven voor een tekstvak met meerdere regels en het niet in hoogte te laten groeien terwijl de gebruiker typt.

Schuiven met behulp van een schuifwiel of aanraking wordt automatisch ingeschakeld wanneer dat nodig is. De verticale schuifbalken zijn echter niet standaard zichtbaar. U kunt de verticale schuifbalken weergeven door ScrollViewer.VerticalScrollBarVisibility in te stellen op Auto op de ingebouwde ScrollViewer, zoals hier weergegeven.

<TextBox AcceptsReturn="True" TextWrapping="Wrap"
         MaxHeight="172" Width="300" Header="Description"
         ScrollViewer.VerticalScrollBarVisibility="Auto"/>

TextBox textBox = new TextBox();
textBox.AcceptsReturn = true;
textBox.TextWrapping = TextWrapping.Wrap;
textBox.MaxHeight = 172;
textBox.Width = 300;
textBox.Header = "Description";
ScrollViewer.SetVerticalScrollBarVisibility(textBox, ScrollBarVisibility.Auto);

Zo ziet het tekstvak eruit nadat tekst is toegevoegd.

een tekstvak met meerdere regels

De tekstweergave opmaken

Gebruik de eigenschap TextAlignment om tekst in een tekstvak uit te lijnen. Als u het tekstvak in de indeling van de pagina wilt uitlijnen, gebruikt u de eigenschappen HorizontalAlignment en VerticalAlignment.

Hoewel het tekstvak alleen niet-opgemaakte tekst ondersteunt, kunt u aanpassen hoe de tekst wordt weergegeven in het tekstvak zodat deze overeenkomt met uw huisstijl. U kunt standaardeigenschappen Control instellen, zoals FontFamily, FontSize, FontStyle, Background, Foregrounden CharacterSpacing om het uiterlijk van de tekst te wijzigen. Deze eigenschappen zijn alleen van invloed op de wijze waarop de tekst lokaal wordt weergegeven in het tekstvak. Als u de tekst dus in een besturingselement voor tekst met opmaak wilt kopiëren en plakken, wordt er bijvoorbeeld geen opmaak toegepast.

In dit voorbeeld ziet u een alleen-lezen tekstvak met verschillende eigenschappen die zijn ingesteld om het uiterlijk van de tekst aan te passen.

<TextBox Text="Sample Text" IsReadOnly="True"
         FontFamily="Verdana" FontSize="24"
         FontWeight="Bold" FontStyle="Italic"
         CharacterSpacing="200" Width="300"
         Foreground="Blue" Background="Beige"/>

TextBox textBox = new TextBox();
textBox.Text = "Sample Text";
textBox.IsReadOnly = true;
textBox.FontFamily = new FontFamily("Verdana");
textBox.FontSize = 24;
textBox.FontWeight = Windows.UI.Text.FontWeights.Bold;
textBox.FontStyle = Windows.UI.Text.FontStyle.Italic;
textBox.CharacterSpacing = 200;
textBox.Width = 300;
textBox.Background = new SolidColorBrush(Windows.UI.Colors.Beige);
textBox.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
// Add the TextBox to the visual tree.
rootGrid.Children.Add(textBox);

Het resulterende tekstvak ziet er als volgt uit.

een opgemaakt tekstvak

De opdrachten die in het contextmenu van het tekstvak worden weergegeven, zijn standaard afhankelijk van de status van het tekstvak. De volgende opdrachten kunnen bijvoorbeeld worden weergegeven wanneer het tekstvak kan worden bewerkt.

Command	Wordt weergegeven wanneer...
Kopiëren	tekst is geselecteerd.
Snijden	tekst is geselecteerd.
Plakken	het klembord bevat tekst.
Alles selecteren	het tekstvak bevat tekst.
Ongedaan	de tekst is gewijzigd.

Om de opdrachten in het contextmenu te wijzigen, hanteer de ContextMenuOpening gebeurtenis. Zie voor een voorbeeld hiervan de De CommandBarFlyout van RichEditBox aanpassen: 'Delen' toevoegen voorbeeld in de WinUI 2 Gallery. Zie Richtlijnen voor contextmenu'svoor ontwerpinformatie.

Selecteren, kopiëren en plakken

U kunt de geselecteerde tekst in een tekstvak ophalen of instellen met behulp van de eigenschap SelectedText. Gebruik de eigenschappen SelectionStart en SelectionLength en de Select en SelectAll methoden om de tekstselectie te bewerken. De gebeurtenis SelectionChanged verwerken om iets te doen wanneer de gebruiker tekst selecteert of de selectie ongedaan maakt. U kunt de kleur wijzigen die wordt gebruikt om de geselecteerde tekst te markeren door de eigenschap SelectionHighlightColor in te stellen.

Tekstvak ondersteunt standaard kopiëren en plakken. U kunt aangepaste verwerking van de gebeurtenis Plakken bepalen voor bewerkbare tekstvelden in uw app. U kunt bijvoorbeeld de regeleinden van een adres met meerdere regels verwijderen wanneer u het in een zoekvak met één regel plakt. U kunt ook de lengte van de geplakte tekst controleren en de gebruiker waarschuwen als deze de maximale lengte overschrijdt die kan worden opgeslagen in een database. Zie de gebeurtenis Plakken voor voorbeelden en meer informatie.

Hier hebben we een voorbeeld van deze eigenschappen en methoden die worden gebruikt. Wanneer u tekst in het eerste tekstvak selecteert, wordt de geselecteerde tekst weergegeven in het tweede tekstvak, dat alleen-lezen is. De waarden van de eigenschappen SelectionLength en SelectionStart worden weergegeven in twee tekstblokken. Dit wordt gedaan door de gebeurtenis "SelectionChanged" te gebruiken.

<StackPanel>
   <TextBox x:Name="textBox1" Height="75" Width="300" Margin="10"
         Text="The text that is selected in this TextBox will show up in the read only TextBox below."
         TextWrapping="Wrap" AcceptsReturn="True"
         SelectionChanged="TextBox1_SelectionChanged" />
   <TextBox x:Name="textBox2" Height="75" Width="300" Margin="5"
         TextWrapping="Wrap" AcceptsReturn="True" IsReadOnly="True"/>
   <TextBlock x:Name="label1" HorizontalAlignment="Center"/>
   <TextBlock x:Name="label2" HorizontalAlignment="Center"/>
</StackPanel>

private void TextBox1_SelectionChanged(object sender, RoutedEventArgs e)
{
    textBox2.Text = textBox1.SelectedText;
    label1.Text = "Selection length is " + textBox1.SelectionLength.ToString();
    label2.Text = "Selection starts at " + textBox1.SelectionStart.ToString();
}

Dit is het resultaat van deze code.

geselecteerde tekst in een tekstvak

Het juiste toetsenbord kiezen voor uw tekstbesturing

Om gebruikers te helpen bij het invoeren van gegevens via het schermtoetsenbord of SIP (Soft Input Panel), kunt u het invoerbereik van het tekstbeheer instellen op basis van het soort gegevens dat de gebruiker moet invoeren.

Het schermtoetsenbord kan worden gebruikt voor tekstinvoer wanneer uw app wordt uitgevoerd op een apparaat met een aanraakscherm. Het schermtoetsenbord wordt aangeroepen wanneer de gebruiker op een bewerkbaar invoerveld tikt, zoals een tekstvak of RichEditBox. U kunt het veel sneller en eenvoudiger maken voor gebruikers om gegevens in uw app in te voeren door het invoerbereik van het tekstbeheer in te stellen op basis van het soort gegevens dat de gebruiker verwacht in te voeren. Het invoerbereik biedt een hint aan het systeem over het type tekstinvoer dat door het besturingselement wordt verwacht, zodat het systeem een gespecialiseerde toetsenbordindeling voor aanraaktoetsenbord kan bieden voor het invoertype.

Als een tekstvak bijvoorbeeld alleen wordt gebruikt om een pincode van 4 cijfers in te voeren, stelt u de eigenschap InputScope in op Getal. Dit geeft aan dat het systeem de indeling van het numerieke toetsenblok weergeeft, waardoor de gebruiker de pincode gemakkelijker kan invoeren.

Belangrijk Het invoerbereik veroorzaakt geen invoervalidatie en voorkomt niet dat de gebruiker invoer levert via een hardwaretoetsenbord of een ander invoerapparaat. U bent nog steeds verantwoordelijk voor het valideren van de invoer in uw code, indien nodig.

Andere eigenschappen die van invloed zijn op het schermtoetsenbord zijn IsSpellCheckEnabled, IsTextPredictionEnableden PreventKeyboardDisplayOnProgrammaticFocus. (IsSpellCheckEnabled heeft ook invloed op het tekstvak wanneer een hardwaretoetsenbord wordt gebruikt.)

Voor meer informatie en voorbeelden, zie om het invoerbereik te gebruiken om het schermtoetsenbord aan te passen en de documentatie over eigenschappen.

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

API's voor deze controle bevinden zich in de naamruimte Windows.UI.Xaml.Controls.

UWP-API's:TextBox-klasse, eigenschap Text
Open de App WinUI 2 Gallery en zie het tekstvak in actie. De WinUI 2 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 2. Download de app uit de Microsoft Store of bezoek GitHubvoor de broncode.

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen en sjablonen voor alle besturingselementen te verkrijgen. WinUI 2.2 of hoger bevat een nieuwe sjabloon voor dit besturingselement dat gebruikmaakt van afgeronde hoeken. Zie Hoekstraal voor meer informatie.

Feedback

Is deze pagina nuttig?

Last updated on 2025-11-25