【C#】【Form】TableLayoutPanel ～ カルーセルをWindows Formで実装する ～

C#・WindowsForm関連

■ はじめに

　画像をカルーセル表示するアプリを作る際に、
画像を整列させるために、TableLayoutPanelを使用する

TableLayoutPanel

 * 表形式でコントロールを整列するために使用

■ 使用上の注意

 * 1セルに、1コントロールしか配置できない

対応案

 * 1セルに複数のコントロールを追加したい場合は、Panelなどをおき、そのPanel上にコントロールを追加していく
 * セルをまたいでコントロールを表示したい場合は、「ColumnSpan」「RowSpan」を使ってTableの線を跨ぐ
  => 例:横に2セルまたぐ場合は「ColumnSpan:2」とする
  => 詳細は、以下のサイトを参照のこと。
https://ameblo.jp/oregano-blog/entry-10386075690.html

■ サンプル

カルーセルをWindows Formで作成する 
 * 別に TableLayoutPanel を使う必要はないが、あれば綺麗に配置できそうなので利用してみる。
コントロール構成 
 + TableLayoutPanel
   + button1
   + pictureBox1
   + pictureBox2
   + button2
コード (TableLayoutPanel とは全く関係ないけど) 
using System;
using System.Drawing;
using System.Windows.Forms;

namespace SampleForm
{
  public partial class Form5 : Form
  {
    private Bitmap[] DemoImages = { Properties.Resources._1, Properties.Resources._2, Properties.Resources._3, Properties.Resources._4 };
    private int indexOfImageLeft;
    private int indexOfImageRight;

    public Form1()
    {
      InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
      this.indexOfImageLeft = 0;
      this.indexOfImageRight = this.indexOfImageLeft + 1;

      this.pictureBox1.Image = DemoImages[this.indexOfImageLeft];
      this.pictureBox2.Image = DemoImages[this.indexOfImageRight];
    }

    // ■ 左クリック押下。（画像が４枚の場合）
    //     [<] [1] [2] [>]
    //  => [<] [4] [1] [>] << ここで変わる
    //  => [<] [3] [4] [>]
    //  => [<] [2] [3] [>]
    //  => [<] [1] [2] [>]
    private void button1_Click(object sender, EventArgs e)
    {
      this.indexOfImageRight = this.indexOfImageLeft;
      if (this.indexOfImageLeft - 1 < 0)
      {
        this.indexOfImageLeft = DemoImages.Length - 1;
      }
      else
      {
        this.indexOfImageLeft = this.indexOfImageLeft - 1;
      }

      this.pictureBox1.Image = DemoImages[this.indexOfImageLeft];
      this.pictureBox2.Image = DemoImages[this.indexOfImageRight];
      this.pictureBox1.Refresh();
      this.pictureBox2.Refresh();
    }

    // ■ 右クリック押下。（画像が４枚の場合）
    //     [<] [1] [2] [>]
    //  => [<] [2] [3] [>]
    //  => [<] [3] [4] [>]
    //  => [<] [4] [1] [>] << ここで変わる
    //  => [<] [1] [2] [>]
    private void button2_Click(object sender, EventArgs e)
    {
      this.indexOfImageLeft = this.indexOfImageRight;
      if (this.indexOfImageRight + 1 >= DemoImages.Length)
      {
        this.indexOfImageRight = 0;
      }
      else
      {
        this.indexOfImageRight = this.indexOfImageRight + 1;
      }

      this.pictureBox1.Image = DemoImages[this.indexOfImageLeft];
      this.pictureBox2.Image = DemoImages[this.indexOfImageRight];
      this.pictureBox1.Refresh();
      this.pictureBox2.Refresh();
    }
  }
}

■ TableLayoutPanel あれこれ

TableLayoutPanel 内の子コンポーネントの配置

 * TableLayoutPanel 内にラベル等を配置すると、
   デフォルトだと右上に配置されてしまう。
原因 
 * 子コンポーネント側の Anchor が Top, Left のため
解決案 
 * 子コンポーネント側の Anchor を None や Left などに変更する
  => 詳細は、以下の公式サイトに記載されているので、そちらを参照。
https://docs.microsoft.com/ja-jp/dotnet/framework/winforms/controls/how-to-anchor-and-dock-child-controls-in-a-tablelayoutpanel-control

参考文献

TableLayoutPanel

https://dobon.net/vb/dotnet/control/tlbeginning.html
https://www.ipentec.com/document/csharp-using-table-layout-panel
http://codepanic.itigo.jp/cs/tablelayoutpanel.html

関連記事

Windows Form ～ 目次 ～

https://blogs.yahoo.co.jp/dk521123/8054245.html