Xamarin.Forms Editor

  • Článek

Download Sample Stažení ukázky

Ovládací Editor prvek slouží k přijetí víceřádkového vstupu.

Nastavení a čtení textu

Podobně Editorjako ostatní zobrazení pro prezentaci textu zveřejňuje Text vlastnost. Tuto vlastnost lze použít k nastavení a čtení textu, který Editorprezentuje . Následující příklad ukazuje nastavení Text vlastnosti v XAML:

<Editor x:Name="editor" Text="I am an Editor" />

V jazyce C#:

var editor = new Editor { Text = "I am an Editor" };

Pokud chcete přečíst text, přejděte k Text vlastnosti v jazyce C#:

var text = editor.Text;

Nastavení zástupného textu

Dá Editor se nastavit tak, aby zobrazoval zástupný text, když neukládá uživatelský vstup. To se provádí nastavením Placeholder vlastnosti na string, a často se používá k označení typu obsahu, který je vhodný pro .Editor Kromě toho může být barva zástupného textu řízena nastavením PlaceholderColor vlastnosti na Color:

<Editor Placeholder="Enter text here" PlaceholderColor="Olive" />

var editor = new Editor { Placeholder = "Enter text here", PlaceholderColor = Color.Olive };

Zabránění zadávání textu

Uživatelům lze zabránit v úpravě textu nastavením EditorIsReadOnly vlastnosti, která má výchozí hodnotu false, na true:

<Editor Text="This is a read-only Editor"
        IsReadOnly="true" />

var editor = new Editor { Text = "This is a read-only Editor", IsReadOnly = true });

Poznámka:

Vlastnost IsReadonly nemění vzhled vizuálu objektu Editor, na rozdíl od IsEnabled vlastnosti, která také změní vzhled vizuálu na šedou Editor .

Transformace textu

Velikost Editor písmen textu uloženého Text ve vlastnosti může transformovat nastavením TextTransform vlastnosti na hodnotu výčtu TextTransform . Tento výčet má čtyři hodnoty:

  • None označuje, že text nebude transformován.
  • Default označuje, že se použije výchozí chování platformy. Toto je výchozí hodnota TextTransform vlastnosti.
  • Lowercase označuje, že text bude transformován na malá písmena.
  • Uppercase označuje, že text bude transformován na velká písmena.

Následující příklad ukazuje transformaci textu na velká písmena:

<Editor Text="This text will be displayed in uppercase."
        TextTransform="Uppercase" />

Ekvivalentní kód jazyka C# je:

Editor editor = new Editor
{
    Text = "This text will be displayed in uppercase.",
    TextTransform = TextTransform.Uppercase
};

Omezení délky vstupu

Vlastnost MaxLength lze použít k omezení vstupní délky, která je povolena pro Editorobjekt . Tato vlastnost by měla být nastavena na kladné celé číslo:

<Editor ... MaxLength="10" />

var editor = new Editor { ... MaxLength = 10 };

MaxLength Hodnota vlastnosti 0 označuje, že nebude povolen žádný vstup, a hodnota int.MaxValue, která je výchozí hodnotou pro znak Editor, označuje, že neexistuje žádný efektivní limit počtu znaků, které mohou být zadány.

Mezery mezi znaky

Mezery mezi znaky lze použít u Editor vlastnosti nastavením Editor.CharacterSpacing vlastnosti na double hodnotu:

<Editor ...
        CharacterSpacing="10" />

Ekvivalentní kód jazyka C# je:

Editor editor = new editor { CharacterSpacing = 10 };

Výsledkem je, že znaky v textu zobrazeném řádkem Editor jsou CharacterSpacing oddělené jednotky nezávislé na zařízení.

Poznámka:

Hodnota CharacterSpacing vlastnosti se použije na text zobrazený vlastnostmi Text a Placeholder vlastnostmi.

Automatická velikost editoru

Lze Editor vytvořit automatické velikosti obsahu nastavením Editor.AutoSize vlastnosti na TextChanges, což je hodnota výčtu EditorAutoSizeOption . Tento výčet má dvě hodnoty:

  • Disabled označuje, že automatická změna velikosti je zakázaná a je výchozí hodnotou.
  • TextChanges označuje, že je povolená automatická změna velikosti.

To lze provést v kódu následujícím způsobem:

<Editor Text="Enter text here" AutoSize="TextChanges" />

