パネル

Panel 要素は、要素のレンダリング (サイズと寸法、位置、子コンテンツの配置) を制御するコンポーネントです。 Windows Presentation Foundation (WPF) には、定義済みの Panel 要素の数と、カスタムの Panel 要素を構築する機能が用意されています。

スタイルとテンプレート

Panel は、既定のテンプレートや視覚的な外観を定義しない抽象基本クラスです。 派生パネル クラスは、独自のスタイル設定とテンプレート動作を実装します。

コンテンツ プロパティ

このコントロールは、 Children プロパティをコンテンツ プロパティとして使用します。

部品

このコントロールでは、テンプレート パーツは定義されません。

ビジュアル状態

このコントロールでは、視覚的な状態は定義されません。

Panel クラス

Panel は、Windows Presentation Foundation (WPF) でレイアウトサポートを提供するすべての要素の基本クラスです。 派生Panel 要素は、拡張アプリケーション マークアップ言語 (XAML) とコード内で要素を配置および整理するために使用されます。

WPF には、多くの複雑なレイアウトを可能にする派生パネル実装の包括的なスイートが含まれています。 これらの派生クラスは、ほとんどの標準的なユーザー インターフェイス (UI) シナリオを可能にするプロパティとメソッドを公開します。 ニーズを満たす子配置動作が見つからない開発者は、 ArrangeOverride メソッドと MeasureOverride メソッドをオーバーライドすることで、新しいレイアウトを作成できます。

パネル共通メンバー

すべてのPanel要素は、FrameworkElement、Height、Width、HorizontalAlignment、VerticalAlignment、Marginなど、LayoutTransformによって定義される基本サイズ設定と配置プロパティをサポートします。 FrameworkElementによって定義された配置プロパティの詳細については、「配置、余白、およびパディングの概要」を参照してください。

Panel では、レイアウトの理解と使用において重要な追加のプロパティが公開されます。 Background プロパティは、派生パネル要素の境界間の領域をBrushで塗りつぶすために使用されます。 Children は、 Panel が構成される要素の子コレクションを表します。 InternalChildren は、 Children コレクションの内容と、データ バインディングによって生成されたメンバーを表します。 どちらも、親UIElementCollection内でホストされている子要素のPanelで構成されます。

パネルには、派生Panel.ZIndexで階層化順序を実現するために使用できるPanel添付プロパティも公開されます。 Children値が大きいパネルのPanel.ZIndex コレクションのメンバーは、Panel.ZIndex値が小さいもの前に表示されます。 これは、子が同じ座標空間を共有できるようにする Canvas や Grid などのパネルに特に便利です。

Panelまた、OnRenderの既定の表示動作をオーバーライドするために使用できるPanel メソッドも定義します。

添付プロパティ

派生パネル要素は、添付プロパティを広範に使用します。 添付プロパティは、従来の共通言語ランタイム (CLR) プロパティ "ラッパー" を持たない特殊な形式の依存関係プロパティです。 添付プロパティには、拡張アプリケーション マークアップ言語 (XAML) の特殊な構文があります。これは、次のいくつかの例で確認できます。

添付プロパティの 1 つの目的は、子要素が親要素によって実際に定義されているプロパティの一意の値を格納できるようにすることです。 この機能のアプリケーションでは、子要素がユーザー インターフェイス (UI) でどのように表示されるかを親に通知します。これは、アプリケーション レイアウトに非常に役立ちます。 詳細については、「 添付プロパティの概要」を参照してください。

派生パネル要素

多くのオブジェクトは Panelから派生していますが、それらのすべてがルート レイアウト プロバイダーとして使用されるわけではありません。 アプリケーション UI を作成するために特別に設計された 6 つの定義済みパネル クラス (Canvas、 DockPanel、 Grid、 StackPanel、 VirtualizingStackPanel、および WrapPanel) があります。

各パネル要素は、次の表に示すように、独自の特別な機能をカプセル化します。

ユーザー インターフェイス パネル

UI シナリオをサポートするために最適化された WPF には、 Canvas、 DockPanel、 Grid、 StackPanel、 VirtualizingStackPanel、 WrapPanelの 6 つのパネル クラスがあります。 これらのパネル要素は、使いやすく、汎用性が高く、ほとんどのアプリケーションで十分に拡張可能です。

