Silverlight-GridSplitter

制約は、含まれているブラウザ、またはデザインの固定寸法から発生します。ただし、ユーザーに制約を課すと便利な場合があります。ユーザーインターフェイスでは、スプリッターを提供することにより、ユーザーインターフェイスの一部の高さまたは幅をユーザーが決定できるようにするのが一般的です。

Silverlightは、まさにそれを行う GridSplitter コントロールを提供します。これはグリッドと連動して機能します。
サイズを変更したい行または列のセルに追加し、関連する端に揃えます。
垂直スプリッターか水平スプリッターかを指示するだけで、残りは自動的に行われます。

以下に、 Gridsplitter クラスで一般的に使用される properties を示します。

以下に、Gridsplitterの最も一般的に使用されるプロパティを示します。

Sr. No.	Name & Description
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の最も一般的に使用されるメソッドを示します。

Sr. No.	Method & Description
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* クラスの一般的に使用される *events* を以下に示します。

以下は、GridSplitterの最も一般的に使用されるイベントです。

Sr. No.	Event & Description
1	DragCompleted Thumbコントロールがマウスキャプチャを失ったときに発生します。（Thumbから継承されます。）
2	DragDelta Thumbコントロールに論理フォーカスとマウスキャプチャがあるときにマウスの位置が変わると、1回以上発生します。（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から継承されます。）

例

*Grid Splitter* が追加された簡単な例を見てみましょう。

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

グリッドスプリッターの両側に2つのボタンも追加されます。上記のコードをコンパイルして実行すると、次の出力が表示されます。

グリッドスプリッター

グリッドスプリッターを移動すると、右側のボタンもグリッドスプリッターとともに移動していることがわかります。

グリッドスプリッターの移動

Silverlight-gridsplitter

Silverlight-GridSplitter

例