Xamarin.Forms Düzenleyici

  • Makale
  • Okumak için 8 dakika

Örnek indir Örneği indirin

EditorDenetim, çok satırlı girişi kabul etmek için kullanılır.

Metin ayarlama ve okuma

EditorDiğer metin sunma görünümleri gibi, özelliğini kullanıma sunar Text . Bu özellik, tarafından sunulan metni ayarlamak ve okumak için kullanılabilir Editor . Aşağıdaki örnek Text xaml 'de özelliği ayarlamayı gösterir:

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

C# dilinde:

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

Metni okumak için Text C# ' de özelliğe erişin:

var text = editor.Text;

Yer tutucu metni ayarla

, Editor Kullanıcı girişi depolarken yer tutucu metni göstermek üzere ayarlanabilir. Bu, "Data-LinkType =" Absolute-path ">özelliği olarak Xamarin_Forms _InputView_Placeholder ayarlanarak Placeholderstring ve genellikle için uygun olan içerik türünü belirtmek için kullanılır Editor . Ayrıca, yer tutucu metin rengi, Xamarin_Forms _InputView_PlaceholderColor "Data-LinkType =" Absolute-path ">PlaceholderColor özelliği bir olarak ayarlanarak denetlenebilir Color :

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

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

Metin girişini engelle

Kullanıcıların EditorIsReadOnly , için varsayılan değeri olan özelliğini ayarlayarak içindeki metni değiştirmesini engellenebilir falsetrue :

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

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

Not

Özelliği, öğesinin görsel görünümünü IsReadonlyEditorIsEnabled aynı zamanda, öğesinin görsel görünümünü de değiştiren özelliğin aksine değiştirmez Editor .

Metin dönüştürme

, Özelliği EditorText sabit listesinin bir değeri ayarlanarak özelliğinde depolanan metnin büyük küçük harflerini dönüştürebilir TextTransformTextTransform . Bu numaralandırma dört değere sahiptir:

  • None metnin dönüştürülmeyeceğini gösterir.
  • Default platformun varsayılan davranışının kullanılacağını gösterir. Bu, özelliğin varsayılan değeridir TextTransform .
  • Lowercase metnin küçük harfe dönüştürüleceğini gösterir.
  • Uppercase metnin büyük harfe dönüştürüleceğini gösterir.

Aşağıdaki örnek, metnin büyük harfe dönüştürülmesini göstermektedir:

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

Eşdeğer C# kodu:

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

Giriş uzunluğunu sınırla

Xamarin_Forms _InputView_MaxLength "Data-LinkType =" Absolute-path ">MaxLength özelliği, için izin verilen giriş uzunluğunu sınırlamak için kullanılabilir Editor . Bu özellik pozitif bir tamsayı olarak ayarlanmalıdır:

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

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

"Data-LinkType =" Absolute-path ">Özellik değeri 0 olan bir Xamarin_Forms _InputView_MaxLength MaxLength , hiçbir girişe izin verilmeyeceğini ve öğesinin varsayılan değeri olan değerini belirten, int.MaxValueEditor girilebilecek karakter sayısı üzerinde etkin bir sınır olmadığını gösterir.

Karakter aralığı

EditorEditor.CharacterSpacing Özelliği bir değere ayarlayarak, bir öğesine karakter aralığı uygulanabilir double :

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

Eşdeğer C# kodu:

Editor editor = new editor { CharacterSpacing = 10 };

Sonuç olarak, tarafından görüntülenen metindeki karakterlerin EditorCharacterSpacing cihazdan bağımsız birimler birbirinden farklı olur.

Not

CharacterSpacingÖzellik değeri, ve özellikleri tarafından gösterilecek metne uygulanır TextPlaceholder .

Bir düzenleyiciyi Otomatik Boyutlandır

EditorEditor "Data-LinkType =" Absolute-path ">Editor.AutoSize özelliği Xamarin_Forms _EditorAutoSizeOption_TextChanges" Data-linktype = "absolute-path" >olarak _Editor_AutoSize Xamarin_Forms ayarlanarak içeriğe otomatik boyuta getirilebilir ve TextChanges Bu da numaralandırmanın bir değeridir EditorAutoSizeOption . Bu numaralandırma iki değere sahiptir:

Bu, kodda aşağıdaki şekilde gerçekleştirilebilir:

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

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

Otomatik yeniden boyutlandırma etkin olduğunda, Editor Kullanıcı metni metin ile doldurduğunda, yüksekliği artar ve Kullanıcı metin sildiği için yükseklik azalır.

Not

EditorEditor _VisualElement_HeightRequest Xamarin_Forms "Data-LinkType =" Absolute-path ">HeightRequest özelliği ayarlandıysa, bir otomatik olarak boyutlandırmaz.

Klavyeyi özelleştirme

Kullanıcılar bir ile etkileşdiğinde sunulan klavye, Editor Xamarin_Forms Editor _InputView_Keyboard "Data-LinkType =" Absolute-path ">Keyboard özelliği aracılığıyla, sınıftan aşağıdaki özelliklerden birine Keyboard Program aracılığıyla ayarlanabilir:

Bu, XAML 'de şu şekilde gerçekleştirilebilir:

<Editor Keyboard="Chat" />

Eşdeğer C# kodu:

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

Her klavyeye örnek olarak, yemek tariflerimiz deposunda bulunabilir.

