Xamarin.Forms Düzenleyici

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

Metin ayarlama ve okuma

Editor, diğer metin sunum görünümleri gibi özelliğini kullanıma sunarText. Bu özellik, tarafından Editorsunulan metni ayarlamak ve okumak için kullanılabilir. Aşağıdaki örnekte XAML'de özelliğin Text ayarlanması gösterilmektedir:

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

C# dilinde:

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

Metni okumak için C# dilinde özelliğine erişin Text :

var text = editor.Text;

Yer tutucu metni ayarlama

Editor, kullanıcı girişini depolamadığında yer tutucu metni gösterecek şekilde ayarlanabilir. Bu, özelliği olarak stringayarlanarak Placeholder gerçekleştirilir ve genellikle için uygun içerik türünü belirtmek için Editorkullanılır. Ayrıca, yer tutucu metin rengi özelliği olarak Colorayarlanarak PlaceholderColor denetlenebilir:

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

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

Metin girişini engelle

Varsayılan değeri olan özelliği olarak ayarlanarak IsReadOnly kullanıcıların bir Editor içindeki metni değiştirmesi falsetrueengellenebilir:

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

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

Metin dönüştürme

, Editor özelliğini sabit listesi değerine ayarlayarak TextTransform özelliğinde Text depolanan metninin TextTransform büyük/küçük harflerini dönüştürebilir. Bu sabit listesi dört değere sahiptir:

• None metnin dönüştürülmeyeceğini gösterir.
• Default platform için varsayılan davranışın kullanılacağını belirtir. 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 örnekte metni büyük harfe dönüştürme gösterilmektedir:

<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

MaxLength özelliği, için izin verilen giriş uzunluğunu sınırlamak Editoriçin kullanılabilir. Bu özellik pozitif bir tamsayıya ayarlanmalıdır:

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

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

MaxLength 0 özellik değeri hiçbir girişe izin verilmeyeceğini belirtir ve değeri için varsayılan değer int.MaxValueEditorolan değeri girilebilecek karakter sayısı üzerinde geçerli bir sınır olmadığını gösterir.

Karakter aralığı

Karakter aralığı özelliği bir double değere ayarlanarak Editor.CharacterSpacing bir'e uygulanabilirEditor:

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

Eşdeğer C# kodu:

Editor editor = new editor { CharacterSpacing = 10 };

Sonuç, tarafından görüntülenen metindeki karakterlerin cihazdan Editor bağımsız birimler halinde aralıklı CharacterSpacing olmasıdır.

Düzenleyiciyi otomatik boyutlandırma

Editor özelliği TextChangessabit listesi değeri EditorAutoSizeOption olarak ayarlanarak Editor.AutoSize içeriğine otomatik olarak boyutlandırılabilir. Bu numaralandırmanın iki değeri vardır:

• Disabled otomatik yeniden boyutlandırmanın devre dışı bırakıldığını ve varsayılan değer olduğunu gösterir.
• TextChanges otomatik yeniden boyutlandırmanın etkinleştirildiğini gösterir.

Bu, kodda aşağıdaki gibi 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 etkinleştirildiğinde, Editor kullanıcı metinle doldurduğunda yüksekliği artar ve kullanıcı metni sildikçe yükseklik azalır.

Klavyeyi özelleştirme

Kullanıcılar ile Editor etkileşim kurduğunda sunulan klavye, özelliği aracılığıyla Keyboard program aracılığıyla sınıfından aşağıdaki özelliklerden Keyboard birine ayarlanabilir:

• Chat – emojilerin yararlı olduğu metinler ve yerler için kullanılır.
• Default – varsayılan klavye.
• Email – e-posta adresleri girilirken kullanılır.
• Numeric – sayılar girilirken kullanılır.
• Plain – herhangi bir KeyboardFlags belirtilmeden metin girerken kullanılır.
• Telephone – telefon numaraları girilirken kullanılır.
• Text – metin girerken kullanılır.
• Url – dosya yollarını ve web adreslerini girmek için kullanılır.

Bu, XAML'de aşağıdaki gibi gerçekleştirilebilir:

<Editor Keyboard="Chat" />

Eşdeğer C# kodu:

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

Her klavyenin örnekleri Yemek Tarifleri depomuzda bulunabilir.