派生した各 Panel 要素は、サイズ変更の制約を異なる方法で処理します。 Panelが水平方向または垂直方向の制約を処理する方法を理解すると、レイアウトをより予測しやすくなります。

これらの各要素の詳細な説明と使用例を以下に示します。

キャンバス

Canvas要素を使用すると、絶対 x 座標と y 座標に従ってコンテンツを配置できます。 要素は一意の場所に描画できます。または、要素が同じ座標を占める場合、要素がマークアップに表示される順序によって、要素が描画される順序が決まります。

Canvas は、任意の Panelの最も柔軟なレイアウトサポートを提供します。 Height プロパティと Width プロパティはキャンバスの領域を定義するために使用され、内部の要素には親 Canvasの領域を基準とした絶対座標が割り当てられます。 Canvas.Left、Canvas.Top、Canvas.Right、Canvas.Bottomの 4 つの添付プロパティを使用すると、Canvas内でのオブジェクトの配置を細かく制御できるため、開発者は画面上に要素を正確に配置および配置できます。

キャンバス内の ClipToBounds

Canvas では、独自に定義された Height および Widthの外部にある座標でも、画面上の任意の位置に子要素を配置できます。 さらに、 Canvas は子のサイズの影響を受けません。 その結果、子要素は、親Canvasの境界矩形の外側にある他の要素を重ね描きできます。 Canvasの既定の動作では、親Canvasの境界外に子を描画できます。 この動作が望ましくない場合は、 ClipToBounds プロパティを true に設定できます。 これにより、 Canvas が独自のサイズにクリップされます。 Canvas は、子を境界外に描画できる唯一のレイアウト要素です。

この動作は、 幅プロパティの比較サンプルにグラフィカルに示されています。

DockPanel

DockPanel要素は、子コンテンツ要素で設定されたDockPanel.Dock添付プロパティを使用して、コンテナーの端に沿ってコンテンツを配置します。 DockPanel.DockがTopまたはBottomに設定されている場合、子要素は相互に上下に配置されます。 DockPanel.DockがLeftまたはRightに設定されている場合、子要素は互いに左または右に配置されます。 LastChildFillプロパティは、DockPanelの子として追加された最終的な要素の位置を決定します。

DockPanelを使用して、一連のボタンなど、関連するコントロールのグループを配置できます。 または、これを使用して、Microsoft Outlook に見られるものと同様の「ペイン」付きの UI を作成することができます。

コンテンツに合わせてサイズ変更

HeightプロパティとWidthプロパティが指定されていない場合、DockPanelはそのコンテンツにサイズを合わせます。 サイズは、その子要素のサイズに合わせて増減できます。 ただし、これらのプロパティが指定され、次に指定された子要素の余地がなくなった場合、 DockPanel はその子要素またはその後の子要素を表示せず、後続の子要素は測定しません。

LastChildFill

既定では、 DockPanel 要素の最後の子は、残りの未割り当て領域を "塗りつぶす" ことになります。 この動作が望ましくない場合は、 LastChildFill プロパティを false に設定します。

例示

次の例では、 Canvas を使用してコンテンツを絶対に配置する方法を示します。 このコードでは、3 つの 100 ピクセルの正方形が生成されます。 最初の四角形は赤で、左上 (x, y) の位置は (0, 0) として指定されます。 2 番目の正方形は緑色で、左上の位置は (100, 100) で、最初の正方形のすぐ下と右側にあります。 3 番目の四角形は青で、左上の位置は (50, 50) であるため、最初の四角形の右下クアドラントと 2 番目の左上の四分円が含まれます。 3 番目の四角形は最後にレイアウトされているため、他の 2 つの正方形の上に表示されます。つまり、重複する部分は 3 番目のボックスの色を想定しています。

// Create the application's main window
mainWindow = new Window ();
mainWindow.Title = "Canvas Sample";

// Create the Canvas
myParentCanvas = new Canvas();
myParentCanvas.Width = 400;
myParentCanvas.Height = 400;