KeyboardSınıfı ayrıca Create , büyük harf, yazım denetimi ve öneri davranışını belirterek bir klavyeyi özelleştirmek için kullanılabilen bir fabrika yöntemine sahiptir. KeyboardFlags numaralandırma değerleri, metodun bir özelleştirilmiş döndürüldüğünden bağımsız değişken olarak belirtilir Keyboard . KeyboardFlagsSabit listesi aşağıdaki değerleri içerir:

Aşağıdaki XAML kod örneği, Keyboard Word 'ün tamamlanabileceği ve girilen her karakteri büyük harfle bulunan varsayılan değer özelleştirmeyi gösterir:

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

Eşdeğer C# kodu:

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

Yazım denetimini etkinleştirme ve devre dışı bırakma

Xamarin_Forms _InputView_IsSpellCheckEnabled "Data-LinkType =" Absolute-path ">IsSpellCheckEnabled özelliği yazım denetiminin etkinleştirilip etkinleştirilmediğini denetler. Varsayılan olarak, özelliği olarak ayarlanır true . Kullanıcı metin girerken, yanlış yazımları belirtilir.

Ancak, bir Kullanıcı adı girme gibi bazı metin girişi senaryolarında, yazım denetimi negatif bir deneyim sağlar ve bu nedenle Xamarin_Forms _InputView_IsSpellCheckEnabled "Data-LinkType =" Absolute-path ">IsSpellCheckEnabled özelliği olarak ayarlanarak devre dışı bırakılmalıdır false :

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

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

Not

Xamarin_Forms _InputView_IsSpellCheckEnabled "Data-LinkType =" Absolute-path ">IsSpellCheckEnabled özelliği olarak ayarlandığında false ve özel bir klavye kullanılmıyorsa, yerel yazım denetleyicisi devre dışı bırakılır. Ancak, Keyboard Xamarin_Forms Keyboard _Keyboard_Chat "Data-LinkType =" Absolute-path ">gibi yazım denetimini devre dışı bırakan bir ayarlandıysa Keyboard.Chat , IsSpellCheckEnabled özelliği yok sayılır. Bu nedenle, özelliği Keyboard açıkça devre dışı bırakan bir için yazım denetimini etkinleştirmek üzere kullanılamaz.

Metin tahminini etkinleştirme ve devre dışı bırakma

IsTextPredictionEnabledÖzelliği, metin tahmini ve otomatik metin düzeltmesinin etkinleştirilip etkinleştirilmediğini denetler. Varsayılan olarak, özelliği olarak ayarlanır true . Kullanıcı metin girdiğinde, sözcük tahminleri sunulur.

Ancak, bir Kullanıcı adı girme gibi bazı metin girişi senaryolarında, metin tahmini ve otomatik metin düzeltme bir negatif deneyim sağlar ve özelliği şu şekilde ayarlanarak devre dışı bırakılmalıdır IsTextPredictionEnabledfalse :

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

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

Not

IsTextPredictionEnabledÖzelliği olarak ayarlandığında false ve özel bir klavye kullanılmazsa, metin tahmini ve otomatik metin düzeltme devre dışı bırakılır. Ancak, Keyboard metin tahminini devre dışı bırakan bir ayarlandıysa, IsTextPredictionEnabled özelliği yok sayılır. Bu nedenle, özelliği Keyboard açıkça devre dışı bırakan bir için metin tahminini etkinleştirmek üzere kullanılamaz.

Renkler

Editor özelliği aracılığıyla özel bir arka plan rengi kullanmak üzere ayarlanabilir BackgroundColor . Renklerin her platformda kullanılabilir olmasını sağlamak için özel dikkatli olmanız gerekir. Her platformda metin rengine ait farklı varsayılanlar olduğundan, her platform için özel bir arka plan rengi ayarlamanız gerekebilir. Her platform için Kullanıcı arabirimini iyileştirme hakkında daha fazla bilgi için bkz. Platform Tnak KS Ile çalışma .

C# dilinde:

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

XAML 'de:

<?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>

BackgroundColor örneği ile düzenleyici

Seçtiğiniz arka plan ve metin renklerinin her platformda kullanılabilir olduğundan ve yer tutucu metnin hiçbirini gizlemediğinizden emin olun.

Olaylar ve etkileşim

Editor iki olay sunar:

  • TextChanged : metin düzenleyicide değiştiğinde tetiklenir. Değişiklikten önce ve sonra metin sağlar.
  • Tamamlandı – Kullanıcı klavyede Return tuşuna basarak girişi sonlandırmışsa tetiklenir.

Not

VisualElementEntry Devralınan ve olayları da olan sınıf FocusedUnfocused .

Tamamlandı

CompletedOlayı, bir etkileşimin tamamlanmasına tepki vermek için kullanılır Editor . Completed , klavye üzerinde Return tuşunu girerek (veya UWP üzerindeki sekme tuşuna basarak), Kullanıcı girişi bir alanla bitiyorsa tetiklenir. Olay işleyicisi, göndereni alan ve bir genel olay işleyicisidir 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.
}

Tamamlanan olay, kod ve XAML 'de öğesine abone olabilir:

C# dilinde:

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

XAML 'de:

<?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 olayını

TextChangedOlay, bir alanın içeriğindeki bir değişikliğe tepki vermek için kullanılır.

TextChanged her değişiklikten sonra oluşturulur TextEditor . Olay işleyicisi bir örneğini alır TextChangedEventArgs . TextChangedEventArgsEditorTextOldTextValue ve özellikleri yoluyla, eski ve yeni değerlerine erişim sağlar NewTextValue :

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

Tamamlanan olay, kod ve XAML 'de öğesine abone olabilir:

Kod:

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

XAML 'de:

<?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>