İzlenecek yol: İlk Dokunmatik Uygulamanızı Oluşturma
WPF, uygulamaların dokunmatik 'e yanıt vermesini sağlar. Örneğin, dokunmatik ekran gibi dokunmaya duyarlı bir cihazda bir veya daha fazla parmakla kullanarak bir uygulamayla etkileşime geçebilirsiniz. Bu izlenecek yol, kullanıcının Touch kullanarak tek bir nesneyi taşımasına, yeniden boyutlandırmasına veya döndürmesine olanak sağlayan bir uygulama oluşturur.
Önkoşullar
Bu izlenecek yolu tamamlamak için aşağıdaki bileşenlere ihtiyacınız vardır:
Visual Studio.
Windows touch destekleyen bir dokunmatik ekran gibi dokunma girişi kabul eden bir cihaz.
Ayrıca, WPF 'de uygulama oluşturma hakkında temel bir bilgiye sahip olmanız gerekir, özellikle de bir olaya abone olma ve bu olay işleme. Daha fazla bilgi için bkz. Izlenecek yol: Ilk WPF MasaüstüUygulamam.
Uygulama oluşturma
Uygulamayı oluşturmak için
Visual Basic veya Visual C# ' de adlı yeni bir WPF uygulama projesi oluşturun
BasicManipulation. Daha fazla bilgi için bkz. Izlenecek yol: Ilk WPF MasaüstüUygulamam.MainWindow. XAML içeriğini aşağıdaki XAML ile değiştirin.
Bu biçimlendirme, üzerinde kırmızı içeren basit bir uygulama oluşturur RectangleCanvas . IsManipulationEnabledÖzelliği, Rectangle işleme olaylarını alacak şekilde true olarak ayarlanır. Uygulama ManipulationStarting , ManipulationDelta , ve olaylarına abone olur ManipulationInertiaStarting . Bu olaylar, Rectangle Kullanıcı tarafından ne zaman hareket eden ' i taşıyacağınız mantığı içerir.
<Window x:Class="BasicManipulation.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Move, Size, and Rotate the Square" WindowState="Maximized" ManipulationStarting="Window_ManipulationStarting" ManipulationDelta="Window_ManipulationDelta" ManipulationInertiaStarting="Window_InertiaStarting"> <Window.Resources> <!--The movement, rotation, and size of the Rectangle is specified by its RenderTransform.--> <MatrixTransform x:Key="InitialMatrixTransform"> <MatrixTransform.Matrix> <Matrix OffsetX="200" OffsetY="200"/> </MatrixTransform.Matrix> </MatrixTransform> </Window.Resources> <Canvas> <Rectangle Fill="Red" Name="manRect" Width="200" Height="200" RenderTransform="{StaticResource InitialMatrixTransform}" IsManipulationEnabled="true" /> </Canvas> </Window>Visual Basic kullanıyorsanız, MainWindow. xaml ' in ilk satırında
x:Class="BasicManipulation.MainWindow"ile değiştirinx:Class="MainWindow".MainWindowSınıfında, aşağıdaki ManipulationStarting olay işleyicisini ekleyin.ManipulationStartingBu olay, WPF dokunma girişinin bir nesneyi düzenlemeye başladığını algıladığında meydana gelir. Kod, düzenleme konumunun özelliği ayarlanarak göreli olması gerektiğini belirtir WindowManipulationContainer .
void Window_ManipulationStarting(object sender, ManipulationStartingEventArgs e) { e.ManipulationContainer = this; e.Handled = true; }Private Sub Window_ManipulationStarting(ByVal sender As Object, ByVal e As ManipulationStartingEventArgs) e.ManipulationContainer = Me e.Handled = True End SubMainWindowSınıfında, aşağıdaki ManipulationDelta olay işleyicisini ekleyin.ManipulationDeltaDokunma girişi konum değiştirdiğinde olay oluşur ve bir düzenleme sırasında birden çok kez gerçekleşebilir. Bir Finger oluşturulduktan sonra olay da oluşabilir. Örneğin, Kullanıcı ekranda bir parmak sürüklediğinde ManipulationDelta parmak taşıdıkça olay birden çok kez meydana gelir. Kullanıcı ekrandan bir Finger harekete geçirirse, ManipulationDelta olay, eylemsizlik benzetimini yapar.
Kod, DeltaManipulationRenderTransformRectangle Kullanıcı Touch girişini taşıdıkça taşımak için öğesine uygular. Ayrıca, Rectangle bir Window eylemsizlik sırasında olay gerçekleştiğinde öğesinin sınırlarının dışında olup olmadığını denetler. Öyleyse, uygulama ManipulationDeltaEventArgs.Complete düzenlemeyi sonlandırmak için yöntemini çağırır.
void Window_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) { // Get the Rectangle and its RenderTransform matrix. Rectangle rectToMove = e.OriginalSource as Rectangle; Matrix rectsMatrix = ((MatrixTransform)rectToMove.RenderTransform).Matrix; // Rotate the Rectangle. rectsMatrix.RotateAt(e.DeltaManipulation.Rotation, e.ManipulationOrigin.X, e.ManipulationOrigin.Y); // Resize the Rectangle. Keep it square // so use only the X value of Scale. rectsMatrix.ScaleAt(e.DeltaManipulation.Scale.X, e.DeltaManipulation.Scale.X, e.ManipulationOrigin.X, e.ManipulationOrigin.Y); // Move the Rectangle. rectsMatrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y); // Apply the changes to the Rectangle. rectToMove.RenderTransform = new MatrixTransform(rectsMatrix); Rect containingRect = new Rect(((FrameworkElement)e.ManipulationContainer).RenderSize); Rect shapeBounds = rectToMove.RenderTransform.TransformBounds( new Rect(rectToMove.RenderSize)); // Check if the rectangle is completely in the window. // If it is not and intertia is occuring, stop the manipulation. if (e.IsInertial && !containingRect.Contains(shapeBounds)) { e.Complete(); } e.Handled = true; }Private Sub Window_ManipulationDelta(ByVal sender As Object, ByVal e As ManipulationDeltaEventArgs) ' Get the Rectangle and its RenderTransform matrix. Dim rectToMove As Rectangle = e.OriginalSource Dim rectTransform As MatrixTransform = rectToMove.RenderTransform Dim rectsMatrix As Matrix = rectTransform.Matrix ' Rotate the shape rectsMatrix.RotateAt(e.DeltaManipulation.Rotation, e.ManipulationOrigin.X, e.ManipulationOrigin.Y) ' Resize the Rectangle. Keep it square ' so use only the X value of Scale. rectsMatrix.ScaleAt(e.DeltaManipulation.Scale.X, e.DeltaManipulation.Scale.X, e.ManipulationOrigin.X, e.ManipulationOrigin.Y) 'move the center rectsMatrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y) ' Apply the changes to the Rectangle. rectTransform = New MatrixTransform(rectsMatrix) rectToMove.RenderTransform = rectTransform Dim container As FrameworkElement = e.ManipulationContainer Dim containingRect As New Rect(container.RenderSize) Dim shapeBounds As Rect = rectTransform.TransformBounds( New Rect(rectToMove.RenderSize)) ' Check if the rectangle is completely in the window. ' If it is not and intertia is occuring, stop the manipulation. If e.IsInertial AndAlso Not containingRect.Contains(shapeBounds) Then e.Complete() End If e.Handled = True End SubMainWindowSınıfında, aşağıdaki ManipulationInertiaStarting olay işleyicisini ekleyin.ManipulationInertiaStartingKullanıcı ekrandan tüm parmakları harekete geçirirse olay oluşur. Kod, dikdörtgenin taşınması, genişletilmesi ve dönüşü için başlangıç hızını ve yavaşlatmayı ayarlar.
void Window_InertiaStarting(object sender, ManipulationInertiaStartingEventArgs e) { // Decrease the velocity of the Rectangle's movement by // 10 inches per second every second. // (10 inches * 96 pixels per inch / 1000ms^2) e.TranslationBehavior.DesiredDeceleration = 10.0 * 96.0 / (1000.0 * 1000.0); // Decrease the velocity of the Rectangle's resizing by // 0.1 inches per second every second. // (0.1 inches * 96 pixels per inch / (1000ms^2) e.ExpansionBehavior.DesiredDeceleration = 0.1 * 96 / (1000.0 * 1000.0); // Decrease the velocity of the Rectangle's rotation rate by // 2 rotations per second every second. // (2 * 360 degrees / (1000ms^2) e.RotationBehavior.DesiredDeceleration = 720 / (1000.0 * 1000.0); e.Handled = true; }Private Sub Window_InertiaStarting(ByVal sender As Object, ByVal e As ManipulationInertiaStartingEventArgs) ' Decrease the velocity of the Rectangle's movement by ' 10 inches per second every second. ' (10 inches * 96 pixels per inch / 1000ms^2) e.TranslationBehavior.DesiredDeceleration = 10.0 * 96.0 / (1000.0 * 1000.0) ' Decrease the velocity of the Rectangle's resizing by ' 0.1 inches per second every second. ' (0.1 inches * 96 pixels per inch / (1000ms^2) e.ExpansionBehavior.DesiredDeceleration = 0.1 * 96 / (1000.0 * 1000.0) ' Decrease the velocity of the Rectangle's rotation rate by ' 2 rotations per second every second. ' (2 * 360 degrees / (1000ms^2) e.RotationBehavior.DesiredDeceleration = 720 / (1000.0 * 1000.0) e.Handled = True End SubProjeyi derleyin ve çalıştırın.
Pencerede kırmızı bir kare görürsünüz.
Uygulamayı Test Etme
Uygulamayı test etmek için aşağıdaki düzenlemeleri deneyin. Aşağıdakilerden birkaçını aynı anda gerçekleştirebileceğinizi unutmayın.
Taşımak için, Rectangle üzerine bir parmak koyun Rectangle ve parmak izi ekranda taşıyın.
Yeniden boyutlandırmak için, Rectangle üzerine iki parmak koyun Rectangle ve parmaklarınızı birbirine yaklaştırın ve birbirinden uzaklaştırın.
' I döndürmek için, Rectangle üzerine iki parmak koyun Rectangle ve parmakları birbirlerinin etrafında döndürün.
Durgunluya neden olmak için, önceki düzenlemeleri gerçekleştirirken parmaklarınızı ekrandan hızlıca yükseltin. , Rectangle Durdurulmadan önce birkaç saniye sonra taşımaya, yeniden boyutlandırmaya veya döndürmeye devam edecektir.