// Define child Canvas elements
myCanvas1 = new Canvas();
myCanvas1.Background = Brushes.Red;
myCanvas1.Height = 100;
myCanvas1.Width = 100;
Canvas.SetTop(myCanvas1, 0);
Canvas.SetLeft(myCanvas1, 0);

myCanvas2 = new Canvas();
myCanvas2.Background = Brushes.Green;
myCanvas2.Height = 100;
myCanvas2.Width = 100;
Canvas.SetTop(myCanvas2, 100);
Canvas.SetLeft(myCanvas2, 100);

myCanvas3 = new Canvas();
myCanvas3.Background = Brushes.Blue;
myCanvas3.Height = 100;
myCanvas3.Width = 100;
Canvas.SetTop(myCanvas3, 50);
Canvas.SetLeft(myCanvas3, 50);

// Add child elements to the Canvas' Children collection
myParentCanvas.Children.Add(myCanvas1);
myParentCanvas.Children.Add(myCanvas2);
myParentCanvas.Children.Add(myCanvas3);

// Add the parent Canvas as the Content of the Window Object
mainWindow.Content = myParentCanvas;
mainWindow.Show ();

WindowTitle = "Canvas Sample"
'Create a Canvas as the root Panel
Dim myParentCanvas As New Canvas()
myParentCanvas.Width = 400
myParentCanvas.Height = 400

' Define child Canvas elements
Dim myCanvas1 As New Canvas()
myCanvas1.Background = Brushes.Red
myCanvas1.Height = 100
myCanvas1.Width = 100
Canvas.SetTop(myCanvas1, 0)
Canvas.SetLeft(myCanvas1, 0)

Dim myCanvas2 As New Canvas()
myCanvas2.Background = Brushes.Green
myCanvas2.Height = 100
myCanvas2.Width = 100
Canvas.SetTop(myCanvas2, 100)
Canvas.SetLeft(myCanvas2, 100)

Dim myCanvas3 As New Canvas()
myCanvas3.Background = Brushes.Blue
myCanvas3.Height = 100
myCanvas3.Width = 100
Canvas.SetTop(myCanvas3, 50)
Canvas.SetLeft(myCanvas3, 50)

' Add child elements to the Canvas' Children collection
myParentCanvas.Children.Add(myCanvas1)
myParentCanvas.Children.Add(myCanvas2)
myParentCanvas.Children.Add(myCanvas3)

' Add the parent Canvas as the Content of the Window Object
Me.Content = myParentCanvas

<Page WindowTitle="Canvas Sample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <Canvas Height="400" Width="400">
    <Canvas Height="100" Width="100" Top="0" Left="0" Background="Red"/>
    <Canvas Height="100" Width="100" Top="100" Left="100" Background="Green"/>
    <Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue"/>
  </Canvas>
</Page>

コンパイルされたアプリケーションは、次のような新しい UI を生成します。

次の例では、 DockPanelを使用して領域をパーティション分割する方法を示します。 親Borderの子として 5 つのDockPanel要素が追加されます。 それぞれがDockPanelの異なるポジショニングプロパティを使用して空間を分割します。 最後の要素は、残りの未割り当て領域を "塗りつぶし" します。

// Create the application's main window
mainWindow = gcnew Window();
mainWindow->Title = "DockPanel Sample";

// Create the DockPanel
DockPanel^ myDockPanel = gcnew DockPanel();
myDockPanel->LastChildFill = true;

// Define the child content
Border^ myBorder1 = gcnew Border();
myBorder1->Height = 25;
myBorder1->Background = Brushes::SkyBlue;
myBorder1->BorderBrush = Brushes::Black;
myBorder1->BorderThickness = Thickness(1);
DockPanel::SetDock(myBorder1, Dock::Top);
TextBlock^ myTextBlock1 = gcnew TextBlock();
myTextBlock1->Foreground = Brushes::Black;
myTextBlock1->Text = "Dock = Top";
myBorder1->Child = myTextBlock1;

