Dokunma etkileşimleri geliştirici kılavuzu

Uygulamanızı, dokunmanın kullanıcılarınızın birincil giriş yöntemi olacağı beklentisiyle tasarlar. WinUI denetimlerini kullanıyorsanız, dokunmatik yüzey, fare ve kalem/ekran kalemi desteği ek programlama gerektirmez, çünkü WinUI uygulamaları bunu ücretsiz olarak sağlar.

Ancak, dokunma için iyileştirilmiş bir kullanıcı arabiriminin her zaman geleneksel bir kullanıcı arabirimine göre üstün olmadığını unutmayın. Her ikisi de bir teknolojiye ve uygulamaya özgü avantajlar ve dezavantajlar sağlar. Dokunmatik öncelikli bir kullanıcı arabirimine geçerken, dokunmatik, dokunmatik yüzey, kalem/ekran kalemi, fare ve klavye girişleri arasındaki temel farkları anlamak önemlidir.

Portant API'leri: Microsoft. UI. Xaml.Input, Windows. UI. Core, Windows. Devices.Input

Birçok cihazda, bir veya daha fazla parmağın (veya dokunmatik temasların) giriş olarak kullanılmasını destekleyen çoklu dokunmatik ekranlar bulunmaktadır. Dokunma temasları ve hareketleri, çeşitli kullanıcı etkileşimlerini desteklemek amacıyla dokunma hareketleri ve manipülasyonları olarak yorumlanır.

Windows app, dokunmatik girişi işlemek için çeşitli mekanizmalar içerir ve kullanıcılarınızın güvenle keşfedebileceği çevreleyici bir deneyim oluşturmanıza olanak tanır. Burada, bir Windows app dokunmatik girişi kullanmanın temellerini ele alacağız.

Dokunma etkileşimleri üç şey gerektirir:

• Dokunmaya duyarlı bir ekran.
• Ekrana bir veya daha fazla parmağın doğrudan teması (veya ekran yakınlık sensörlerine sahipse ve havada algılama özelliğini destekliyorsa) yakınlık algılanması olarak kabul edilir.
• Dokunmatik temasların hareketi (veya bir zaman eşiğine göre hareketin olmaması).

Dokunma algılayıcısı tarafından sağlanan giriş verileri:

