WPFの古典的なチュートリアル：StackPanel、WrapPanel、DockPanelのレイアウト

2年 ago
芽依, 雨夜
1 minute

WPF（Windows Presentation Foundation）は、リッチクライアントアプリケーションを作成するための技術であり、多くのレイアウトコントロールを提供してインターフェースを構築するのに役立ちます。その中で、StackPanel、WrapPanel、そしてDockPanelがよく使われるレイアウトコントロールです。

  1. StackPanel（スタックパネル）：
    StackPanelは、子要素を水平または垂直に連続配置するシンプルなレイアウトコントロールです。Orientationプロパティを使用して並べる方向を指定できますが、デフォルトは垂直方向です。子要素は、HorizontalAlignmentとVerticalAlignmentを設定することで、StackPanel内での配置を制御することができます。

コードの例：

<StackPanel>
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <Button Content="Button 3" />
</StackPanel>

このコードは、3つのボタンを縦方向に配置します。

  1. WrapPanelは、水平または垂直方向に子要素を配置する簡単なレイアウトコントロールで、子要素がコンテナの利用可能なスペースを超えると自動的に折り返します。StackPanelとは異なり、子要素のサイズに応じてレイアウトを自動調整します。

コードの例：

<WrapPanel>
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <Button Content="Button 3" />
</WrapPanel>

このコードは、3つのボタンを水平方向に配置し、コンテナの幅が3つのボタンを収めるには足りない場合は自動的に改行します。

  1. DockPanelは、子要素を親コンテナの上下左右の方向に停泊させるよう許可する一般的なレイアウトコントロールです。子要素は、DockPanel.Dockプロパティを設定することで停泊方向を指定でき、デフォルトでは子要素は左側に停泊します。

コード例：

<DockPanel>
    <Button DockPanel.Dock="Top" Content="Top" />
    <Button DockPanel.Dock="Bottom" Content="Bottom" />
    <Button DockPanel.Dock="Left" Content="Left" />
    <Button DockPanel.Dock="Right" Content="Right" />
</DockPanel>

親コンテナに四つのボタンをそれぞれ上、下、左、右に停泊させるコードがあります。

これは、WPFのStackPanel、WrapPanel、およびDockPanelレイアウトコントロールについての簡単な紹介です。これらのレイアウトコントロールを適切に使用することで、様々な豊富なインターフェースレイアウトを簡単に構築することができます。

bannerAds