Silverlight - 網格分隔線

約束可以來自包含的瀏覽器，也可以來自設計中的固定尺寸。但是，有時讓使用者施加約束也很有用。使用者介面通常允許使用者透過提供分隔線來決定該使用者介面某些部分的高度或寬度。

Silverlight 提供了 **GridSplitter** 控制元件來實現這一點。它與 Grid 控制元件一起使用。
您只需將其新增到要使其可調整大小的行或列的單元格中，並將其對齊到相關的邊緣。
您只需說明它是垂直分隔線還是水平分隔線，然後它就會為您完成其餘工作。

下面列出了 **Gridsplitter** 類的常用 **屬性**。

下面列出了 Gridsplitter 最常用的屬性。

序號	名稱和描述
1	AllowDrop 獲取或設定一個值，該值指示此元素是否可用作拖放操作的目標。這是一個依賴項屬性。（繼承自 UIElement。）
2	Background 獲取或設定一個畫刷，該畫刷描述控制元件的背景。（繼承自 Control。）
3	Cursor 獲取或設定滑鼠指標懸停在此元素上時顯示的游標。（繼承自 FrameworkElement。）
4	Foreground 獲取或設定一個畫刷，該畫刷描述前景色。（繼承自 Control。）
5	Height 獲取或設定元素的建議高度。（繼承自 FrameworkElement。）
6	HorizontalAlignment 獲取或設定當此元素在父元素（如面板或項控制元件）中組合時應用於此元素的水平對齊特徵。（繼承自 FrameworkElement。）
7	IsMouseOver 獲取一個值，該值指示滑鼠指標是否位於此元素（包括可視樹中子元素）之上。這是一個依賴項屬性。（繼承自 UIElement。）
8	Margin 獲取或設定元素的外邊距。（繼承自 FrameworkElement。）
9	Name 獲取或設定元素的標識名稱。名稱提供了一個引用，以便程式碼隱藏（例如事件處理程式程式碼）在 XAML 處理器在處理過程中構造標記元素後引用它。（繼承自 FrameworkElement。）
10	Resources 獲取或設定本地定義的資源字典。（繼承自 FrameworkElement。）
11	Style 獲取或設定此元素在呈現時使用的樣式。（繼承自 FrameworkElement。）
12	VerticalAlignment 獲取或設定當此元素在父元素（如面板或項控制元件）中組合時應用於此元素的垂直對齊特徵。（繼承自 FrameworkElement。）
13	Width 獲取或設定元素的寬度。（繼承自 FrameworkElement。）

以下是 **GridSplitter** 類的常用方法。

下面列出了 GridSpliter 最常用的方法。

序號	方法和描述
1	OnDragEnter(DragEventArgs) 當未處理的 DragDrop.DragEnter 附加事件到達其路由中派生自此類的元素時呼叫。實現此方法以為此事件新增類處理。（繼承自 UIElement。）
2	OnDraggingChanged(DependencyPropertyChangedEventArgs) 響應 IsDragging 屬性值的更改。（繼承自 Thumb。）
3	OnDragLeave(DragEventArgs) 當未處理的 DragDrop.DragLeave 附加事件到達其路由中派生自此類的元素時呼叫。實現此方法以為此事件新增類處理。（繼承自 UIElement。）
4	OnDragOver(DragEventArgs) 當未處理的 DragDrop.DragOver 附加事件到達其路由中派生自此類的元素時呼叫。實現此方法以為此事件新增類處理。（繼承自 UIElement。）
5	OnDrop(DragEventArgs) 當未處理的 DragDrop.DragEnter 附加事件到達其路由中派生自此類的元素時呼叫。實現此方法以為此事件新增類處理。（繼承自 UIElement。）

下面列出了 **GridSplitter** 類的常用 **事件**。

下面列出了 GridSplitter 最常用的事件。

序號	事件和描述
1	DragCompleted 當 Thumb 控制元件失去滑鼠捕獲時發生。（繼承自 Thumb。）
2	DragDelta 當 Thumb 控制元件具有邏輯焦點和滑鼠捕獲時，滑鼠位置發生變化時發生一次或多次。（繼承自 Thumb。）
3	DragEnter 當輸入系統報告以該元素作為拖放目標的基礎拖放事件時發生。（繼承自 UIElement。）
4	DragLeave 當輸入系統報告以該元素作為拖放源的基礎拖放事件時發生。（繼承自 UIElement。）
5	DragOver 當輸入系統報告以該元素作為潛在放置目標的基礎拖放事件時發生。（繼承自 UIElement。）
6	DragStarted 當 Thumb 控制元件接收邏輯焦點和滑鼠捕獲時發生。（繼承自 Thumb。）
7	Drop 當輸入系統報告以該元素作為放置目標的基礎放置事件時發生。（繼承自 UIElement。）
8	FocusableChanged 當 Focusable 屬性的值發生變化時發生。（繼承自 UIElement。）
9	KeyDown 當此元素處於焦點時按下鍵時發生。（繼承自 UIElement。）
10	KeyUp 當此元素處於焦點時釋放鍵時發生。（繼承自 UIElement。）

示例

讓我們看一個新增 **網格分隔線** 的簡單示例。

<UserControl x:Class = "GridSpliter.MainPage" 
   xmlns:sdk = "http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Width = "400" Height = "300">
   
   <Grid x:Name = "LayoutRoot"  Width = "400" Height = "300" Background = "AliceBlue"> 
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "200" />
         <RowDefinition Height = "200" /> 
      </Grid.RowDefinitions> 
		
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "150" /> 
         <ColumnDefinition Width = "150" /> 
      </Grid.ColumnDefinitions> 
		
      <sdk:GridSplitter x:Name = "gridSplitter" Grid.Column = "1" 
         HorizontalAlignment = "Left" Height = "300" VerticalAlignment = "Top" 
         Width = "5" Grid.RowSpan = "2" Background = "Black"/> 
			
      <Button x:Name = "button" Content = "Button" Grid.Column = "1" 
         HorizontalAlignment = "Left" Height = "40" Margin = "5,42,0,0" 
         VerticalAlignment = "Top" Width = "109"/> 
			
      <Button x:Name = "button1" Content = "Button" HorizontalAlignment = "Left"  
         Height = "40" Margin = "37,93,0,0" VerticalAlignment = "Top" Width = "113"/> 
			
   </Grid> 
	
</UserControl>

還在網格分隔線的兩側添加了兩個按鈕。編譯並執行上述程式碼後，您將看到以下輸出。

您可以移動網格分隔線，您會看到右側的按鈕也隨網格分隔線一起移動。

silverlight_constrained_vs_unconstrained.htm

列印頁面