El yazısı görünümüyle metin girişi

Uyarı

El yazısı görünümü , Windows Uygulama SDK'sında WinUI'deki metin denetimleri tarafından desteklenmez. Bu makale yalnızca UWP uygulamaları için geçerlidir.

Kalemle dokunulduğunda metin kutusu genişler

TextBox, RichEditBox ve AutoSuggestBox gibi UWP metin girişi denetimlerinde yerleşik olarak bulunan el yazısı görünümünü özelleştirin (mürekkep- metin girişi için).

Genel Bakış

UWP metin girişi denetimleri, kullanıcı kalem kullanarak metin giriş kutusuna dokunduğunda el yazısı yüzeyine dönüştürerek Windows Ink kullanarak kalem girişini destekler.

Metin, kullanıcı el yazısı yüzeyinin herhangi bir yerine yazarken tanınır ve aday penceresi tanıma sonuçlarını gösterir. Kullanıcı seçmek için bir sonuda dokunabilir veya önerilen adayı kabul etmek için yazmaya devam edebilir. Harf harf tanıma sonuçları aday penceresine eklenir, bu yüzden tanıma sözlükteki kelimelerle sınırlı değildir. Kullanıcı yazarken, kabul edilen metin girişi doğal yazma hissini koruyan bir betik yazı tipine dönüştürülür.

Uyarı

El yazısı görünümü varsayılan olarak etkindir, ancak bunu denetim temelinde devre dışı bırakabilir ve bunun yerine metin giriş paneline geri dönebilirsiniz.

Mürekkep ve öneriler içeren metin kutusu

Kullanıcı, standart hareketleri ve eylemleri kullanarak metinlerini düzenleyebilir:

Üstünü çiz veya karala - bir sözcüğü veya sözcüğün bir kısmını silmek için üstünden çizgi çekin.
join - aralarındaki boşluğu silmek için sözcükler arasında bir yay çizin
insert - boşluk eklemek için bir 'caret' işareti çizin
üzerine yazma - değiştirmek için var olan metnin üzerine yazma

Mürekkep düzeltmesi içeren metin kutusu

El yazısı görünümünü devre dışı bırakma

Yerleşik el yazısı görünümü varsayılan olarak etkindir.

Uygulamanızda zaten eşdeğer mürekkepten metne işlevselliği sağlıyorsanız veya metin girişi deneyiminiz el yazısı aracılığıyla kullanılamayan bir tür biçimlendirmeye veya özel karaktere (sekme gibi) bağlıysa el yazısı görünümünü devre dışı bırakmak isteyebilirsiniz.

Bu örnekte, TextBox denetiminin IsHandwritingViewEnabled özelliğini false olarak ayarlayarak el yazısı görünümünü devre dışı bırakacağız. El yazısı görünümünü destekleyen tüm metin denetimleri benzer bir özelliği destekler.

<TextBox Name="SampleTextBox"
    Height="50" Width="500" 
    FontSize="36" FontFamily="Segoe UI" 
    PlaceholderText="Try taping with your pen" 
    IsHandwritingViewEnabled="False">
</TextBox>

El yazısı görünümünün hizalamasını belirtme

El yazısı görünümü, temel alınan metin denetiminin üzerinde bulunur ve kullanıcının el yazısı tercihlerini karşılayacak şekilde boyutlandırılır (bkz. Ayarlar -> Bluetooth ve cihazlar -> Kalem & Windows Ink - El Yazısı ->> Yazı Tipi boyutu). Görünüm, metin denetimine ve uygulama içindeki konumuna göre de otomatik olarak hizalanır.

Uygulama kullanıcı arabirimi, daha büyük denetime uyum sağlamak için yeniden düzenlenmez, bu da önemli kullanıcı arayüzünü engelleyebilir.

Aşağıdaki kod parçacığında, el yazısı görünümünü hizalamak için temel alınan metin denetiminde hangi tutturucunun kullanılacağını belirtmek için TextBox HandwritingView'un PlacementAlignment özelliğinin nasıl kullanılacağı gösterilmektedir.

<TextBox Name="SampleTextBox"
    Height="50" Width="500" 
    FontSize="36" FontFamily="Segoe UI" 
    PlaceholderText="Try taping with your pen">
        <TextBox.HandwritingView>
            <HandwritingView PlacementAlignment="TopLeft"/>
        </TextBox.HandwritingView>
</TextBox>

Otomatik tamamlama adaylarını devre dışı bırakma

Metin önerisi açılır penceresi varsayılan olarak etkindir. Birincil adayın yanlış olması durumunda kullanıcının seçebileceği en iyi mürekkep tanıma adaylarının listesini sağlar.

Uygulamanız zaten sağlam, özel tanıma işlevi sağlıyorsa, aşağıdaki örnekte gösterildiği gibi yerleşik önerileri devre dışı bırakmak için AreCandidatesEnabled özelliğini kullanabilirsiniz.