• Kaydırma, döndürme, yeniden boyutlandırma veya taşıma gibi bir veya daha fazla kullanıcı arabirimi öğesinin doğrudan işlemesi için fiziksel bir hareket olarak yorumlanır. (Buna karşılık, bir öğeyle properties window, iletişim kutusu veya diğer kullanıcı arabirimi affordance'ı aracılığıyla etkileşime geçmek dolaylı işleme olarak kabul edilir.)
• Fare veya kalem gibi alternatif bir giriş yöntemi olarak tanınır.
• Kalemle çizilmiş bir mürekkep çizgisini silmek gibi diğer giriş yöntemlerini tamamlamak veya değiştirmek için kullanılır.

Dokunmatik giriş genellikle ekrandaki bir öğenin doğrudan manipülasyonunu içerir. Eleman, vuruş testi alanındaki herhangi bir dokunma temasına hemen yanıt verir ve kaldırma dahil olmak üzere dokunmatik kontakların sonraki hareketlerine uygun şekilde tepki verir.

Özel dokunma hareketleri ve etkileşimler dikkatle tasarlanmalıdır. Bunlar sezgisel, duyarlı ve bulunabilir olmalıdır ve kullanıcıların uygulamanızı güvenle keşfetmesine izin vermelidir.

Uygulama işlevselliğinin desteklenen her giriş cihazı türünde tutarlı bir şekilde kullanıma sunulduğuna emin olun. Gerekirse, klavye etkileşimleri için metin girişi veya fare ve kalem için kullanıcı arabirimi gücü gibi bir tür dolaylı giriş modu kullanın.

Geleneksel giriş cihazlarının (fare ve klavye gibi) tanıdık ve birçok kullanıcı için çekici olduğunu unutmayın. Dokunmanın yapamayacağı hız, doğruluk ve dokunarak geri bildirim sunabilirler.

Tüm giriş cihazları için benzersiz ve ayırt edici etkileşim deneyimleri sağlamak en geniş özellik ve tercih yelpazesini destekleyecek, mümkün olan en geniş kitleye hitap edecek ve uygulamanıza daha fazla müşteri çekecektir.

Dokunma etkileşimi gereksinimlerini karşılaştırma

Aşağıdaki tabloda, dokunmatik olarak iyileştirilmiş Windows uygulamaları tasarlarken göz önünde bulundurmanız gereken giriş cihazları arasındaki farklardan bazıları gösterilmektedir.

Faktör	Dokunma etkileşimleri	Fare, klavye, dijital kalem/ekran kalemi etkileşimleri	Touchpad
Kesinlik	Parmak ucunun iletişim alanı tek bir x-y koordinatından büyüktür ve bu da istenmeyen komut etkinleştirmeleri olasılığını artırır.	Fare ve kalem/ekran kalemi hassas bir x-y koordinatı sağlar.	Fareyle aynı.
	Temas alanının şekli hareket boyunca değişir.	Fare hareketleri ve kalem/ekran kalemi vuruşları hassas x-y koordinatları sağlar. Klavye odağı belirgin.	Fareyle aynı.
	Hedeflemeye yardımcı olacak bir fare imleci yoktur.	Fare imleci, kalem/ekran kalemi imleci ve klavye odağı hedeflemeye yardımcı olur.	Fareyle aynı.
İnsan anatomisi	Parmak ucu hareketleri belirsizdir, çünkü bir veya daha fazla parmakla düz çizgi hareketi zordur. Bu, el eklemlerinin eğriliği ve harekete dahil olan eklemlerin sayısından kaynaklanır.	Fare veya kalem/ekran kalemiyle düz çizgi hareketi yapmak daha kolaydır çünkü onları denetleen el, ekrandaki imleçten daha kısa bir fiziksel mesafe kat eder.	Fareyle aynı.
	Dokunmatik yüzeyin bazı alanlarına, parmak duruşu ve kullanıcının cihazı kavrayışı nedeniyle ulaşılması zor olabilir.	Fare ve kalem/ekran kalemi ekranın herhangi bir bölümüne ulaşabilirken, herhangi bir denetime klavyeyle sekme sırası üzerinden erişilebilir olmalıdır.	Parmak duruşu ve kavrama sorunu olabilir.
	Nesneler bir veya daha fazla parmak ucu veya kullanıcının eli tarafından gizlenmiş olabilir. Bu, tıkanıklık olarak bilinir.	Dolaylı giriş cihazları tıkanmaya neden olmaz.	Fareyle aynı.
Nesne durumu	Dokunma iki durumlu bir model kullanır: Bir ekran cihazının dokunma yüzeyi dokunulduğunda (açık konumda) veya dokunulmadığında (kapalı konumda). Ek görsel geri bildirim tetikleyebilecek bir vurgulama durumu yoktur.	Fare, kalem/ekran kalemi ve klavye, hepsi üç durumlu bir modeli ortaya koyar: yukarı (kapalı), aşağı (açık) ve havada durma (odak). Vurgulama, kullanıcıların kullanıcı arabirimi öğeleriyle ilişkili araç ipuçlarını keşfetmelerini ve öğrenmelerini sağlar. Vurgulama ve odak efektleri hangi nesnelerin etkileşimli olduğunu aktarabilir ve hedeflemeye yardımcı olabilir.	Fareyle aynı.
Zengin etkileşim	Çoklu dokunmayı destekler: dokunmatik yüzeyde birden çok giriş noktası (parmak uçları).	Tek bir giriş noktasını destekler.	Dokunmayla aynı.
	Dokunma, sürükleme, kaydırma, sıkıştırma ve döndürme gibi hareketlerle nesnelerin doğrudan manipülasyonlarını destekler.	Fare, kalem/ekran kalemi ve klavye dolaylı giriş cihazları olduğundan doğrudan işleme desteği yoktur.	Fareyle aynı.

Uyarı

Dolaylı giriş, 25 yılı aşkın bir süredir yapılan iyileştirmelerden yararlanmıştır. Üzerine gelindiğinde tetiklenen araç ipuçları gibi özellikler, dokunmatik yüzey, fare, kalem/ekran kalemi ve klavye girişi için özel olarak kullanıcı arabirimi keşfini çözmek için tasarlanmıştır. Bunun gibi kullanıcı arabirimi özellikleri, bu diğer cihazlar için kullanıcı deneyiminden ödün vermeden dokunmatik giriş tarafından sağlanan zengin deneyim için yeniden tasarlanmıştır.

Dokunmatik geri bildirim kullanma

Uygulamanızla etkileşimler sırasında uygun görsel geri bildirim, kullanıcıların etkileşimlerinin hem uygulama hem de Windows platformu tarafından nasıl yorumlandığı konusunda bilgi sahibi olmalarına, öğrenmelerine ve uyarlamalarına yardımcı olur. Görsel geri bildirim başarılı etkileşimleri gösterebilir, sistem durumunu aktarabilir, denetim duygusunu geliştirebilir, hataları azaltabilir, kullanıcıların sistemi ve giriş cihazını anlamasına yardımcı olabilir ve etkileşimi teşvik edebilir.

Kullanıcı konuma göre doğruluk ve duyarlık gerektiren etkinlikler için dokunmatik girişe dayandığında görsel geri bildirim kritik önem taşır. Kullanıcının uygulamanız ve denetimleriniz tarafından tanımlanan özel hedefleme kurallarını anlamasına yardımcı olmak için, dokunmatik giriş algılandığında ve her yerde geri bildirim görüntüleyin.

Targeting

Hedefleme şu şekilde iyileştirilmiştir:

• Dokunmatik hedef boyutları

  Net boyut yönergeleri, uygulamaların kolayca ve güvenli bir şekilde hedef alan nesneler ve denetimler içeren rahat bir kullanıcı arabirimi sağlamasını sağlar.

• Kontak geometrisi

  En olası hedef nesneyi parmağın tüm temas alanı belirler.

• Scrubbing

  Grup içindeki öğeler, parmağı aralarında sürükleyerek (örneğin radyo düğmeleri) kolayca yeniden hedeflenir. Dokunmatik serbest bırakılınca geçerli öğe etkinleştirilir.

• Sallanma

  Yoğun paketlenmiş öğeler (örneğin, köprüler) parmak aşağı basılarak ve kaydırmadan öğeler üzerinde ileri geri sallanarak kolayca yeniden hedeflenir. Tıkanıklık nedeniyle, geçerli öğe araç ipucu veya durum çubuğu aracılığıyla tanımlanır ve dokunma serbest bırakıldığında etkinleştirilir.

Doğruluk

Aşağıdakini kullanarak özensiz etkileşimler tasarla:

• Kullanıcılar içerikle etkileşimde bulunduğunda istenen konumlarda durmayı kolaylaştıran yakalama noktaları.
• El hafif bir yayda hareket ettiğinde bile dikey veya yatay kaydırmaya yardımcı olabilecek yönlü "raylar". Daha fazla bilgi için bkz. kaydırma yönergeleri.

Tıkanıklık

Parmak ve el tıkanıklıklarından şu şekilde kaçınılır:

• Kullanıcı arabiriminin boyutu ve konumu

  Kullanıcı arabirimi öğelerini parmak ucu temas alanıyla tamamen kaplanamayacak kadar büyük hale getirin.

  Mümkün olduğunca menüleri ve açılır pencereleri iletişim alanının üzerinde konumlandırın.

• Tooltiplar

  Kullanıcı bir nesne üzerinde parmakla temas kurduğunda araç ipuçlarını gösterir. Bu, nesne işlevselliğini tanımlamak için kullanışlıdır. Kullanıcı, araç ipucunun çağrılmasını önlemek için parmak ucunu nesnenin dışına sürükleyebilir.

  Küçük nesneler için, araç ipuçlarını parmak ucu temas alanı tarafından kaplanmayacak şekilde kaydırın. Bu, hedefleme için yararlıdır.

• Hassasiyet için tutamaklar

  Hassasiyetin gerekli olduğu durumlarda (örneğin, metin seçimi), doğruluğu artırmak için ayarlanmış seçim tutamaçları sağlayın. Daha fazla bilgi için bkz. Guidelines for selecting text and images (Windows Çalışma Zamanı apps).

Zamanlama

Zamanlanmış mod değişiklikleri yerine doğrudan manipülasyonu tercih edin. Doğrudan işleme, bir nesnenin doğrudan, gerçek zamanlı fiziksel işlemesini simüle eder. Parmaklar hareket ettikçe nesne yanıt verir.

Öte yandan, zamanlanmış bir etkileşim, bir dokunma etkileşiminin ardından gerçekleşir. Zamanlanmış etkileşimler genellikle hangi komutun gerçekleştirileceğini belirlemek için zaman, mesafe veya hız gibi görünmez eşiklere bağlıdır. Sistem eylemi gerçekleştirene kadar zamanlanmış etkileşimlerin görsel geri bildirimi yoktur.

Doğrudan işleme, zamanlanmış etkileşimler üzerinde bir dizi avantaj sağlar:

• Etkileşimler sırasında anında görsel geri bildirim, kullanıcıların kendilerini daha etkileşimli, güvenli ve denetimde hissetmelerini sağlar.
• Doğrudan manipülasyonlar, geri çevrilebilir olduklarından sistemi keşfetmeyi daha güvenli hale getirir; kullanıcılar eylemlerine mantıksal ve sezgisel bir şekilde kolayca geri adım atabilir.
• Nesneleri doğrudan etkileyen ve gerçek dünya etkileşimlerini taklit eden etkileşimler daha sezgisel, bulunabilir ve akılda kalıcıdır. Belirsiz veya soyut etkileşimlere güvenmez.
• Kullanıcıların rastgele ve görünmez eşiklere ulaşması gerektiğinden, zamanlanmış etkileşimlerin gerçekleştirilmesi zor olabilir.

Ayrıca, aşağıdakiler kesinlikle önerilir:

• Manipülasyonlar, kullanılan parmak sayısıyla ayırt edilmemelidir.
• Etkileşimler bileşik işlemeleri desteklemelidir. Örneğin, yakınlaştırmak için sıkıştırarak ve kaydırmak için parmaklarınızı sürükleyerek kullanın.
• Etkileşimler zamana göre ayırt edilmemelidir. Aynı etkileşimin gerçekleştirilme süresi ne olursa olsun aynı sonuca sahip olması gerekir. Zamana bağlı etkinleştirmeler, kullanıcılar için zorunlu gecikmelere neden olur ve hem doğrudan etkileşimin sürükleyici doğasını hem de sistem yanıt verme algısını azaltır.

  Uyarı

  Bunun bir istisnası, öğrenme ve keşfetmeye yardımcı olmak için belirli zamanlanmış etkileşimleri kullanmanızdır (örneğin, basılı tutun).

• Uygun açıklamalar ve görsel ipuçları, gelişmiş etkileşimlerin kullanımı üzerinde harika bir etkiye sahiptir.

Uygulama görünümleri

Uygulama görünümlerinizin kaydırma/kaydırma ve yakınlaştırma ayarları aracılığıyla kullanıcı etkileşim deneyimini değiştirin. Bir uygulama görünümü, bir kullanıcının uygulamanıza ve içeriğine nasıl erişip işleyebileceğinizi belirler. Görünümler, eylemsizlik, içerik sınırında sıçrama ve yakalama noktaları gibi davranışlar da sağlar.

ScrollViewer denetiminin kaydırma ve hareket ayarları, görünümün içeriği görüntü alanına sığmadığında kullanıcıların tek bir görünümde nasıl gezineceğini belirler. Örneğin tek bir görünüm, bir derginin veya kitabın sayfası, bilgisayarın klasör yapısı, belge kitaplığı veya fotoğraf albümü olabilir.

Yakınlaştırma ayarları hem optik yakınlaştırma ( ScrollViewer denetimi tarafından desteklenir) hem de AnlamSal Yakınlaştırma denetimi için geçerlidir. Anlamsal Yakınlaştırma, tek bir görünümde büyük veri veya içerik kümelerini sunmak ve gezinmek için dokunmatik olarak iyileştirilmiş bir tekniktir. İki ayrı sınıflandırma modu veya yakınlaştırma düzeyi kullanarak çalışır. Bu, tek bir ekranda kaydırma ve gezinmeye benzer. Kaydırma ve kaydırarak gezinme, anlamsal yakınlaştırma ile birlikte kullanılabilir.

Kaydırma ve yakınlaştırma davranışlarını değiştirmek için uygulama görünümlerini ve olaylarını kullanın. Bu, işaretçi ve hareket olaylarının işlenmesiyle mümkün olandan daha sorunsuz bir etkileşim deneyimi sağlayabilir.

Uygulama görünümleri hakkında daha fazla bilgi için bkz. Denetimler, düzenler ve metin.

Özel dokunma etkileşimleri

Kendi etkileşim desteğinizi uygularsanız, kullanıcıların uygulamanızdaki kullanıcı arabirimi öğeleriyle doğrudan etkileşim içeren sezgisel bir deneyim beklediğini unutmayın. Öğeleri tutarlı ve bulunabilir tutmak için platform denetim kitaplıklarında özel etkileşimlerinizi modellemenizi öneririz. Bu kitaplıklardaki denetimler standart etkileşimler, animasyonlu fizik efektleri, görsel geri bildirim ve erişilebilirlik dahil olmak üzere tam kullanıcı etkileşimi deneyimi sağlar. Yalnızca net, iyi tanımlanmış bir gereksinim varsa ve temel etkileşimler senaryonuzu desteklemiyorsa özel etkileşimler oluşturun.

Önemli

Windows 11 ve daha yeni

Bazı üç ve dört parmaklı dokunma etkileşimleri artık Windows uygulamalarında varsayılan olarak çalışmaz.

Varsayılan olarak, üç ve dört parmakla dokunma etkileşimleri artık sistem tarafından pencereleri değiştirme veya en aza indirme ve sanal masaüstlerini değiştirme gibi işlemler için kullanılır. Bu etkileşimler artık sistem düzeyinde işlendiği için uygulamanızın işlevselliği bu değişiklikten etkilenebilir.

Bir uygulama içindeki üç veya dört parmaklı etkileşimleri desteklemek için, sistemin bu etkileşimleri işleyip işlemediğini belirten yeni bir kullanıcı ayarı kullanıma sunulmuştur:

Bluetooth & cihazları > Touch > "Üç ve dört parmakla dokunma hareketleri"

"Açık" (varsayılan) olarak ayarlandığında, sistem üç ve dört parmaklı etkileşimlerin tümünü işler (uygulamalar bunları destekleyemez).

"Kapalı" olarak ayarlandığında, üç ve dört parmaklı etkileşimler uygulamalar tarafından desteklenebilir (bunlar sistem tarafından işlenmez).

Uygulamanızın bu etkileşimleri desteklemesi gerekiyorsa, kullanıcıları bu ayar hakkında bilgilendirmenizi ve windows ayarlarını ilgili sayfaya (ms-settings:devices-touch) başlatan bir bağlantı sağlamanızı öneririz. Diğer ayrıntılar için bkz. Windows Ayarlarını Başlatma.

Özelleştirilmiş dokunma desteği sağlamak için çeşitli UIElement olaylarını işleyebilirsiniz. Bu olaylar üç soyutlama düzeyinde gruplandırılır.

• Statik hareket olayları, etkileşim tamamlandıktan sonra tetiklenir. Hareket olayları şunlardır: Dokunuldu, Çift dokunuldu, Sağ tıklandıve Basılı tutma.

  Belirli öğelerdeki hareket olaylarını, IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabledve IsHoldingEnabled'i falseolarak ayarlayarak devre dışı bırakabilirsiniz.

• PointerPressed ve PointerMoved gibi imleç olayları, işaretçi hareketi ve basılı tutma ile bırakma olaylarını ayırt etme yeteneği de dahil olmak üzere, her dokunma teması için alt düzey ayrıntılar sağlar.

  İşaretçi, birleşik olay mekanizmasına sahip genel bir giriş türüdür. Dokunmatik, dokunmatik yüzey, fare veya kalem olabilecek etkin giriş kaynağında ekran konumu gibi temel bilgileri kullanıma sunar.

• ManipulationStarted gibi işleme hareketi olayları, devam eden bir etkileşimi gösterir. Kullanıcı bir öğeye dokunduğunda tetiklenmeye başlar ve kullanıcı parmaklarını kaldırana veya manipülasyon iptal edilene kadar devam eder.

  Düzenleme olayları yakınlaştırma, kaydırma veya döndürme gibi çok dokunmalı etkileşimleri ve sürükleme gibi eylemsizlik ve hız verilerini kullanan etkileşimleri içerir. Düzenleme olayları tarafından sağlanan bilgiler, gerçekleştirilen etkileşimin biçimini tanımlamaz, bunun yerine konum, çeviri deltası ve hız gibi verileri içerir. Gerçekleştirilmesi gereken etkileşim türünü belirlemek için bu dokunma verilerini kullanabilirsiniz.

WinUI tarafından desteklenen temel dokunma hareketleri kümesi aşağıdadır.

İsim	Türü	Description
Dokunma	Statik hareket	Bir parmak ekrana dokunur ve yukarı kaldırır.
Basılı tutun	Statik hareket	Bir parmak ekrana dokunur ve yerinde kalır.
Kaydırak	Manipülasyon hareketi	Bir veya daha fazla parmak ekrana dokunur ve aynı yönde hareket eder.
Swipe	Manipülasyon hareketi	Bir veya daha fazla parmak ekrana dokunur ve aynı yönde kısa bir mesafe hareket eder.
Dönmek	Manipülasyon hareketi	İki veya daha fazla parmak ekrana dokunur ve saat yönünde veya saat yönünün tersine bir yayda hareket eder.
Sıkıştırma	Manipülasyon hareketi	İki veya daha fazla parmak ekrana dokunup birbirine yaklaşın.
Uzatmak	Manipülasyon hareketi	İki veya daha fazla parmağınızla ekrana dokunup birbirinden uzaklaşın.

Hareket olayları

Tek tek denetimlerle ilgili ayrıntılar için bkz. Denetimler listesi.

İmleç olayları

İşaretçi olayları dokunma, dokunmatik yüzey, kalem ve fare gibi çeşitli etkin giriş kaynakları tarafından tetiklenir (bunlar geleneksel fare olaylarının yerini alır.)

İşaretçi olayları tek bir giriş noktasını (parmak, kalem ucu, fare imleci) temel alır ve hız tabanlı etkileşimleri desteklemez.

İşaretçi olayları ve ilgili olay bağımsız değişkenlerinin listesi burada verilmiştir.

Olay veya sınıf	Description
PointerPressed	Tek bir parmak ekrana dokunduğunda gerçekleşir.
PointerReleased	Aynı dokunma teması kaldırıldığında gerçekleşir.
İşaretçi Taşındı	İşaretçi ekranda sürüklendiğinde gerçekleşir.
İşaretçiGirildi	bir işaretçi bir öğenin isabet testi alanına girdiğinde gerçekleşir.
PointerExited	Bir işaretçi bir öğenin çarpma testi alanından çıktığında gerçekleşir.
İşaretçi İptal Edildi	Dokunma teması anormal bir şekilde kaybolduğunda gerçekleşir.
PointerCaptureLost	Bir işaretçi yakalaması başka bir öğe tarafından alındığında meydana gelir.
İşaretçiTekerleğiDeğişti	Bir fare tekerleğinin delta değeri değiştiğinde ve dokunmatik yüzey sıkıştırıldığında gerçekleşir.
PointerRoutedEventArgs	Tüm işaretçi olayları için veri sağlar.

Aşağıdaki örnek, PointerPressed, PointerReleasedve PointerExited olaylarının, bir Rectangle nesnesinde dokunma etkileşimini işlemek için nasıl kullanılacağını göstermektedir.

İlk olarak, adlı bir Genişletilebilir Uygulama İşaretlemeyi Dili'nde (XAML) oluşturulur.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
           Height="100" Width="200" Fill="Blue" />
</Grid>

Ardından PointerPressed, PointerReleasedve PointerExited olayları için dinleyiciler belirtilir.

MainPage::MainPage()
{
    InitializeComponent();

    // Pointer event listeners.
    touchRectangle->PointerPressed += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerPressed);
    touchRectangle->PointerReleased += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerReleased);
    touchRectangle->PointerExited += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerExited);
}