Sınıfı ayrıca Keyboard büyük harfe çevirme, yazım denetimi ve öneri davranışı belirterek klavyeyi özelleştirmek için kullanılabilecek bir fabrika yöntemine sahiptir Create . KeyboardFlags sabit listesi değerleri yöntemine bağımsız değişken olarak belirtilir ve özelleştirilmiş Keyboard bir değer döndürülür. Numaralandırma KeyboardFlags aşağıdaki değerleri içerir:

• None – klavyeye özellik eklenmez.
• CapitalizeSentence – girilen her tümcenin ilk sözcüğünün ilk harfinin otomatik olarak büyük harfe dönüştürüleceğini belirtir.
• Spellcheck – girilen metinde yazım denetiminin gerçekleştirileceğini gösterir.
• Suggestions – girilen metinde sözcük tamamlamalarının sunulacağını belirtir.
• CapitalizeWord – her sözcüğün ilk harfinin otomatik olarak büyük harfe yazılacağını belirtir.
• CapitalizeCharacter – her karakterin otomatik olarak büyük harfe yazılacağını gösterir.
• CapitalizeNone – otomatik büyük harfe çevirme gerçekleşmeyeceğini gösterir.
• All – girilen metinde yazım denetimi, sözcük tamamlamaları ve tümce büyük harf kullanımını gösterir.

Aşağıdaki XAML kod örneğinde, sözcük tamamlamaları sunmak ve girilen her karakteri büyük harfe çevirme amacıyla varsayılanın Keyboard nasıl özelleştirileceği gösterilmektedir:

<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

özelliği yazım IsSpellCheckEnabled denetiminin etkinleştirilip etkinleştirilmediğini denetler. Varsayılan olarak özelliği olarak trueayarlanır. Kullanıcı metin girerken, yazım hataları belirtilir.

Ancak, kullanıcı adı girme gibi bazı metin girişi senaryolarında yazım denetimi olumsuz bir deneyim sağlar ve bu nedenle özelliği falseolarak ayarlanarak IsSpellCheckEnabled devre dışı bırakılmalıdır:

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

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

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

özelliği, IsTextPredictionEnabled metin tahmininin ve otomatik metin düzeltmenin etkinleştirilip etkinleştirilmediğini denetler. Varsayılan olarak özelliği olarak trueayarlanır. Kullanıcı metin girerken sözcük tahminleri sunulur.

Ancak kullanıcı adı girme, metin tahmini ve otomatik metin düzeltme gibi bazı metin girişi senaryoları olumsuz bir deneyim sağlar ve özelliği falseolarak ayarlanarak IsTextPredictionEnabled devre dışı bırakılmalıdır:

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

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

Renkler

Editor özelliği aracılığıyla BackgroundColor özel bir arka plan rengi kullanacak şekilde ayarlanabilir. Renklerin her platformda kullanılabilir olmasını sağlamak için özel bakım gereklidir. Her platformun metin rengi için farklı varsayılan değerleri 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 ayarlamalarıyla ç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>

Seçtiğiniz arka plan ve metin renklerinin her platformda kullanılabilir olduğundan ve yer tutucu metinleri gizlemediğinden emin olun.

Olaylar ve etkileşim

Editor iki olayı kullanıma sunar:

• TextChanged – düzenleyicide metin değiştiğinde oluşturulur. Değişiklik öncesinde ve sonrasındaki metni sağlar.
• Tamamlandı – kullanıcı klavyedeki dönüş tuşuna basarak girişi sonlandırdığında oluşturulur.

Tamamlandı

olayı Completed , ile Editoretkileşimin tamamlanmasına tepki vermek için kullanılır. Completed , kullanıcı klavyede dönüş tuşuna girerek (veya UWP'de Sekme tuşuna basarak) bir alanla girişi sonlandırdığında oluşturulur. Olayın işleyicisi, göndereni ve EventArgsalan genel bir olay işleyicisidir:

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 olaya kod ve XAML'de abone olunabilir:

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 TextChanged , bir alanın içeriğindeki değişikliğe tepki vermek için kullanılır.

TextChanged her değişiklik olduğunda oluşturulur Text Editor . Olayın işleyicisi bir örneğini TextChangedEventArgsalır. TextChangedEventArgsve NewTextValue özellikleri aracılığıyla eski ve yeni değerlerine OldTextValue Editor Text erişim sağlar:

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

Tamamlanan olaya kod ve XAML'de abone olunabilir:

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>

İlgili bağlantılar

• Düzenleyici API'si