Textové pole

Ovládací prvek TextBox umožňuje uživateli zadat text do aplikace. Obvykle se používá k zachycení jednoho řádku textu, ale je možné ho nakonfigurovat tak, aby zachytil více řádků textu. Text se zobrazí na obrazovce v jednoduchém, jednotném formátu prostého textu.

textové pole

TextBox obsahuje řadu funkcí, které můžou zjednodušit zadávání textu. Součástí je dobře známá integrovaná kontextová nabídka s podporou kopírování a vkládání textu. Tlačítko Vymazat vše umožňuje uživateli rychle odstranit veškerý zadaný text. Má také integrované a povolené funkce kontroly pravopisu.

Je to správná kontrola?

Ovládací prvek TextBox umožňuje uživateli zadat a upravit neformátovaný text, například ve formuláři. Pomocí vlastnosti Text můžete získat a nastavit text v textovém poli.

Textové pole můžete nastavit jen pro čtení, ale mělo by se jednat o dočasný podmíněný stav. Pokud text nikdy není možné upravovat, zvažte místo toho použití textového bloku .

Pomocí ovládacího prvku PasswordBox shromažďovat heslo nebo jiná soukromá data, například číslo sociálního pojištění. Pole s heslem vypadá jako textové vstupní pole s tím rozdílem, že místo zadaného textu vykreslí odrážky.

Pomocí ovládacího prvku AutoSuggestBox můžete uživateli umožnit zadat hledané termíny nebo zobrazit uživateli seznam návrhů, ze které se mají vybírat při psaní.

K zobrazení a úpravám formátovaných textových souborů použijte RichEditBox .

Další informace o výběru správného ovládacího prvku textu najdete v článku Ovládací prvky textu .

Recommendations

Pokud účel textového pole není jasný, použijte popisek nebo zástupný text. Popisek je viditelný bez ohledu na to, jestli má textové pole hodnotu. Zástupný text se zobrazí uvnitř textového vstupního pole a po zadání hodnoty zmizí.
Zadejte odpovídající šířku textového pole pro rozsah hodnot, které lze zadat. Délka slov se mezi jazyky liší, takže pokud chcete, aby vaše aplikace byla připravená na svět, vezměte v úvahu lokalizaci.
Textové vstupní pole je obvykle jednořádkové (TextWrap = "NoWrap"). Pokud uživatelé potřebují zadat nebo upravit dlouhý řetězec, nastavte textové vstupní pole na víceřádkové (TextWrap = "Wrap").
Obecně platí, že textové vstupní pole se používá pro upravitelný text. Textové vstupní pole ale můžete nastavit jen pro čtení, aby se jeho obsah mohl číst, vybírat a kopírovat, ale ne upravovat.
Pokud potřebujete v zobrazení zmenšit nepotřebné prvky, zvažte možnost zobrazení sady textových vstupních polí pouze v případě, že je zaškrtnuté ovládací políčko. Můžete také svázat povolený stav textového vstupního pole s ovládacím prvku, jako je například zaškrtávací políčko.
Zvažte, jak se má textové vstupní pole chovat, když obsahuje hodnotu, a uživatel na něj klepne. Výchozí chování je vhodné pro úpravu hodnoty místo nahrazení; kurzor je umístěn mezi slovy a nic není vybráno. Pokud je nahrazení nejběžnějším případem použití pro dané textové vstupní pole, můžete vybrat veškerý text v poli pokaždé, když ovládací prvek přijme fokus, a zadáním nahradíte výběr.

Jednořádková vstupní pole

Pomocí několika jednořádkových textových polí můžete zachytit mnoho malých částí textových informací. Pokud textová pole souvisejí v přírodě, seskupte je dohromady.
Zvětšte velikost jednořádkových textových polí tak, aby byla o něco širší než je nejdéle očekávaný vstup. Pokud by se tím ovládací prvek stal příliš širokým, rozdělte ho na dva ovládací prvky. Můžete například rozdělit jeden vstup adresy na řádek adresy 1 a Řádek adresy 2.
Nastavte maximální délku znaků, které lze zadat. Pokud podkladový zdroj dat nepovoluje dlouhý vstupní řetězec, omezte vstup a pomocí oznamovacího okna dejte uživatelům vědět, když dosáhnou limitu.
Pomocí ovládacích prvků jednořádkového zadávání textu můžete shromažďovat malé části textu od uživatelů.