Border^ myBorder2 = gcnew Border();
myBorder2->Height = 25;
myBorder2->Background = Brushes::SkyBlue;
myBorder2->BorderBrush = Brushes::Black;
myBorder2->BorderThickness = Thickness(1);
DockPanel::SetDock(myBorder2, Dock::Top);
TextBlock^ myTextBlock2 = gcnew TextBlock();
myTextBlock2->Foreground = Brushes::Black;
myTextBlock2->Text = "Dock = Top";
myBorder2->Child = myTextBlock2;

Border^ myBorder3 = gcnew Border();
myBorder3->Height = 25;
myBorder3->Background = Brushes::LemonChiffon;
myBorder3->BorderBrush = Brushes::Black;
myBorder3->BorderThickness = Thickness(1);
DockPanel::SetDock(myBorder3, Dock::Bottom);
TextBlock^ myTextBlock3 = gcnew TextBlock();
myTextBlock3->Foreground = Brushes::Black;
myTextBlock3->Text = "Dock = Bottom";
myBorder3->Child = myTextBlock3;

Border^ myBorder4 = gcnew Border();
myBorder4->Width = 200;
myBorder4->Background = Brushes::PaleGreen;
myBorder4->BorderBrush = Brushes::Black;
myBorder4->BorderThickness = Thickness(1);
DockPanel::SetDock(myBorder4, Dock::Left);
TextBlock^ myTextBlock4 = gcnew TextBlock();
myTextBlock4->Foreground = Brushes::Black;
myTextBlock4->Text = "Dock = Left";
myBorder4->Child = myTextBlock4;

Border^ myBorder5 = gcnew Border();
myBorder5->Background = Brushes::White;
myBorder5->BorderBrush = Brushes::Black;
myBorder5->BorderThickness = Thickness(1);
TextBlock^ myTextBlock5 = gcnew TextBlock();
myTextBlock5->Foreground = Brushes::Black;
myTextBlock5->Text = "This content will Fill the remaining space";
myBorder5->Child = myTextBlock5;

// Add child elements to the DockPanel Children collection
myDockPanel->Children->Add(myBorder1);
myDockPanel->Children->Add(myBorder2);
myDockPanel->Children->Add(myBorder3);
myDockPanel->Children->Add(myBorder4);
myDockPanel->Children->Add(myBorder5);

// Add the parent Canvas as the Content of the Window Object
mainWindow->Content = myDockPanel;
mainWindow->Show();

// Create the application's main window
mainWindow = new Window ();
mainWindow.Title = "DockPanel Sample";

// Create the DockPanel
DockPanel myDockPanel = new DockPanel();
myDockPanel.LastChildFill = true;

// Define the child content
Border myBorder1 = new Border();
myBorder1.Height = 25;
myBorder1.Background = Brushes.SkyBlue;
myBorder1.BorderBrush = Brushes.Black;
myBorder1.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder1, Dock.Top);
TextBlock myTextBlock1 = new TextBlock();
myTextBlock1.Foreground = Brushes.Black;
myTextBlock1.Text = "Dock = Top";
myBorder1.Child = myTextBlock1;

Border myBorder2 = new Border();
myBorder2.Height = 25;
myBorder2.Background = Brushes.SkyBlue;
myBorder2.BorderBrush = Brushes.Black;
myBorder2.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder2, Dock.Top);
TextBlock myTextBlock2 = new TextBlock();
myTextBlock2.Foreground = Brushes.Black;
myTextBlock2.Text = "Dock = Top";
myBorder2.Child = myTextBlock2;

Border myBorder3 = new Border();
myBorder3.Height = 25;
myBorder3.Background = Brushes.LemonChiffon;
myBorder3.BorderBrush = Brushes.Black;
myBorder3.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder3, Dock.Bottom);
TextBlock myTextBlock3 = new TextBlock();
myTextBlock3.Foreground = Brushes.Black;
myTextBlock3.Text = "Dock = Bottom";
myBorder3.Child = myTextBlock3;

Border myBorder4 = new Border();
myBorder4.Width = 200;
myBorder4.Background = Brushes.PaleGreen;
myBorder4.BorderBrush = Brushes.Black;
myBorder4.BorderThickness = new Thickness(1);
DockPanel.SetDock(myBorder4, Dock.Left);
TextBlock myTextBlock4 = new TextBlock();
myTextBlock4.Foreground = Brushes.Black;
myTextBlock4.Text = "Dock = Left";
myBorder4.Child = myTextBlock4;

