이미지 첨부 라벨을 실현해 본다

용도는 어쨌든 텍스트와 이미지가 붙은 것처럼 보이는 라벨을 만드는 방법을 검토했다.
제반 사정으로 오너 드로우 등의 방법은 배우는 시간이 걸리지 않기 때문에 검토에서 제외한다.

목표

텍스트와 이미지를 표시하는 라벨을 목표로 설정합니다.

라벨보다 큰 이미지는 적당한 크기로 축소할 수 있어야 한다.

텍스트와 이미지의 위치를 ​​지정할 수 있는 것, 일단 좌우만.

긴 텍스트는 겹쳐서 표시되어 이미지에 걸리지 않는다.

라벨에는 전체를 둘러싸는 바깥쪽 테두리(Border)를 붙일 수 있어야 한다.

실현 방법

완성 크기는 200 x 50 px, 그 중 이미지는 50 x 50 px 로 한다.

이미지는 프로젝트 (App.config가 만들어진) 폴더에 적절한 배경 투명 PNG 파일을 넣습니다.

설계시

런타임

그1: Label 위에 살짝 PictureBox를 겹쳐

완성 크기의 Label 를 준비해, 그 우단에 PictureBox 를 「놓는다」.
외부 테두리를 실현하기 위해 Label 내부에 PictureBox가 위치하도록 되어 있다.

처음 생각하는 방식, 단순. 이동은 양 컨트롤의 Location 으로 제어. 번잡하지만 초학자에게도 직감적으로 이해할 수 있다. 배경색을 지정하는 경우 등도 양 컨트롤의 배경색을 설정할 필요가 있다.
다만, 이 약점은, 유저 컨트롤에 갇혀 버리면, 이용측은 신경쓸 필요는 없어질지도 모른다.

private void Form1_Load(object sender, EventArgs e)
{
    // その1
    label1.BackColor = SystemColors.ActiveCaption;
    label1.Size = new Size(200, 50);
    label1.Text = "label1label1label1label1label1label1label1label1";
    label1.BorderStyle = BorderStyle.FixedSingle;
    pictureBox1.Size = new Size(48, 48);
    pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
    pictureBox1.BackColor = SystemColors.ActiveCaption;
    pictureBox1.PictureBox = Image.FromFile("../../sample.png");
}

그 2 Label 를 PictureBox 의 아이 컨트롤로서 배치한다

Label 를 PictureBox 의 아이 컨트롤로 한다. 이것도 솔직한 손. Padding 속성을 사용하여 이미지를 오른쪽 가장자리로 추적합니다.
이미지를 왼쪽에 두는 경우와 마찬가지로 Padding 속성과 Label의 Location에서 조정한다.
PictureBox와 Label만으로 구성할 수 있는 것이 호감할 수 있다.

private void Form1_Load(object sender, EventArgs e)
{
    // その2
    label2.BackColor = Color.Transparent;
    label2.Parent = pictureBox2;
    label2.Location = Point.Empty;
    label2.Size = new Size(148, 48);
    label2.Text = "label2label2label2label2label2label2label2label2";
    pictureBox2.BorderStyle = BorderStyle.FixedSingle;
    pictureBox2.Size = new Size(200, 50);
    pictureBox2.SizeMode = PictureBoxSizeMode.StretchImage;
    pictureBox2.BackColor = SystemColors.ActiveCaption;
    pictureBox2.Padding = new Padding(150, 0, 0, 0);
    pictureBox2.PictureBox = Image.FromFile("../../sample.png");
    pictureBox2.Controls.Add(label2);
}

3! NG! Label에서 PictureBox 및 Text 설정

"텍스트가 이미지에 걸리지 않는다"는 점에서 목표를 채울 수 없다. Padding 속성이 이미지와 텍스트 모두에 효과적이므로 겹칩니다.

private void Form1_Load(object sender, EventArgs e)
{
    // その3
    var PictureBox = Image.FromFile("../../sample.png");
    var canvas = new Bitmap(48, 48);
    using (var g = Graphics.FromImage(canvas))
    {
        g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
        g.DrawImage(image, 0, 0, 48, 48);
        image.Dispose();
    }
    label3.BorderStyle = BorderStyle.FixedSingle;
    label3.Size = new Size(200, 50);
    label3.PictureBox = canvas;
    label3.TextAlign = ContentAlignment.TopLeft;
    label3.ImageAlign = ContentAlignment.MiddleRight;
    label3.BackColor = SystemColors.ActiveCaption;
    label3.Text = "label3label3label3label3label3label3label3label3";
}

4 레이아웃 패널에 Label 및 PictureBox 배치

좀 더 복잡한 레이아웃 요구가 나오면 FlowLayOutPanel이나 TableLayoutPanel 등에 배치하는 것이 더 좋을지도 모른다.

private void Form1_Load(object sender, EventArgs e)
{
    // その4
    flowLayoutPanel4.BorderStyle = BorderStyle.FixedSingle;
    flowLayoutPanel4.Size = new Size(200, 50);
    flowLayoutPanel4.Controls.Add(label4);
    flowLayoutPanel4.Controls.Add(pictureBox4);
    flowLayoutPanel4.BackColor = SystemColors.ActiveCaption;
    label4.BackColor = Color.Transparent;
    label4.Size = new Size(148, 48);
    label4.Text = "label4label4label4label4label4label4label4label4";
    pictureBox4.Size = new Size(48, 48);
    pictureBox4.BackColor = Color.Transparent;
    pictureBox4.PictureBox = Image.FromFile("../../sample.png");
}

확인한 환경

OS: 한국어 Windows 10 Home 64비트

컴파일러: Visual Studio Community 2017 RC