<TextBox Name="SampleTextBox"
    Height="50" Width="500" 
    FontSize="36" FontFamily="Segoe UI" 
    PlaceholderText="Try taping with your pen">
        <TextBox.HandwritingView>
            <HandwritingView AreCandidatesEnabled="False"/>
        </TextBox.HandwritingView>
</TextBox>

El yazısı yazı tipi tercihlerini kullanma

Kullanıcı, mürekkep tanımaya dayalı metin işlenirken kullanılacak önceden tanımlanmış el yazısı tabanlı yazı tipleri koleksiyonu arasından seçim yapabilir (bkz. Ayarlar -> Bluetooth ve cihazlar -> Kalem & Windows Ink -> El Yazısı -> Yazı Tipi).

Uygulamanız bu ayara erişebilir ve metin denetimindeki tanınan metin için seçili yazı tipini kullanabilir.

Bu örnekte, TextBox'ın TextChanged olayını dinler ve metin değişikliği HandwritingView'dan (veya değilse varsayılan yazı tipinden) kaynaklanıyorsa kullanıcının seçili yazı tipini uygularız.

private void SampleTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    ((TextBox)sender).FontFamily = 
        ((TextBox)sender).HandwritingView.IsOpen ?
            new FontFamily(PenAndInkSettings.GetDefault().FontFamilyName) : 
            new FontFamily("Segoe UI");
}

Bileşik denetimlerde HandwritingView'a erişme

TextBox veya RichEditBox denetimini (AutoSuggestBox gibi) kullanan bileşik denetimler de HandwritingView'ı destekler.

Bileşik denetimde HandwritingView'a erişmek için VisualTreeHelper API'sini kullanın.

Aşağıdaki XAML kod parçacığı bir AutoSuggestBox denetimi görüntüler.

<AutoSuggestBox Name="SampleAutoSuggestBox" 
    Height="50" Width="500" 
    PlaceholderText="Auto Suggest Example" 
    FontSize="16" FontFamily="Segoe UI"  
    Loaded="SampleAutoSuggestBox_Loaded">
</AutoSuggestBox>

Buna karşılık gelen arka planda kodda AutoSuggestBox'ta HandwritingView'un nasıl devre dışı bırakılası gösterilmektedir.

İlk olarak, öğenin Loaded olayını işler ve görsel ağaç geçişi başlatmak için bir FindInnerTextBox işlev çağırırız.

private void SampleAutoSuggestBox_Loaded(object sender, RoutedEventArgs e)
{
    if (FindInnerTextBox((AutoSuggestBox)sender))
        autoSuggestInnerTextBox.IsHandwritingViewEnabled = false;
}