Border myBorder5 = new Border();
myBorder5.Background = Brushes.White;
myBorder5.BorderBrush = Brushes.Black;
myBorder5.BorderThickness = new Thickness(1);
TextBlock myTextBlock5 = new TextBlock();
myTextBlock5.Foreground = Brushes.Black;
myTextBlock5.Text = "This content will Fill the remaining space";
myBorder5.Child = myTextBlock5;

// Add child elements to the DockPanel Children collection
myDockPanel.Children.Add(myBorder1);
myDockPanel.Children.Add(myBorder2);
myDockPanel.Children.Add(myBorder3);
myDockPanel.Children.Add(myBorder4);
myDockPanel.Children.Add(myBorder5);

// Add the parent Canvas as the Content of the Window Object
mainWindow.Content = myDockPanel;
mainWindow.Show ();

WindowTitle = "DockPanel Sample"
'Create a DockPanel as the root Panel
Dim myDockPanel As New DockPanel()
myDockPanel.LastChildFill = True

' Define the child content
Dim myBorder1 As New Border()
myBorder1.Height = 25
myBorder1.Background = Brushes.SkyBlue
myBorder1.BorderBrush = Brushes.Black
myBorder1.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder1, Dock.Top)
Dim myTextBlock1 As New TextBlock()
myTextBlock1.Foreground = Brushes.Black
myTextBlock1.Text = "Dock = Top"
myBorder1.Child = myTextBlock1

Dim myBorder2 As New Border()
myBorder2.Height = 25
myBorder2.Background = Brushes.SkyBlue
myBorder2.BorderBrush = Brushes.Black
myBorder2.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder2, Dock.Top)
Dim myTextBlock2 As New TextBlock()
myTextBlock2.Foreground = Brushes.Black
myTextBlock2.Text = "Dock = Top"
myBorder2.Child = myTextBlock2

Dim myBorder3 As New Border()
myBorder3.Height = 25
myBorder3.Background = Brushes.LemonChiffon
myBorder3.BorderBrush = Brushes.Black
myBorder3.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder3, Dock.Bottom)
Dim myTextBlock3 As New TextBlock()
myTextBlock3.Foreground = Brushes.Black
myTextBlock3.Text = "Dock = Bottom"
myBorder3.Child = myTextBlock3

Dim myBorder4 As New Border()
myBorder4.Width = 200
myBorder4.Background = Brushes.PaleGreen
myBorder4.BorderBrush = Brushes.Black
myBorder4.BorderThickness = New Thickness(1)
DockPanel.SetDock(myBorder4, Dock.Left)
Dim myTextBlock4 As New TextBlock()
myTextBlock4.Foreground = Brushes.Black
myTextBlock4.Text = "Dock = Left"
myBorder4.Child = myTextBlock4

Dim myBorder5 As New Border()
myBorder5.Background = Brushes.White
myBorder5.BorderBrush = Brushes.Black
myBorder5.BorderThickness = New Thickness(1)
Dim myTextBlock5 As New TextBlock()
myTextBlock5.Foreground = Brushes.Black
myTextBlock5.Text = "This content will Fill the remaining space"
myBorder5.Child = myTextBlock5

' Add child elements to the DockPanel Children collection
myDockPanel.Children.Add(myBorder1)
myDockPanel.Children.Add(myBorder2)
myDockPanel.Children.Add(myBorder3)
myDockPanel.Children.Add(myBorder4)
myDockPanel.Children.Add(myBorder5)
Me.Content = myDockPanel

こちらも参照ください

• 配置、余白、およびパディングの概要
• 添付プロパティの概要
• カスタム コンテンツ ラッピング パネルの作成のサンプル
• レイアウト
• レイアウトとデザイン
• スクロールビューアー
• 自動レイアウトの使用の概要
• ウォークスルー: 私の初めての WPF デスクトップ アプリケーション
• WPF コントロール ギャラリーのサンプル
• WPF レイアウト ギャラリーのサンプル