Öğretici: Windows uygulamanızda mürekkep desteği

Surface Kalemi ( Microsoft Store'da satın alınabilir).

Bu öğretici, Windows Ink ile yazma ve çizmeyi destekleyen temel bir Windows uygulaması oluşturma adımlarını gösterir. Her adımda ele alınan çeşitli özellikleri ve ilişkili Windows Ink API'lerini (bkz. Windows Ink platformunun bileşenleri) göstermek için GitHub'dan indirebileceğiniz örnek bir uygulamadan kod parçacıkları kullanırız (örnek koda bakın).

Aşağıdakilere odaklanıyoruz:

• Temel mürekkep desteği ekleme
• Mürekkep araç çubuğu ekleme
• El yazısı tanımayı destekleme
• Temel şekil tanımayı destekleme
• Mürekkebi kaydetme ve yükleme

Bu özellikleri uygulama hakkında daha fazla ayrıntı için bkz. Windows uygulamalarında Kalem etkileşimleri ve Windows Ink.

Giriş

Windows Ink ile müşterilerinize hızlı, el yazısı notlardan beyaz tahta tanıtımlarına ve mimari ve mühendislik çizimlerinden kişisel başyapıtlara kadar neredeyse tüm kalem ve kağıt deneyiminin dijital eşdeğerini sağlayabilirsiniz.

Önkoşullar

• Windows 10 veya Windows 11'in geçerli sürümünü çalıştıran bir bilgisayar (veya sanal makine)
• Visual Studio 2019 ve RS2 SDK veya üzeri
• Windows 10 SDK (10.0.15063.0)
• Yapılandırmanıza bağlı olarak, Microsoft.NETCore.UniversalWindowsPlatform NuGet paketini yüklemeniz ve sistem ayarlarınızda Geliştirici modunu etkinleştirmeniz gerekebilir (Ayarlar -> Güncelleştirme ve Güvenlik - Geliştiriciler için ->> Geliştirici özelliklerini kullanma).
• Visual Studio ile Windows uygulama geliştirmeyi yeni kullanmaya başladıysanız, bu öğreticiye başlamadan önce şu konulara göz atın:
  • Windows Uygulama SDK'sı için yükleme araçları
  • "Hello, world" uygulaması (XAML) oluşturma
• [İSTEĞE BAĞLı] Dijital kalem ve bu dijital kalemden girişi destekleyen ekranlı bir bilgisayar.

Uyarı

Windows Ink, en iyi Windows Ink deneyimi için fare ve dokunmayla çizmeyi destekleyebilmiştir (bu öğreticinin 3. adımında bunun nasıl yapıldığını gösteririz), ancak dijital kaleminiz ve bu dijital kalemden girişi destekleyen bir ekranı olan bir bilgisayarınız olmasını öneririz.

Örnek kodu

Bu öğretici boyunca, ele alınan kavramları ve işlevleri göstermek için örnek bir mürekkep uygulaması kullanacağız.

GitHub'dan bu Visual Studio örneğini ve kaynak kodunu windows-appsample-get-started-ink örneğinden indirin:

1. Yeşil Kopyala veya indir düğmesini seçin
   
2. GitHub hesabınız varsa Visual Studio'da Aç'ı seçerek depoyu yerel makinenize kopyalayabilirsiniz
3. GitHub hesabınız yoksa veya projenin yalnızca yerel bir kopyasını istiyorsanız ZIP İndir'i seçin (en son güncelleştirmeleri indirmek için düzenli olarak yeniden denetlemeniz gerekir)

Önemli

Örnekteki kodun çoğu yorum satırı olarak ayarlanmıştır. Her adımda ilerlediğimizde, kodun çeşitli bölümlerini yorum satırından çıkarmanız istenir. Visual Studio'da kod satırlarını vurgulayın ve CTRL-K ve ardından CTRL-U tuşlarına basın.

Windows Ink platformunun bileşenleri

Bu nesneler, Windows uygulamaları için mürekkep oluşturma deneyiminin büyük bir kısmını sağlar.

Bileşen	Description
InkCanvas	Kalemden gelen tüm girişleri varsayılan olarak mürekkep vuruşu veya silme işlemi olarak alan ve görüntüleyen bir XAML UI platformu denetimi.
InkPresenter	Bir InkCanvas denetimiyle birlikte örneklenen bir arka plan kod nesnesi (bu denetim InkCanvas.InkPresenter özelliği aracılığıyla erişilir). Bu nesne , InkCanvas tarafından kullanıma sunulan tüm varsayılan mürekkep oluşturma işlevlerinin yanı sıra ek özelleştirme ve kişiselleştirme için kapsamlı bir API kümesi sağlar.
InkToolbar	İlişkili bir InkCanvas'ta mürekkeple ilgili özellikleri etkinleştiren özelleştirilebilir ve genişletilebilir düğme koleksiyonunu içeren bir XAML UI platform denetimi.
IInkD2DRenderer Bu işlevi burada ele almuyoruz, daha fazla bilgi için Bkz. Karmaşık mürekkep örneği.	Mürekkep vuruşlarının varsayılan InkCanvas denetimi yerine Evrensel Windows uygulamasının belirlenmiş Direct2D cihaz bağlamında işlenmesini sağlar.

1. Adım: Örneği çalıştırma

RadialController örnek uygulamasını indirdikten sonra çalıştığını doğrulayın:

1. Örnek projeyi Visual Studio'da açın.

2. Çözüm Platformları açılan listesini Arm olmayan bir seçenek olarak ayarlayın.

3. Derlemek, dağıtmak ve çalıştırmak için F5 tuşuna basın.

   Uyarı

   Alternatif olarak Hata Ayıklama>Başlat hata ayıklama menü öğesini veya burada gösterilen Yerel Makine Çalıştırma düğmesini seçebilirsiniz.

Uygulama penceresi açılır ve birkaç saniye boyunca bir tanıtım ekranı göründükten sonra ilk ekranı görürsünüz.

Tamam, artık bu öğreticinin geri kalanında kullanacağımız temel Windows uygulamasına sahibiz. Aşağıdaki adımlarda mürekkep işlevimizi ekleyeceğiz.

2. Adım: Temel mürekkep oluşturma özelliğini desteklemek için InkCanvas kullanma

Belki de uygulamanın ilk biçiminde kalemle herhangi bir şey çizmenize izin vermediğini fark etmiş olabilirsiniz (bununla birlikte, uygulamayla etkileşim kurmak için kalemi standart bir işaretçi cihazı olarak kullanabilirsiniz).

Şimdi bu adımda bu küçük eksiklikleri düzeltelim.

Temel mürekkep oluşturma işlevselliğini eklemek için, uygulamanızdaki uygun sayfaya bir InkCanvas denetimi yerleştirmeniz yeter.

Uyarı

InkCanvas, alt öğeleri otomatik olarak boyutlandıran bir öğenin alt öğesi olmadığı sürece, varsayılan olarak sıfır yükseklik ve genişlik özelliklerine sahiptir.

Örnekte:

1. MainPage.xaml.cs dosyasını açın.
2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("// Adım 2: Temel mürekkep oluşturma özelliğini desteklemek için InkCanvas kullanma").
3. Aşağıdaki satırları yorumdan çıkarın. (Bu başvurular, sonraki adımlarda kullanılan işlevler için gereklidir).

    using Windows.UI.Input.Inking;
    using Windows.UI.Input.Inking.Analysis;
    using Windows.UI.Xaml.Shapes;
    using Windows.Storage.Streams;

4. MainPage.xaml dosyasını açın.
5. Bu adımın başlığıyla işaretlenmiş kodu bulun ("<-- Adım 2: InkCanvas ile temel mürekkep oluşturma -->").
6. Aşağıdaki satırın yorumunu kaldırın.

    <InkCanvas x:Name="inkCanvas" />

Hepsi bu kadar!

Şimdi uygulamayı yeniden çalıştırın. Devam edin ve karalayın, adınızı yazın veya (ayna tutuyorsanız veya çok iyi bir hafızanız varsa) kendi portrenizi çizin.

3. Adım: Dokunma ve fare ile mürekkep desteği

Varsayılan olarak, mürekkeplerin yalnızca kalem girişi için desteklendiğini fark edeceksiniz. Parmağınızla, farenizle veya dokunmatik yüzeyinizle yazmaya veya çizmeye çalışırsanız hayal kırıklığına uğrarsınız.

Üzüntüyü neşeye çevirmek için ikinci bir kod satırı eklemeniz gerekir. Bu kez, InkCanvas'ı tanımladığınız XAML dosyasının kod arka planındadır.

Bu adımda, InkCanvas'ınızdaki mürekkep girişinin (standart ve değiştirilmiş) giriş, işleme ve işleme işlemlerinin daha ayrıntılı bir şekilde yönetilmesini sağlayan InkPresenter nesnesini tanıtacağız.

Uyarı

Standart mürekkep girişi (kalem ucu veya silgi ucu/düğmesi), kalem gövde düğmesi, sağ fare düğmesi veya benzer bir mekanizma gibi ikincil donanım özelliğiyle değişmez.

Fare ve dokunmatik mürekkep oluşturmayı etkinleştirmek için InkPresenter'ınInputDeviceTypes özelliğini istediğiniz CoreInputDeviceTypes değerlerinin birleşimine ayarlayın.

Örnekte:

1. MainPage.xaml.cs dosyasını açın.
2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("// Adım 3: Dokunma ve fare ile mürekkep oluşturma desteği").
3. Aşağıdaki satırları yorumdan çıkarın.

    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse | 
        Windows.UI.Core.CoreInputDeviceTypes.Touch | 
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

Uygulamayı yeniden çalıştırdığınızda, tüm bilgisayarda parmakla boyama hayallerinizin gerçek olduğunu göreceksiniz!

Uyarı

Giriş cihazı türlerini belirtirken, bu özelliğin ayarlanması varsayılan InkCanvas ayarını geçersiz kıldığından, her bir giriş türü (kalem dahil) için desteği belirtmeniz gerekir.

4. Adım: Mürekkep araç çubuğu ekleme

InkToolbar, mürekkeple ilgili özellikleri etkinleştirmek için özelleştirilebilir ve genişletilebilir düğme koleksiyonu sağlayan bir UWP platform denetimidir.

InkToolbar varsayılan olarak, kullanıcıların kalem, kalem, vurgulayıcı veya silgi arasında hızlı bir şekilde seçim yapmasına olanak tanıyan temel bir düğme kümesi içerir. Bu düğmelerden herhangi biri bir kalıpla (cetvel veya protraktör) birlikte kullanılabilir. Kalem, kurşunkalem ve vurgulayıcı düğmelerinin her biri, mürekkep rengini ve vuruş boyutunu seçmek için bir açılır menü sunar.

Mürekkep oluşturma uygulamasına varsayılan bir InkToolbar eklemek için, bunu InkCanvas ile aynı sayfaya yerleştirmeniz ve iki denetimi ilişkilendirmeniz gerekir.

Örnekte

1. MainPage.xaml dosyasını açın.
2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("<-- 4. Adım: Mürekkep araç çubuğu ekleme -->").
3. Aşağıdaki satırları yorumdan çıkarın.

    <InkToolbar x:Name="inkToolbar" 
                        VerticalAlignment="Top" 
                        Margin="10,0,10,0"
                        TargetInkCanvas="{x:Bind inkCanvas}">
    </InkToolbar>

Uyarı

Kullanıcı arabirimini ve kodu olabildiğince düzenli ve basit tutmak için temel bir Grid düzeni kullanır ve InkToolbar'ı, bir grid satırında InkCanvas'tan sonra bildiririz. InkCanvas'dan önce bildirirseniz, InkToolbar önce işlenir, bu da tuvalin altında kalmasına ve kullanıcıya erişilememesine neden olur.

Şimdi InkToolbar'ı görmek için uygulamayı yeniden çalıştırın ve bazı araçları deneyin.

Sınama: Özel düğme ekleme

Burada özel bir InkToolbar örneği verilmiştir (Windows Ink Çalışma Alanı'ndaki Taslak Sayfası'ndan).

InkToolbar'ı özelleştirme hakkında daha fazla ayrıntı için bkz. Windows uygulaması mürekkep oluşturma uygulamasına InkToolbar ekleme.

5. Adım: El yazısı tanımayı destekleme

Artık uygulamanızda yazı yazıp çizim yapabileceğinize göre, şimdi bu karalamalarla yararlı bir şeyler yapmaya çalışalım.

Bu adımda, yazdıkların deşifresini çözmek için Windows Ink'in el yazısı tanıma özelliklerini kullanacağız.

Uyarı

El yazısı tanıma, Kalem ve Windows Ink ayarları aracılığıyla geliştirilebilir:

1. Başlat menüsünü açın ve Ayarlar'ı seçin.
2. Ayarlar ekranında Cihazlar>Kalemi ve Windows Ink'i seçin.
3. El Yazısı Kişiselleştirme iletişim kutusunu açmak için El yazımı tanıyın'ı seçin.

Örnekte:

1. MainPage.xaml dosyasını açın.
2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("<-- 5. Adım: El yazısı tanımayı destekleme -->").
3. Aşağıdaki satırların yorumunu kaldırın.

    <Button x:Name="recognizeText" 
            Content="Recognize text"  
            Grid.Row="0" Grid.Column="0"
            Margin="10,10,10,10"
            Click="recognizeText_ClickAsync"/>
    <TextBlock x:Name="recognitionResult" 
                Text="Recognition results: "
                VerticalAlignment="Center" 
                Grid.Row="0" Grid.Column="1"
                Margin="50,0,0,0" />

4. MainPage.xaml.cs dosyasını açın.
5. Bu adımın başlığıyla işaretlenmiş kodu bulun ("5. Adım: El yazısı tanımayı destekleme").
6. Aşağıdaki satırları yorumdan çıkarın.

• Bunlar, bu adım için gereken genel değişkenlerdir.

    InkAnalyzer analyzerText = new InkAnalyzer();
    IReadOnlyList<InkStroke> strokesText = null;
    InkAnalysisResult resultText = null;
    IReadOnlyList<IInkAnalysisNode> words = null;

• Bu, tanıma işlemini yaptığımız Metni tanı düğmesinin işleyicisidir.

    private async void recognizeText_ClickAsync(object sender, RoutedEventArgs e)
    {
        strokesText = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
        // Ensure an ink stroke is present.
        if (strokesText.Count > 0)
        {
            analyzerText.AddDataForStrokes(strokesText);

            resultText = await analyzerText.AnalyzeAsync();

            if (resultText.Status == InkAnalysisStatus.Updated)
            {
                words = analyzerText.AnalysisRoot.FindNodes(InkAnalysisNodeKind.InkWord);
                foreach (var word in words)
                {
                    InkAnalysisInkWord concreteWord = (InkAnalysisInkWord)word;
                    foreach (string s in concreteWord.TextAlternates)
                    {
                        recognitionResult.Text += s;
                    }
                }
            }
            analyzerText.ClearDataForAllStrokes();
        }
    }

7. Uygulamayı yeniden çalıştırın, bir şey yazın ve ardından Metni tanı düğmesine tıklayın
8. Tanıma sonuçları düğmenin yanında görüntülenir

Sınama 1: Uluslararası tanıma

Windows Ink, Windows tarafından desteklenen dillerin birçoğu için metin tanımayı destekler. Her dil paketi, dil paketiyle birlikte yüklenebilen bir el yazısı tanıma altyapısı içerir.

Yüklü el yazısı tanıma altyapılarını sorgulayarak belirli bir dili hedefle.

Uluslararası el yazısı tanıma hakkında daha fazla bilgi için bkz. Windows Ink vuruşlarını metin olarak tanıma.

Sınama 2: Dinamik tanıma

Bu öğreticide, tanımayı başlatmak için bir düğmeye basılması gerekir. Ayrıca, temel bir zamanlama işlevi kullanarak dinamik tanıma da gerçekleştirebilirsiniz.

Dinamik tanıma hakkında daha fazla bilgi için bkz. Windows Ink vuruşlarını metin olarak tanıma.

6. Adım: Şekilleri tanıma

Şimdi el yazısı notlarınızı biraz daha okunaklı bir şeye dönüştürebilirsiniz. Peki ya sabah Flowcharters Anonim toplantınızdan gelen titrek, kafeinli karalamalar?

Uygulamanız mürekkep analizini kullanarak aşağıdakiler de dahil olmak üzere bir dizi temel şekli tanıyabilir:

• Circle
• Elmas
• Çizim
• Elips
• Eşkenar Üçgen
• Altıgen
• İkizkenar Üçgen
• Paralelkenar
• Pentagon
• Dörtgen
• Dikdörtgen
• RightTriangle
• Square
• Yamuk
• Triangle

Bu adımda, karalayıcılarınızı temizlemeye çalışmak için Windows Ink'in şekil tanıma özelliklerini kullanacağız.

Bu örnekte mürekkep vuruşlarını yeniden çizmeye çalışmıyoruz (ancak bu mümkündür). Bunun yerine, InkCanvas'ın altına özgün mürekkepten türetilen eşdeğer Elipse veya Çokgen nesneler çizdiğimiz standart bir tuval ekleriz. Ardından ilgili mürekkep vuruşlarını sileriz.

Örnekte:

1. MainPage.xaml dosyasını açma
2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("<-- Adım 6: Şekilleri tanıma -->")
3. Bu satırı yorumdan çıkarın.

   <Canvas x:Name="canvas" />

   And these lines.

    <Button Grid.Row="1" x:Name="recognizeShape" Click="recognizeShape_ClickAsync"
        Content="Recognize shape" 
        Margin="10,10,10,10" />

4. MainPage.xaml.cs dosyasını açma
5. Bu adımın başlığıyla işaretlenmiş kodu bulun ("// 6. Adım: Şekilleri tanıma")
6. Şu satırların açıklamalarını kaldırın:

    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private void DrawEllipse(InkAnalysisInkDrawing shape)
    {
        ...
    }

    private void DrawPolygon(InkAnalysisInkDrawing shape)
    {
        ...
    }

7. Uygulamayı çalıştırın, bazı şekiller çizin ve Şekli tanı düğmesine tıklayın

İşte dijital peçeteden gelen ilkel akış çizelgesi örneği.

Şekil tanımadan sonra aynı akış çizelgesi aşağıdadır.

7. Adım: Mürekkep kaydetme ve yükleme

Karalama işlemini bitirdiniz ve gördüklerinizi beğendiniz ama birkaç şeyi daha sonra değiştirmek isteyebileceğinizi mi düşünüyorsunuz? Mürekkep vuruşlarınızı bir Mürekkep Serileştirilmiş Biçim (ISF) dosyasına kaydedebilir ve ilham geldiğinde düzenlemek üzere yükleyebilirsiniz.

ISF dosyası, mürekkep vuruşu özelliklerini ve davranışlarını açıklayan ek meta veriler içeren temel bir GIF görüntüsüdür. Mürekkep etkin olmayan uygulamalar ek meta verileri yoksayabilir ve temel GIF görüntüsünü (alfa kanal arka plan saydamlığı dahil) yüklemeye devam edebilir.

Uyarı

Mürekkep SeriLeştirilmiş Biçim (ISF) Belirtimi Microsoft İndirme Merkezi'nden indirilebilir.

Bu adımda, mürekkep araç çubuğunun yanında bulunan Kaydet ve Yükle düğmelerini bağlayacağız.

Örnekte:

1. MainPage.xaml dosyasını açın.
2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("<-- Adım 7: Mürekkep kaydetme ve yükleme -->").
3. Aşağıdaki satırları yorumdan çıkarın.

    <Button x:Name="buttonSave" 
            Content="Save" 
            Click="buttonSave_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>
    <Button x:Name="buttonLoad" 
            Content="Load"  
            Click="buttonLoad_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>

4. MainPage.xaml.cs dosyasını açın.
5. Bu adımın başlığıyla işaretlenmiş kodu bulun ("// Adım 7: Mürekkep kaydetme ve yükleme").
6. Aşağıdaki satırları yorumdan çıkarın.

    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

7. Uygulamayı çalıştırın ve bir şeyler çizin.
8. Kaydet düğmesini seçin ve çiziminizi kaydedin.
9. Mürekkeli silin veya uygulamayı yeniden başlatın.
10. Yükle düğmesini seçin ve az önce kaydettiğiniz mürekkep dosyasını açın.

Sınama: Mürekkep vuruşlarını kopyalayıp yapıştırmak için panoyu kullanma

Windows Ink ayrıca panoya ve panodan kalem vuruşlarını kopyalamayı ve yapıştırmayı destekler.

Panoyu mürekkeple kullanma hakkında daha fazla bilgi için bkz. Windows Ink vuruş verilerini depolama ve alma.

Özet

Tebrikler, Windows uygulamanızda Mürekkep Desteği Sağlama dersini tamamladınız! Size Windows uygulamalarınızda mürekkep desteği için gereken temel kodu ve Windows Ink platformu tarafından desteklenen daha zengin kullanıcı deneyimlerinden bazılarını nasıl sağlayabileceklerini gösterdik.

İlgili makaleler

• Windows uygulamalarında Kalem etkileşimleri ve Windows Ink

Samples

• Mürekkep analizi örneği (temel) (C#)
• Mürekkep el yazısı tanıma örneği (C#)
• Mürekkep SeriLeştirilmiş Biçim (ISF) dosyasından mürekkep vuruşlarını kaydetme ve yükleme
• Mürekkep vuruşlarını panodan kaydet ve yükle
• Mürekkep araç çubuğu konumu ve yönlendirme örneği (temel)
• Mürekkep araç çubuğu konumu ve yönlendirme örneği (dinamik)
• Basit mürekkep örneği (C#/C++)
• Karmaşık mürekkep örneği (C++)
• Mürekkep örneği (JavaScript)
• Kullanmaya Başlama Öğreticisi: Windows uygulamanızda mürekkep desteği
• Boyama kitabı örneği
• Aile notları örneği