Následující příklad ukazuje jednořádkové textové pole pro zachycení odpovědi na bezpečnostní otázku. Očekává se, že odpověď bude krátká, a proto je tady vhodné jednořádkové textové pole.
K zadávání dat s určitým formátem použijte sadu krátkých jednořádkových ovládacích prvků pro zadávání textu s pevnou velikostí.
Použijte jednořádkový, neomezený ovládací prvek pro zadávání textu k vkládání nebo úpravě řetězců, v kombinaci s příkazovým tlačítkem, které uživatelům pomáhá vybrat platné hodnoty.

Ovládací prvky víceřádkového zadávání textu

Při vytváření bohatého textového pole poskytněte tlačítka pro stylizaci a implementujte jejich akce.
Použijte písmo, které je konzistentní se stylem vaší aplikace.
Nastavte výšku textového pole tak, aby bylo dostatečně vysoké pro typické vstupy.
Při zachytávání dlouhých rozsahů textu s maximálním počtem znaků nebo slov použijte pole prostého textu a poskytněte aktuální počitadlo, abyste uživateli ukázali, kolik znaků nebo slov zbývá do dosažení limitu. Budete muset vytvořit čítač sami; umístěte ho pod textové pole a dynamicky ho aktualizujte, když uživatel zadá každý znak nebo slovo.
Nenechte ovládací prvky pro zadávání textu narůstat na výšku, když uživatelé zadávají.
Nepoužívejte víceřádkové textové pole, pokud uživatelé potřebují jenom jeden řádek.
Nepoužívejte ovládací prvek pro formátovaný text, pokud je ovládací prvek prostého textu dostačující.

Vytvoření textového pole

důležitá rozhraní API:třída TextBox, vlastnost Text

Otevření aplikace Galerie WinUI 3 a zobrazení textového pole v akci

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Tady je XAML pro jednoduché textové pole se záhlavím a zástupným textem.

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

Toto je textové pole, které je výsledkem tohoto XAML.

Jednoduché textové pole

Použití textového pole pro zadávání dat ve formuláři

Běžně se používá textové pole k přijetí vstupu dat ve formuláři a použití vlastnosti Text k získání kompletního textového řetězce z textového pole. Obvykle používáte událost, jako je kliknutí na tlačítko odeslání, abyste měli přístup k vlastnosti Text, ale můžete zpracovat událost TextChanged nebo TextChanging, pokud potřebujete něco udělat, když se text změní.

Tento příklad ukazuje, jak získat a nastavit aktuální obsah textového pole.

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

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

Do textového pole můžete přidat záhlaví (nebo popisek) a zástupný text (nebo vodoznak), aby uživatel mohl indikovat, k čemu textové pole slouží. Chcete-li přizpůsobit vzhled záhlaví, můžete nastavit HeaderTemplate vlastnost namísto Header. Pokyny pro štítky najdete v části Informace o návrhu.

Počet znaků, které může uživatel zadat, můžete omezit nastavením vlastnosti MaxLength . MaxLength ale neomezuje délku vloženého textu. Pokud je to pro vaši aplikaci důležité, použijte událost Vložit a upravte vložený text.

Textové pole obsahuje tlačítko vymazat vše ("X"), které se zobrazí při zadání textu do pole. Když uživatel klikne na symbol X, text v textovém poli se vymaže. Vypadá to takto.

Textové pole s tlačítkem pro vymazání všeho

Tlačítko Vymazat vše se zobrazí jenom pro upravitelná jednořádková textová pole, která obsahují text a mají fokus.

Tlačítko Vymazat vše se nezobrazuje v žádném z těchto případů:

isReadOnly je true
Přijímáreturn je true
TextWrap má jinou hodnotu než NoWrap.