public MainPage()
{
    this.InitializeComponent();

    // Pointer event listeners.
    touchRectangle.PointerPressed += touchRectangle_PointerPressed;
    touchRectangle.PointerReleased += touchRectangle_PointerReleased;
    touchRectangle.PointerExited += touchRectangle_PointerExited;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Pointer event listeners.
    AddHandler touchRectangle.PointerPressed, AddressOf touchRectangle_PointerPressed
    AddHandler touchRectangle.PointerReleased, AddressOf Me.touchRectangle_PointerReleased
    AddHandler touchRectangle.PointerExited, AddressOf touchRectangle_PointerExited

End Sub

Son olarak, PointerPressed olay işleyicisi RectangleHeight ve Width artırır, PointerReleased ve PointerExited olay işleyicileri ise Height ve Width başlangıç değerlerine geri ayarlar.

// Handler for pointer exited event.
void MainPage::touchRectangle_PointerExited(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer released event.
void MainPage::touchRectangle_PointerReleased(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer pressed event.
void MainPage::touchRectangle_PointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Change the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 250;
        rect->Height = 150;
    }
}

// Handler for pointer exited event.
private void touchRectangle_PointerExited(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
// Handler for pointer released event.
private void touchRectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

// Handler for pointer pressed event.
private void touchRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

' Handler for pointer exited event.
Private Sub touchRectangle_PointerExited(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Pointer moved outside Rectangle hit test area.
    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer released event.
Private Sub touchRectangle_PointerReleased(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer pressed event.
Private Sub touchRectangle_PointerPressed(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Change the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 250
        rect.Height = 150
    End If
End Sub

Manipülasyon olayları

Hız verileri gerektiren birden çok parmak etkileşimini veya etkileşimi desteklemeniz gerekiyorsa uygulamanızda işleme olaylarını kullanın.

Sürükleme, yakınlaştırma ve bekletme gibi etkileşimleri algılamak için işleme olaylarını kullanabilirsiniz.

Uyarı

Dokunmatik yüzey, Manipülasyon olaylarını üretmiyor. Bunun yerine, dokunmatik yüzey girişi için işaretçi olayları tetiklenir.

Burada düzenleme olaylarının ve ilgili olay bağımsız değişkenlerinin listesi verilmiştir.

Olay veya sınıf	Description
ManipülasyonBaşlangıç olayı	İşleme işlemcisi ilk oluşturulduğunda gerçekleşir.
ManipulationStarted etkinliği	Bir giriş cihazı UIElementüzerinde bir düzenlemeye başladığında gerçekleşir.
ManipulationDelta olayı	Bir düzenleme sırasında giriş cihazı konumunu değiştirdiğinde gerçekleşir.
ManipülasyonEylemsizlikBaşlatma olayı	UIElement nesnesi ile bir manipülasyon sırasında giriş cihazının temasını kaybetmesi ve ardından eylemsizliğin başlaması durumunda meydana gelir.
ManipülasyonTamamlandı olayı	UIElement üzerinde bir düzenleme ve eylemsizlik tamamlandığında gerçekleşir.
ManipulationStartingRoutedEventArgs	ManipulationStarting olayı için veri sağlar.
ManipulationStartedRoutedEventArgs	ManipulationStarted olayı için veri sağlar.
ManipulationDeltaRoutedEventArgs	ManipulationDelta olayı için veri sağlar.
ManipulationInertiaStartingRoutedEventArgs	ManipulationInertiaStarting olayı için veri sağlar.
ManipulationVelocities	İşlemelerin gerçekleşme hızını açıklar.
ManipulationCompletedRoutedEventArgs (ManipülasyonTamamlandıYönlendirilmişOlayArgümanları)	ManipulationCompleted olayı için veri sağlar.

Bir hareket, bir dizi işleme olayı içerir. Her hareket, kullanıcı ekrana dokunduğunda olduğu gibi ManipulationStarted olayıyla başlar.

Ardından, bir veya daha fazla ManipulationDelta olayı tetiklenir. Örneğin, ekrana dokunup ardından parmağınızı ekranda sürüklerseniz. Son olarak, etkileşim tamamlandığında bir ManipulationCompleted olayı tetiklenir.

Uyarı

Dokunmatik ekran monitörünüz yoksa, bir fare ve fare tekerleği arabirimi kullanarak simülatöründe işleme olay kodunuzu test edebilirsiniz.

Aşağıdaki örnekte, Rectangle üzerindeki slayt etkileşimini işlemek ve ekranda taşımak için ManipulationDelta olaylarının nasıl kullanılacağı gösterilmektedir.

İlk olarak, XAML'de Yükseklik ve 200 touchRectangle ile adlı bir Dikdörtgen oluşturulur.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
               Width="200" Height="200" Fill="Blue" 
               ManipulationMode="All"/>
</Grid>

Ardından, adlı genel bir , dragTranslation'i dönüştürmek için oluşturulur. Rectangleüzerinde bir ManipulationDelta olay dinleyicisi belirtilir ve dragTranslation, Rectangle'nin RenderTransform'una eklenir.

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
Windows::UI::Xaml::Media::TranslateTransform^ dragTranslation;

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
private TranslateTransform dragTranslation;

' Global translation transform used for changing the position of 
' the Rectangle based on input data from the touch contact.
Private dragTranslation As TranslateTransform

MainPage::MainPage()
{
    InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle->ManipulationDelta += 
        ref new ManipulationDeltaEventHandler(
            this, 
            &MainPage::touchRectangle_ManipulationDelta);
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = ref new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle->RenderTransform = dragTranslation;
}

public MainPage()
{
    this.InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle.ManipulationDelta += touchRectangle_ManipulationDelta;
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = this.dragTranslation;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Listener for the ManipulationDelta event.
    AddHandler touchRectangle.ManipulationDelta,
        AddressOf testRectangle_ManipulationDelta
    ' New translation transform populated in 
    ' the ManipulationDelta handler.
    dragTranslation = New TranslateTransform()
    ' Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = dragTranslation

End Sub

Son olarak, ManipulationDelta olay işleyicisinde Rectangle'ın konumu Delta özelliğindeki TranslateTransform kullanılarak güncelleştirilir.

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void MainPage::touchRectangle_ManipulationDelta(Object^ sender,
    ManipulationDeltaRoutedEventArgs^ e)
{
    // Move the rectangle.
    dragTranslation->X += e->Delta.Translation.X;
    dragTranslation->Y += e->Delta.Translation.Y;
    
}

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void touchRectangle_ManipulationDelta(object sender,
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

' Handler for the ManipulationDelta event.
' ManipulationDelta data Is loaded into the
' translation transform And applied to the Rectangle.
Private Sub testRectangle_ManipulationDelta(
    sender As Object,
    e As ManipulationDeltaRoutedEventArgs)

    ' Move the rectangle.
    dragTranslation.X = (dragTranslation.X + e.Delta.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.Delta.Translation.Y)

End Sub

Yönlendirilen olaylar

Burada bahsedilen tüm işaretçi olayları, hareket olayları ve işleme olaylarıyönlendirilmiş olaylar olarak uygulanır. Bu, olayın başlangıçta olayı tetikleyen nesne dışındaki nesneler tarafından işlenebileceği anlamına gelir. UIElement üst kapsayıcıları veya uygulamanızın kök Sayfası gibi bir nesne ağacındaki ardışık üst öğeler, özgün öğe bu olayları işlemese bile bu olayları işlemeyi seçebilir. Buna karşılık, olayı işleyen herhangi bir nesne işlenen olayı işaretleyebilir, böylece artık herhangi bir üst öğeye ulaşmaz. Yönlendirilen olay kavramı ve yönlendirilen olaylar için işleyici yazma şeklinizi nasıl etkilediği hakkında daha fazla bilgi için bkz . Olaylara ve yönlendirilen olaylara genel bakış.

Önemli

Kaydırılabilir bir görünümde (ScrollViewer veya ListView gibi) uiElement için işaretçi olaylarını işlemeniz gerekiyorsa , UIElement.CancelDirectmanipulation() çağrısı yaparak görünümdeki öğe üzerinde işleme olayları desteğini açıkça devre dışı bırakmanız gerekir. Görünümde işleme olaylarını yeniden etkinleştirmek için UIElement.TryStartDirectManipulation() öğesini çağırın.

Yapılması ve yapılmaması gerekenler

• Dokunmatik etkileşimli uygulamaları birincil beklenen giriş yöntemi olarak tasarlar.
• Tüm türlerin etkileşimleri (dokunma, kalem, ekran kalemi, fare vb.) için görsel geri bildirim sağlayın
• Dokunmatik hedef boyutunu, temas geometrisini, temizlemeyi ve sallanmayı ayarlayarak hedeflemeyi iyileştirin.
• Tutturma noktalarını ve yönlendirme "rayları" kullanarak doğruluğu optimize edin.
• Sıkı paketlenmiş kullanıcı arabirimi öğeleri için dokunma doğruluğunu geliştirmeye yardımcı olacak araç ipuçları ve tutamaçlar sağlayın.
• Zamanlanmış etkileşimleri mümkün olduğunca kullanmayın (uygun kullanım örneği: dokunma ve tutma).
• Mümkün olduğunda manipülasyonu ayırt etmek için kullanılan parmak sayısını kullanmayın.

İlgili makaleler

• İşaretçi girişini işleme
• Giriş cihazlarını tanımlama

Samples

• Basic giriş örneği
• Düşük gecikmeli giriş örneği
• Kullanıcı etkileşim modu örneği
• Focus görselleri örneği

Arşiv Örnekleri

• Input: Cihaz özellikleri örneği
• Input: XAML kullanıcı giriş olayları örneği
• XAML kaydırma, kaydırma ve yakınlaştırma örneği
• Input: GestureRecognizer ile hareketler ve işlemler