var editor = new Editor { Text = "Enter text here", AutoSize = EditorAutoSizeOption.TextChanges };

Pokud je povolená automatická změna velikosti, výška se zvýší, když ho Editor uživatel vyplní textem, a výška se sníží, když uživatel odstraní text.

Poznámka:

Pokud Editor byla vlastnost nastavená, HeightRequest automaticky se velikost nezvětšuje.

Přizpůsobení klávesnice

Klávesnice, která se zobrazí, když uživatelé komunikují s objektem Editor , lze programově nastavit prostřednictvím Keyboard vlastnosti na jednu z následujících vlastností třídy Keyboard :

  • Chat – používá se pro textování a místa, kde jsou emoji užitečné.
  • Default – výchozí klávesnice.
  • Email – používá se při zadávání e-mailových adres.
  • Numeric – používá se při zadávání čísel.
  • Plain – používá se při zadávání textu bez zadání KeyboardFlags .
  • Telephone – používá se při zadávání telefonních čísel.
  • Text – používá se při zadávání textu.
  • Url – používá se pro zadávání cest k souborům a webovým adresám.

To lze provést v XAML následujícím způsobem:

<Editor Keyboard="Chat" />

Ekvivalentní kód jazyka C# je:

var editor = new Editor { Keyboard = Keyboard.Chat };

Příklady jednotlivých klávesnic najdete v našem úložišti Recepty .

Třída Keyboard má také metodu Create továrny, kterou lze použít k přizpůsobení klávesnice zadáním velkých písmen, kontroly pravopisu a chování návrhu. KeyboardFlags Hodnoty výčtu se zadají jako argumenty metody s vráceným přizpůsobeným Keyboard kódem. Výčet KeyboardFlags obsahuje následující hodnoty:

  • None – na klávesnici nejsou přidány žádné funkce.
  • CapitalizeSentence – označuje, že první písmeno prvního slova každé zadané věty bude automaticky velkými písmeny.
  • Spellcheck – označuje, že kontrola pravopisu se provede u zadaného textu.
  • Suggestions – označuje, že dokončování slov bude nabízeno na zadaném textu.
  • CapitalizeWord – označuje, že první písmeno každého slova bude automaticky velkými písmeny.
  • CapitalizeCharacter – označuje, že každý znak bude automaticky velkými písmeny.
  • CapitalizeNone – značí, že nedojde k automatickému psaní velkých písmen.
  • All – označuje, že kontrola pravopisu, dokončování slov a velká písmena věty budou na zadaném textu.

Následující příklad kódu XAML ukazuje, jak přizpůsobit výchozí nastavení Keyboard pro dokončování slov a velká písmena každého zadaného znaku:

<Editor>
    <Editor.Keyboard>
        <Keyboard x:FactoryMethod="Create">
            <x:Arguments>
                <KeyboardFlags>Suggestions,CapitalizeCharacter</KeyboardFlags>
            </x:Arguments>
        </Keyboard>
    </Editor.Keyboard>
</Editor>

Ekvivalentní kód jazyka C# je:

var editor = new Editor();
editor.Keyboard = Keyboard.Create(KeyboardFlags.Suggestions | KeyboardFlags.CapitalizeCharacter);

Povolení a zakázání kontroly pravopisu

Vlastnost IsSpellCheckEnabled určuje, jestli je povolená kontrola pravopisu. Ve výchozím nastavení je vlastnost nastavena na true. Když uživatel zadá text, označí se chybně napsané texty.

U některých scénářů zadávání textu, jako je zadání uživatelského jména, ale kontrola pravopisu poskytuje negativní prostředí, a proto by měla být zakázána nastavením IsSpellCheckEnabled vlastnosti na false:

<Editor ... IsSpellCheckEnabled="false" />

var editor = new Editor { ... IsSpellCheckEnabled = false };

Poznámka:

IsSpellCheckEnabled Pokud je vlastnost nastavena na falsea vlastní klávesnice se nepoužívá, nativní kontrola pravopisu bude zakázána. Pokud Keyboard je však nastavena sada, která zakáže kontrolu pravopisu, například Keyboard.Chat, IsSpellCheckEnabled vlastnost je ignorována. Vlastnost proto nelze použít k povolení kontroly pravopisu Keyboard , která ji explicitně zakáže.

Povolení a zakázání predikce textu

Vlastnost IsTextPredictionEnabled určuje, zda je povolena predikce textu a automatická oprava textu. Ve výchozím nastavení je vlastnost nastavena na true. Když uživatel zadá text, zobrazí se predikce slov.