Tento příklad ukazuje, jak získat a nastavit aktuální obsah textového pole.

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

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

Nastavení textového pole jen pro čtení

Textové pole můžete nastavit jen pro čtení nastavením vlastnosti IsReadOnly na hodnotu true. Tuto vlastnost obvykle přepnete v kódu aplikace na základě podmínek v aplikaci. Pokud potřebujete text, který je vždy jen pro čtení, zvažte místo toho použití textového bloku.

TextBox lze nastavit pouze pro čtení nastavením vlastnosti IsReadOnly na hodnotu true. Můžete mít například textové pole pro uživatele k zadání komentářů, které jsou povoleny pouze za určitých podmínek. Textové pole můžete nastavit jen pro čtení, dokud nebudou splněny podmínky. Pokud potřebujete jenom zobrazit text, zvažte místo toho použití TextBlock nebo RichTextBlock.

Textové pole jen pro čtení vypadá stejně jako textové pole pro čtení a zápis, takže může být pro uživatele matoucí. Uživatel může vybrat a zkopírovat text. JePovoleno

Povolení víceřádkového vstupu

Existují dvě vlastnosti, které můžete použít k řízení, zda textové pole zobrazuje text na více než jednom řádku. Obě vlastnosti obvykle nastavíte tak, aby se textové pole s více řádky vytvořilo.

Chcete-li textové pole povolit a zobrazit nový řádek nebo návratové znaky, nastavte Vlastnost AcceptsReturn na hodnotu true.
Chcete-li povolit obtékání textu, nastavte vlastnost TextWrapping na Zalamování. To způsobí, že se text zalomí, když dosáhne okraje textového pole, nezávisle na značce oddělovače řádků.

Poznámka:

TextBox a RichEditBox nepodporují pro vlastnost TextWrapping hodnotu WrapWholeWords. Pokud se pokusíte použít WrapWholeWords jako hodnotu pro TextBox.TextWrapping nebo RichEditBox.TextWrapping, je vyvolána neplatná výjimka argumentu.

Víceřádkové textové pole bude i nadále růst svisle, jakmile je text zadáván, pokud není omezeno jeho Výškou nebo MaxHeight nebo nadřazeným kontejnerem. Měli byste otestovat, jestli se víceřádkové textové pole nezvětší nad jeho viditelnou oblastí, a pokud ano, omezíte jeho růst. Doporučujeme, abyste vždy zadali odpovídající výšku pro víceřádkové textové pole a nenechali ho zvětšovat se, zatímco uživatel píše.

Posouvání pomocí kolečka nebo dotykového ovládání se v případě potřeby aktivuje automaticky. Svislé posuvníky ale nejsou ve výchozím nastavení viditelné. Svislé posuvníky můžete zobrazit nastavením ScrollViewer.VerticalScrollBarVisibility na Auto na vloženém ScrollVieweru, jak je znázorněno zde.

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

Po přidání textu vypadá textové pole takto.

Textové pole s více řádky

Formátování zobrazení textu

K zarovnání textu v textovém poli použijte vlastnost TextAlignment . Pokud chcete zarovnat textové pole v rozložení stránky, použijte vlastnosti HorizontalAlignment a VerticalAlignment.

I když textové pole podporuje jenom neformátovaný text, můžete přizpůsobit způsob zobrazení textu v textovém poli tak, aby odpovídal vašemu brandingu. Můžete nastavit standardní Vlastnosti ovládacího prvku, jako jsou FontFamily, FontSize, FontStyle, Pozadí, popředía pro změnu vzhledu textu. Tyto vlastnosti mají vliv jenom na to, jak textové pole zobrazuje text místně, takže pokud byste text zkopírovali a vložili do ovládacího prvku rtf, například nebude použito žádné formátování.

Tento příklad ukazuje textové pole jen pro čtení s několika vlastnostmi nastavenými pro přizpůsobení vzhledu textu.

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

Výsledné textové pole vypadá takto.

Formátované textové pole

Ve výchozím nastavení příkazy zobrazené v místní nabídce textového pole závisí na stavu textového pole. Například následující příkazy se dají zobrazit, když je textové pole upravitelné.

