Silverlight - การจัดการอินพุต

ในบทนี้เราจะเรียนรู้วิธีจัดการการป้อนข้อมูลของผู้ใช้ในแอปพลิเคชัน Silverlight Silverlight มอบ API ที่มีประสิทธิภาพพร้อมความช่วยเหลือซึ่งแอปพลิเคชันสามารถรับอินพุตจากอุปกรณ์ต่างๆเช่นเมาส์แป้นพิมพ์และการสัมผัสเป็นต้น

ประเภทอินพุต

มีหลายวิธีที่ผู้ใช้สามารถโต้ตอบกับแอปพลิเคชันของคุณ วิธีที่ชัดเจนที่สุดคือใช้เมาส์ Silverlight นำเสนอกิจกรรมสำหรับการติดตาม -

  • การเคลื่อนไหวของเมาส์
  • คลิกปุ่มและ
  • กิจกรรมวงล้อ

นอกจากนี้ยังมีคีย์บอร์ดและ Silverlight ยังรองรับการป้อนข้อมูลบนหน้าจอสัมผัส หากคุณคุ้นเคยกับการรองรับระบบสัมผัสใน Windows คุณจะทราบดีว่าการป้อนข้อมูลแบบสัมผัสสามารถแสดงเป็นเหตุการณ์ระดับต่ำที่ให้ข้อมูลโดยละเอียดหรืออาจสรุปเป็นเหตุการณ์ระดับสูงที่เรียกว่าท่าทางสัมผัส

เหตุการณ์เมาส์

ให้เราเริ่มต้นโดยดูที่ข้อเสนอ Silverlight เหตุการณ์การป้อนข้อมูลเมาส์ เหตุการณ์บางอย่างเกี่ยวข้องกับการเคลื่อนไหวของตัวชี้เมาส์

  • MouseMove เหตุการณ์จะเพิ่มขึ้นทุกครั้งที่ตัวชี้เคลื่อนที่ในขณะที่อยู่เหนือองค์ประกอบที่คุณแนบตัวจัดการ

  • คุณยังได้รับ MouseEnter และ MouseLeave เหตุการณ์ที่จะแจ้งให้คุณทราบเมื่อเมาส์เลื่อนเข้าและออกจากองค์ประกอบ

ด้านล่างคือรหัส XAML ที่เพิ่มวงรีและ TextBlock

<UserControl x:Class="MouseInput.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">  
   
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <TextBlock x:Name = "mouseText" FontSize = "40" 
         VerticalAlignment = "Top" Height = "76" Margin = "0,10,0,0" />
			 
      <Ellipse
         Name = "myEllipse"  
         Width = "320" Height = "150" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "27,103,0,0" 
         Stroke = "Black" StrokeThickness = "10" Fill = "#00FF0000" 
         MouseEnter = "myEllipse_MouseEnter" 
         MouseLeave = "myEllipse_MouseLeave" 
         MouseMove = "myEllipse_MouseMove" /> 
			
   </Grid> 
	
</UserControl>

ด้านล่างคือการใช้งานที่แตกต่างกัน mouse input เหตุการณ์

using System.Windows.Controls; 
using System.Windows.Input; 
using System.Windows.Media; 
 
namespace MouseInput { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
     
      private void myEllipse_MouseEnter(object sender, MouseEventArgs e) { 
         mouseText.Text = "Mouse Enter"; 
         myEllipse.Stroke = new SolidColorBrush(Colors.Blue); 
      }  
      
      private void myEllipse_MouseLeave(object sender, MouseEventArgs e) { 
         mouseText.Text = "Mouse Leave"; 
         myEllipse.Stroke = new SolidColorBrush(Colors.Black);  
      }  
      
      private void myEllipse_MouseMove(object sender, MouseEventArgs e) { 
         mouseText.Text = "Mouse Move: " + e.GetPosition(myEllipse);  
      }  
   } 
}

เมื่อโค้ดด้านบนถูกคอมไพล์และดำเนินการคุณจะเห็นผลลัพธ์ต่อไปนี้

เมื่อเมาส์เข้าสู่วงรีคุณจะเห็นการเปลี่ยนแปลงของสีและพิกัด

เมื่อเมาส์ออกจากวงรีมันจะแสดงข้อความ 'mouse leave'และจะเปลี่ยนเป็นสีเริ่มต้น

คีย์บอร์ด

วิธีที่ง่ายที่สุดสำหรับผู้ใช้ในการป้อนข้อมูลที่เป็นข้อความลงในแอปพลิเคชันของคุณคือผ่านแป้นพิมพ์หากมี โปรดจำไว้ว่าอุปกรณ์พกพาบางรุ่นไม่มีแป้นพิมพ์ยกเว้นแล็ปท็อปและเดสก์ท็อป

  • Silverlight นำเสนอสองเหตุการณ์ที่ตรงไปตรงมาสำหรับการป้อนข้อมูลด้วยแป้นพิมพ์ KeyUp และ KeyDown.

  • ทั้งสองอย่างนี้ผ่าน a KeyEventArgs ไปยังตัวจัดการและคุณสมบัติคีย์ระบุว่าคีย์ใดถูกกด

  • ในตัวอย่างด้านล่างบางส่วนของการป้อนข้อมูลแป้นพิมพ์ได้รับการจัดการ

  • ตัวอย่างต่อไปนี้กำหนดตัวจัดการสำหรับเหตุการณ์คลิกและตัวจัดการสำหรับ KeyDown เหตุการณ์.

ด้านล่างคือรหัส XAML ซึ่งมีการเพิ่มองค์ประกอบ UI ที่แตกต่างกัน

<UserControl x:Class = "KeyboardInput.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
	
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <StackPanel Orientation = "Horizontal" KeyDown = "OnTextInputKeyDown"> 
         <TextBox Width = "400" Height = "30" Margin = "10"/> 
			
         <Button Click = "OnTextInputButtonClick" 
            Content = "Open" Margin = "10" Width = "50" Height = "30"/> 
				
      </StackPanel>
		
   </Grid> 
	
</UserControl>

ด้านล่างนี้คือรหัส C # ซึ่งมีการจัดการกับแป้นพิมพ์และเหตุการณ์การคลิกที่แตกต่างกัน

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Input;
  
namespace KeyboardInput {

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
		
      private void OnTextInputKeyDown(object sender, KeyEventArgs e) { 
         if (e.Key == Key.O) { 
            handle(); 
            e.Handled = true; 
         } 
      } 
		
      private void OnTextInputButtonClick(object sender, RoutedEventArgs e) { 
         handle(); 
         //e.Handled = true; 
      } 
		
      public void handle() { 
         MessageBox.Show("Do you want to open a file?"); 
      }  
   } 
}

เมื่อรวบรวมและดำเนินการโค้ดด้านบนคุณจะเห็นสิ่งต่อไปนี้ -

หากคุณคลิกไฟล์ Open หรือคลิกในกล่องข้อความแล้วคลิก OKจากนั้นจะแสดงข้อความเดียวกัน

เราขอแนะนำให้คุณดำเนินการตามตัวอย่างข้างต้นเพื่อความเข้าใจที่ดีขึ้น