syncfusion-winforms-card-layout

Windows Forms での CardLayout の実装

このスキルを使用する場面

次のような場合に、このスキルを使用します。

• 一度に 1 枚のカード（コントロール）を表示する、スタック型のカードレイアウトを作成する
• カードを順番に切り替えるウィザード形式のインターフェイスを構築する
• カードを切り替えるプロパティページを実装する
• 複数のパネルやコントロールを、コンテナー内でカードとして整理する
• 異なるビューや画面間をプログラムから移動する

コンポーネントの概要

CardLayout は、コントロールをカードのスタックのように整理するレイアウトマネージャーです。レイアウトに追加された各コントロールが「カード」となり、一度に表示されるカードは 1 枚だけです。コンテナーはカードのスタックとして機能し、最初に追加されたコンポーネントが初期状態で表示されます。カードには、カスタム名、画像、サイズ変更の動作を設定できます。

主な機能：

• 各カードに一意の名前を設定する
• カード間を移動する（First、Next、Previous、Last）
• レイアウトモードを設定する（Default または Fill）
• 子コントロールのアスペクト比を維持する
• 名前またはインデックスで選択中のカードを取得／設定する

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• アセンブリと NuGet パッケージのインストール
• デザイナーまたはコードから CardLayout を追加する
• コンテナーパネルを作成して設定する
• 子コントロールをカードとして追加する
• Next／Previous メソッドを使った基本的なカードナビゲーション

CardLayout の設定

📄 参照： references/configuring-cardlayout.md

• SetCardName を使ってカスタムカード名を設定する
• カード名とコンポーネントを取得する
• カードインデックスを扱う（NextCardIndex、PreviousCardIndex）
• アスペクト比を維持する（MaintainAspectRatio）
• レイアウトモード：Default と Fill
• 推奨サイズと最小サイズを設定する

カードナビゲーション

📄 参照： references/card-navigation.md

• SelectedCard プロパティを使って名前でカードを選択する
• ナビゲーションメソッド：First()、Next()、Previous()、Last()
• デザイナーで SmartTag を使ってカードを選択する
• ボタンを使ったコードによるナビゲーション
• カード選択のための ComboBox 連携
• 実行時のカード切り替え

子コントロールの設定

📄 参照： references/child-controls.md

• 子コントロールをカードとしてレイアウトに追加する
• カードの画像設定
• PreferredSize と MinimumSize の設定
• コンテナーと子コントロールの設定
• 子コントロールのスタイル設定

クイックスタートの例

using Syncfusion.Windows.Forms.Tools;
using System.Windows.Forms;

public class CardLayoutForm : Form
{
    private CardLayout cardLayout1;
    private Panel cardLayoutPanel;
    private Panel card1;
    private Panel card2;

    public CardLayoutForm()
    {
        // Initialize CardLayout
        cardLayout1 = new CardLayout();
        cardLayoutPanel = new Panel();
        cardLayoutPanel.BackColor = Color.White;
        cardLayoutPanel.Dock = DockStyle.Fill;

        // Set container
        cardLayout1.ContainerControl = cardLayoutPanel;

        // Create cards (panels)
        card1 = new Panel();
        card1.BackColor = Color.LightBlue;
        card1.Controls.Add(new Label { Text = "Card 1", AutoSize = true });

        card2 = new Panel();
        card2.BackColor = Color.LightGreen;
        card2.Controls.Add(new Label { Text = "Card 2", AutoSize = true });

        // Add cards to the main panel
        cardLayoutPanel.Controls.Add(card1);
        cardLayoutPanel.Controls.Add(card2);

        // Set card names
        cardLayout1.SetCardName(card1, "FirstCard");
        cardLayout1.SetCardName(card2, "SecondCard");

        // Navigate between cards
        cardLayout1.SelectedCard = "FirstCard";
        cardLayout1.Next(); // Display SecondCard

        // Add to form
        this.Controls.Add(cardLayoutPanel);
    }
}

よく使われるパターン

パターン 1：ウィザードインターフェイス

ユーザーがカードを前後に移動できる、順次進行するステップを作成します。

private void NextButton_Click(object sender, EventArgs e)
{
    this.cardLayout1.Next();
}

private void PreviousButton_Click(object sender, EventArgs e)
{
    this.cardLayout1.Previous();
}

パターン 2：ドロップダウンによるカード選択

ドロップダウンリストからカードを選択できるようにします。

private void CardSelectionComboBox_SelectedIndexChanged(object sender, EventArgs e)
{
    string selectedCardName = CardSelectionComboBox.SelectedItem.ToString();
    this.cardLayout1.SelectedCard = selectedCardName;
}

パターン 3：コンテナーに合わせて表示

カードがコンテナー全体に広がるようにします。

this.cardLayout1.LayoutMode = CardLayoutMode.Fill;

主なプロパティ

プロパティ	型	説明
SelectedCard	string	名前で現在表示中のカードを取得／設定します
LayoutMode	CardLayoutMode	レイアウトモード（Default または Fill）を取得／設定します
NextCardIndex	int	次のカードのインデックスを返します
PreviousCardIndex	int	前のカードのインデックスを返します
ContainerControl	Control	レイアウトのコンテナーを取得／設定します

主なメソッド

メソッド	目的
First()	最初のカードを表示します
Next()	次のカードを表示します
Previous()	前のカードを表示します
Last()	最後のカードを表示します
SetCardName(Control, string)	カードにカスタム名を割り当てます
GetCardName(Control)	カード名を取得します
GetCardNames()	すべてのカード名を配列として取得します
GetComponentFromName(string)	カード名でコントロールを取得します
SetMaintainAspectRatio(Control, bool)	アスペクト比の維持を設定します