Command	Zobrazuje se, když...
Kopírovat	je vybrán text.
Střihni	je vybrán text.
Vložit	schránka obsahuje text.
Vybrat vše	TextBox obsahuje text.
Zpět	text byl změněn.

Pokud chcete upravit příkazy zobrazené v místní nabídce, zpracujte událost ContextMenuOpening. Příklad najdete v části Přizpůsobení CommandBarFlyout RichEditBoxu – přidání příkladu Sdílet v galerii WinUI 3. Informace o návrhu najdete v Pokynech pro místní nabídky.

Výběr, kopírování a vložení

Vybraný text můžete získat nebo nastavit v textovém poli pomocí vlastnosti SelectedText . Pomocí vlastností SelectionStart a SelectionLength a metod Select a SelectAll pro manipulaci s výběrem textu. Zpracujte událost SelectionChanged, abyste něco udělali, když uživatel vybere nebo zruší výběr textu. Barvu použitou ke zvýraznění vybraného textu můžete změnit nastavením SelectionHighlightColor vlastnost.

TextBox ve výchozím nastavení podporuje kopírování a vkládání. V aplikaci můžete u upravitelných textových ovládacích prvků zadat vlastní zpracování události Vložit. Při vkládání do jednořádkového vyhledávacího pole můžete například odebrat konce řádků z víceřádkové adresy. Nebo můžete zkontrolovat délku vloženého textu a upozornit uživatele, pokud překročí maximální délku, kterou lze uložit do databáze. Další informace a příklady najdete v události Vložit.

Tady máme příklad těchto vlastností a metod, které se používají. Když vyberete text v prvním textovém poli, zobrazí se vybraný text ve druhém textovém poli, které je jen pro čtení. Hodnoty vlastností SelectionLength a SelectionStart jsou zobrazeny ve dvou textových blocích. To se provádí pomocí události SelectionChanged .

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

Tady je výsledek tohoto kódu.

Vybraný text v textovém poli

Volba správné klávesnice pro ovládací prvek textu

Pokud chcete uživatelům pomoct zadat data pomocí dotykové klávesnice nebo siP (Soft Input Panel), můžete nastavit rozsah zadávání ovládacího prvku textu tak, aby odpovídal druhu dat, která má uživatel zadat.

Dotykovou klávesnici můžete použít pro zadávání textu, když aplikace běží na zařízení s dotykovou obrazovkou. Dotyková klávesnice se vyvolá, když uživatel klepne na upravitelné vstupní pole, například TextBox nebo RichEditBox. Uživatelům můžete usnadnit zadávání dat do aplikace nastavením vstupního rozsahu ovládacího prvku textu tak, aby odpovídal druhu dat, která očekáváte, že uživatel zadá. Vstupní obor poskytuje systému nápovědu o typu textového vstupu očekávaného ovládacím prvkem, aby systém mohl poskytnout specializované dotykové rozložení klávesnice pro typ vstupu.

Pokud je například textové pole použito pouze k zadání 4místného PIN kódu, nastavte Vlastnost InputScope na Number. Tím systému sdělíte, že má zobrazit rozložení číselné klávesnice, což uživateli usnadní zadání KÓDU PIN.

Důležitý Vstupní obor nezpůsobí provedení žádného ověření vstupu a nezabrání uživateli v poskytování jakéhokoli vstupu prostřednictvím hardwarové klávesnice nebo jiného vstupního zařízení. Stále zodpovídáte za ověření vstupu v kódu podle potřeby.

Další vlastnosti, které ovlivňují dotykovou klávesnici, zahrnují IsSpellCheckEnabled, IsTextPredictionEnableda také PreventKeyboardDisplayOnProgrammaticFocus. (IsSpellCheckEnabled má vliv také na Textové pole při použití hardwarové klávesnice.)

Další informace a příklady najdete v části Použití vstupního oboru ke změně dotykové klávesnice a v dokumentaci k vlastnosti.

Váš názor

Byla tato stránka užitečná?

Last updated on 2026-02-25