U některých scénářů zadávání textu, jako je například zadání uživatelského jména, předpovědi textu a automatické opravy textu, ale může být negativní a mělo by být zakázáno nastavením IsTextPredictionEnabled vlastnosti na false:

<Editor ... IsTextPredictionEnabled="false" />

var editor = new Editor { ... IsTextPredictionEnabled = false };

Poznámka:

Pokud je vlastnost nastavená IsTextPredictionEnabled na falsehodnotu a nepoužívá se vlastní klávesnice, je zakázána predikce textu a automatická oprava textu. Pokud Keyboard je však nastavena sada, která zakáže predikci textu, IsTextPredictionEnabled vlastnost bude ignorována. Vlastnost proto nelze použít k povolení predikce textu pro Keyboard objekt, který ji explicitně zakáže.

Barvy

Editor lze nastavit tak, aby používala vlastní barvu pozadí prostřednictvím BackgroundColor vlastnosti. Zvláštní péče je nezbytná k zajištění toho, aby barvy byly použitelné na každé platformě. Vzhledem k tomu, že každá platforma má jiné výchozí hodnoty pro barvu textu, možná budete muset pro každou platformu nastavit vlastní barvu pozadí. Další informace o optimalizaci uživatelského rozhraní pro každou platformu najdete v tématu Práce s úpravami platformy.

V jazyce C#:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        //dark blue on UWP & Android, light blue on iOS
        var editor = new Editor { BackgroundColor = Device.RuntimePlatform == Device.iOS ? Color.FromHex("#A4EAFF") : Color.FromHex("#2c3e50") };
        layout.Children.Add(editor);
    }
}

V JAZYCE XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="TextSample.EditorPage"
    Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor>
                <Editor.BackgroundColor>
                    <OnPlatform x:TypeArguments="x:Color">
                        <On Platform="iOS" Value="#a4eaff" />
                        <On Platform="Android, UWP" Value="#2c3e50" />
                    </OnPlatform>
                </Editor.BackgroundColor>
            </Editor>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Editor with BackgroundColor Example

Ujistěte se, že barvy pozadí a textu, které zvolíte, jsou použitelné na každé platformě a nezakrývají žádný zástupný text.

Události a interaktivita

Editor zveřejňuje dvě události:

  • TextChanged – vyvolán při změně textu v editoru. Poskytuje text před a po změně.
  • Dokončeno – vyvolána při ukončení vstupu uživatele stisknutím klávesy Return na klávesnici.

Poznámka:

Třída VisualElement , ze které Entry dědí, má FocusedUnfocused a události.

Dokončeno

Událost Completed se používá k reakci na dokončení interakce s objektem Editor. Completed je vyvolána, když uživatel ukončí vstup s polem zadáním návratové klávesy na klávesnici (nebo stisknutím klávesy Tab v UPW). Obslužná rutina události je obecná obslužná rutina události, která přebírá odesílatele a EventArgs:

void EditorCompleted (object sender, EventArgs e)
{
    var text = ((Editor)sender).Text; // sender is cast to an Editor to enable reading the `Text` property of the view.
}

Dokončená událost se dá přihlásit k odběru kódu a XAML:

V jazyce C#:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        var editor = new Editor ();
        editor.Completed += EditorCompleted;
        layout.Children.Add(editor);
    }
}

V JAZYCE XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TextSample.EditorPage"
Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor Completed="EditorCompleted" />
        </StackLayout>
    </ContentPage.Content>
</Contentpage>

Textchanged

Událost TextChanged se používá k reakci na změnu obsahu pole.

TextChanged je vyvolána při každé TextEditor změně. Obslužná rutina události přebírá instanci TextChangedEventArgs. TextChangedEventArgs poskytuje přístup ke starým a novým hodnotám EditorText prostřednictvím OldTextValue a NewTextValue vlastností:

void EditorTextChanged (object sender, TextChangedEventArgs e)
{
    var oldText = e.OldTextValue;
    var newText = e.NewTextValue;
}

Dokončená událost se dá přihlásit k odběru kódu a XAML:

V kódu:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        var editor = new Editor ();
        editor.TextChanged += EditorTextChanged;
        layout.Children.Add(editor);
    }
}

V JAZYCE XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TextSample.EditorPage"
Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor TextChanged="EditorTextChanged" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>