Silverlight - 輸入處理

在本章中，我們將學習如何在 Silverlight 應用程式中處理使用者輸入。Silverlight 提供了一個強大的 API，應用程式可以透過它獲取來自各種裝置（如滑鼠、鍵盤和觸控式螢幕等）的輸入。

輸入型別

使用者可以透過多種方式與您的應用程式互動。最明顯的方式是使用滑鼠。Silverlight 提供了用於跟蹤以下內容的事件：

滑鼠移動
按鈕點選，以及
滾輪活動

當然還有鍵盤，Silverlight 還支援觸控式螢幕輸入。如果您熟悉 Windows 中的觸控支援，您就會知道觸控輸入可以表示為提供詳細資訊的低階事件，或者可以總結為稱為手勢的高階事件。

滑鼠事件

讓我們從瞭解 Silverlight 提供的滑鼠輸入事件開始。一些事件與滑鼠指標的移動有關。

MouseMove 事件在指標在您已附加處理程式的元素上移動時隨時觸發。
您還可以獲得 MouseEnter 和 MouseLeave 事件，以通知您滑鼠何時移入和移出元素。

下面是新增橢圓和文字塊的 XAML 程式碼。

<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>

下面是不同滑鼠輸入事件的實現。

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);  
      }  
   } 
}

編譯並執行上述程式碼後，您將看到以下輸出。

當滑鼠進入橢圓時，您將看到顏色和座標的變化。

當滑鼠離開橢圓時，它將顯示訊息“滑鼠離開”並將更改為預設顏色。

鍵盤

使用者輸入文字資料到應用程式中最簡單的方式是透過鍵盤（如果可用）。請記住，並非所有移動裝置都配備鍵盤，除了筆記型電腦和桌上型電腦。

Silverlight 為鍵盤輸入提供了兩個簡單的事件，KeyUp 和 KeyDown。
這兩個事件都將 KeyEventArgs 傳遞給處理程式，而 Key 屬性指示按下了哪個鍵。
在下面的示例中，處理了一些鍵盤輸入。
以下示例定義了 Click 事件的處理程式和 KeyDown 事件的處理程式。

下面是新增不同 UI 元素的 XAML 程式碼。

<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?"); 
      }  
   } 
}

編譯並執行上述程式碼後，您將看到以下內容：

如果單擊“開啟”按鈕或在文字框中單擊並單擊“確定”，則它將顯示相同的訊息。

我們建議您執行上述示例以更好地理解。

列印頁面