FindInnerTextBox işlevinde, bir FindVisualChildByName işlev çağrısı yaparak (AutoSuggestBox'tan başlayarak) görsel ağaçta yinelenir.

private bool FindInnerTextBox(AutoSuggestBox autoSuggestBox)
{
    if (autoSuggestInnerTextBox == null)
    {
        // Cache textbox to avoid multiple tree traversals. 
        autoSuggestInnerTextBox = 
            (TextBox)FindVisualChildByName<TextBox>(autoSuggestBox);
    }
    return (autoSuggestInnerTextBox != null);
}
```

Son olarak, FindVisualChildByName işlev, TextBox alınana kadar görsel ağaç üzerinde yinelenir.

private FrameworkElement FindVisualChildByName<T>(DependencyObject obj)
{
    FrameworkElement element = null;
    int childrenCount = 
        VisualTreeHelper.GetChildrenCount(obj);
    for (int i = 0; (i < childrenCount) && (element == null); i++)
    {
        FrameworkElement child = 
            (FrameworkElement)VisualTreeHelper.GetChild(obj, i);
        if ((child.GetType()).Equals(typeof(T)) || (child.GetType().GetTypeInfo().IsSubclassOf(typeof(T))))
        {
            element = child;
        }
        else
        {
            element = FindVisualChildByName<T>(child);
        }
    }
    return (element);
}
```

HandwritingView'ı yeniden konumlandırma

Bazı durumlarda, HandwritingView'un aksi takdirde kapsamayabileceği kullanıcı arabirimi öğelerini kapsadığından emin olmanız gerekebilir.

Burada dikteyi destekleyen bir TextBox oluşturacağız (Bir TextBox ve dikte düğmesi StackPanel'e yerleştirilerek uygulanır).

Dikteyi destekleyen metin kutusunun ekran görüntüsü

StackPanel artık TextBox'tan daha büyük olduğundan , HandwritingView bileşik denetimin tümünü engellemeyebilir.

TextBox'ı kısmen engelleyen bir HandwritingView denetiminin ve TextBox'ı tamamen tıkamak için yeniden konumlandırılan denetimin ekran görüntüsü

Bu sorunu çözmek için HandwritingView'un PlacementTarget özelliğini hizalanması gereken kullanıcı arabirimi öğesine ayarlayın.

<StackPanel Name="DictationBox" 
    Orientation="Horizontal" 
    VerticalAlignment="Top" 
    HorizontalAlignment="Left" 
    BorderThickness="1" BorderBrush="DarkGray" 
    Height="55" Width="500" Margin="50">
    <TextBox Name="DictationTextBox" 
        Width="450" BorderThickness="0" 
        FontSize="24" VerticalAlignment="Center">
        <TextBox.HandwritingView>
            <HandwritingView PlacementTarget="{Binding ElementName=DictationBox}"/>
        </TextBox.HandwritingView>
    </TextBox>
    <Button Name="DictationButton" 
        Height="48" Width="48" 
        FontSize="24" 
        FontFamily="Segoe MDL2 Assets" 
        Content="&#xE720;" 
        Background="White" Foreground="DarkGray"     Tapped="DictationButton_Tapped" />
</StackPanel>

HandwritingView'ı yeniden boyutlandırma

Ayrıca HandwritingView'un boyutunu da ayarlayabilirsiniz. Bu, görünümün önemli kullanıcı arabirimini engellemediğinden emin olmanız gerektiğinde yararlı olabilir.

Önceki örnekte olduğu gibi dikteyi destekleyen bir TextBox oluşturuyoruz (StackPanel'e TextBox ve dikte düğmesi yerleştirilerek uygulanır).

Dikteyi destekleyen bir TextBox'ın ekran görüntüsü

Bu durumda, dikte düğmesinin görünür olduğundan emin olmak için HandwritingView'ı yeniden boyutlandırıyoruz.

Dikte düğmesini engelleyen bir HandwritingView denetiminin ve dikte düğmesinin görünür olduğundan emin olmak için yeniden boyutlandırılan denetimin ekran görüntüsü

Bunu yapmak için , HandwritingView'un MaxWidth özelliğini, gizli olması gereken kullanıcı arabirimi öğesinin genişliğine bağlarız.

<StackPanel Name="DictationBox" 
    Orientation="Horizontal" 
    VerticalAlignment="Top" 
    HorizontalAlignment="Left" 
    BorderThickness="1" 
    BorderBrush="DarkGray" 
    Height="55" Width="500" 
    Margin="50">
    <TextBox Name="DictationTextBox" 
        Width="450" 
        BorderThickness="0" 
        FontSize="24" 
        VerticalAlignment="Center">
        <TextBox.HandwritingView>
            <HandwritingView 
                PlacementTarget="{Binding ElementName=DictationBox}"
                MaxWidth="{Binding ElementName=DictationTextBox, Path=Width"/>
        </TextBox.HandwritingView>
    </TextBox>
    <Button Name="DictationButton" 
        Height="48" Width="48" 
        FontSize="24" 
        FontFamily="Segoe MDL2 Assets" 
        Content="&#xE720;" 
        Background="White" Foreground="DarkGray" 
        Tapped="DictationButton_Tapped" />
</StackPanel>

Özel kullanıcı arabirimini yeniden konumlandırma

Metin girişine yanıt olarak görüntülenen bilgili bir açılır pencere gibi özel kullanıcı arabiriminiz varsa, el yazısı görünümünün gizli olmaması için bu kullanıcı arabirimini yeniden konumlandırmanız gerekebilir.

Özel kullanıcı arabirimine sahip TextBox

Aşağıdaki örnek, bir Popup'ın konumunu ayarlamak için HandwritingView'un Opened, Closed ve SizeChanged olaylarını nasıl dinleyeceğinizi gösterir.

private void Search_HandwritingViewOpened(
    HandwritingView sender, HandwritingPanelOpenedEventArgs args)
{
    UpdatePopupPositionForHandwritingView();
}

private void Search_HandwritingViewClosed(
    HandwritingView sender, HandwritingPanelClosedEventArgs args)
{
    UpdatePopupPositionForHandwritingView();
}

private void Search_HandwritingViewSizeChanged(
    object sender, SizeChangedEventArgs e)
{
    UpdatePopupPositionForHandwritingView();
}

private void UpdatePopupPositionForHandwritingView()
{
if (CustomSuggestionUI.IsOpen)
    CustomSuggestionUI.VerticalOffset = GetPopupVerticalOffset();
}

private double GetPopupVerticalOffset()
{
    if (SearchTextBox.HandwritingView.IsOpen)
        return (SearchTextBox.Margin.Top + SearchTextBox.HandwritingView.ActualHeight);
    else
        return (SearchTextBox.Margin.Top + SearchTextBox.ActualHeight);    
}

HandwritingView denetimini yeniden şablonla

Tüm XAML çerçevesi denetimlerde olduğu gibi, belirli gereksinimleriniz için bir HandwritingView'un görsel yapısını ve görsel davranışını özelleştirebilirsiniz.

Özel şablon oluşturmanın tam örneğini görmek için Özel aktarım denetimleri oluşturma nasıl yapılır veya Özel Düzenleme Denetimi örneğine göz atın.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-12-02