c# - Windowsフォームでクリック可能な画像グリッド?

Question

これがばかげた質問である場合は、ご容赦ください。私は C# の経験が少しありますが、まだこの程度ではありません。

各画像の周りにスペースのあるグリッドに配置したい一連の画像があり、その下にテキストもあり、クリックできるようにしたいので、クリックするとハイライトされ、ダブルクリックでイベントが実行されます。これについて私が持っている最良の例は、プログラムのユーザーインターフェイスですACDSee。私はこれを何時間もグーグルで検索しましたが、該当するものは何も思いつきませんでした. これは難しいですか、それとも簡単ですか？誰かが私に例を挙げたり、正しい方向に向けたりできますか?

乾杯。

score 5 · Accepted Answer

それほど難しいことではないようです。次の手順をお勧めします。

画像サムネイル用の新しい「ユーザーコントロール」をプロジェクトに追加します。ドッキングされPictureBoxた、LabelまたはLinkLabelその下部にまたはを含めることができます。
各サムネイルの周囲のスペースについてはPadding、ユーザーコントロールのプロパティを試してみてください。
サムネイルを保持するいわゆるグリッドの場合は、を使用しFlowLayoutPanel、上記のユーザーコントロールのインスタンスをこのパネルに追加するだけです。
選択されていることを視覚的に表現するには、ユーザーコントロールインスタンスの背景色を青に変更し（たとえば）、選択を解除するとコントロールフェイスに戻ります。IsSelectedユーザーコントロールのプロパティも実装することをお勧めします。
サムネイルの選択をエミュレートするには、ユーザーコントロールのイベントを処理し、すべてのサムネイルインスタンスのイベントを単一のイベントハンドラーメソッドClickに割り当てます。すでに選択されているサムネイルへのグローバル参照を保存します。たとえば、nullで初期化された名前を付けます。イベントハンドラ本体で、をグローバルと比較し、必要に応じて更新します。に関連付けられているユーザーコントロールが選択されていない場合（つまり、背景が青でない、またはである場合）、選択するか、背景を変更します。それ以外の場合は、背景をデフォルトの色に変更します（例：コントロールフェイス）。SelectedThumbnailsenderSelectedThumbnailsenderIsSelectedfalse

イベントハンドラのClick本体は次のようになります。

MyThumbnailControl ctrl = sender as MyThumbnailControl;
if(ctrl == null) return;
if(ctrl == SelectedThumbnail) return; // selected again
if(ctrl != SelectedThumbnail)
{
    ctrl.IsSelected = true;
    ctrl.BackColor = Color.Blue; 
    // it's better to set the back-color in the IsSelected property setter, not here
    SelectedThumbnail.IsSelected = false;
    SelectedThumbnail.BackColor = Color.Control;
    SelectedThumbnail = ctrl; // important part
}

いわゆるグリッドに追加されるすべてのサムネイルインスタンスも、別の配列で参照することをお勧めします。したがって、矢印キーで選択を変更することは、単純なインデックス計算で可能になります。

追記：作成されるユーザーコントロールのMyThumbnailControl名前は、そのコントロールを参照するためのランダムな名前であると想定しました。新しいユーザーコントロールを作成すると、ウィザードは目的の名前（たとえばMyThumbnailControl）でクラスを生成します。その中に名前付きのプロパティを定義し、IsSelectedそのゲッターとセッターを実装できます。チュートリアルについては、これを参照してください。ユーザーコントロールを定義した後、対応するクラスからインスタンスをインスタンス化できます。また、グローバル参照とは、フォーム（または任意の親コントロール）レベルの変数を意味します。簡単にするために、グリッドとサムネイルを保持するフォームに選択したサムネイルの参照を追加できます。MyThumbnailControl selectedThumb = null;または、フォームの本文にこのようなものを追加できます。

score -1 · Accepted Answer

ここに何かがあります、私はあなたを直しました。

C# プロジェクト名CreateImageListを作成し、Form1 に次の 5 つのコントロールを既定の名前 (Panel1、PictureBox1、Label1、Button1、Button2) で追加します。

ここに画像の説明を入力

使い方：

ページが読み込まれると、imageList オブジェクトが作成され、指定したフォルダーからすべての .jpg 画像が読み込まれます
ImageList 画像は PictureBox コントロールに設定され、ユーザーが "Button1" をクリックすると画像ボックスは ImageList の次の画像を表示し、ユーザーが "Button2" をクリックすると PictureBox は ImageList の前の画像を表示します。
Label1 は、ImageList Arrage からの currentImage カウンターを示します。何か特定のことを書きたい場合は、テキストの配列を作成し、画像カウンターと同期できます。
ユーザーが PictureBox をクリックすると、強調表示された画像を表示する境界線が作成されます
ユーザーが PictureBox をダブルクリックすると、MessageBox が表示され、DoubleClick イベントが表示されます。

これで、次のコードを使用できます。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.IO;

namespace CreateImageList
{
public partial class Form1 : Form
{
    private int currentImage = 0;
    protected Graphics myGraphics;
    ImageList iPicList = new ImageList();

    public Form1()
    {
        InitializeComponent();
        DirectoryInfo dirImages = new DirectoryInfo("C:\\2012");
        iPicList.ImageSize = new Size(255, 255);
        iPicList.TransparentColor = Color.White;
        myGraphics = Graphics.FromHwnd(panel1.Handle);

        foreach (FileInfo file in dirImages.GetFiles())
        {
            if (file.Extension == ".jpg")
            {
                Image myImage = Image.FromFile(file.FullName);
                iPicList.Images.Add(myImage);
            }
        }

        if (iPicList.Images.Empty != true)
        {
            panel1.Refresh();
            currentImage = 0;
            // Draw the image in the panel.
            iPicList.Draw(myGraphics, 1, 1, currentImage);
            // Show the image in the PictureBox.
            pictureBox1.Image = iPicList.Images[currentImage];
            label1.Text = "Image #" + currentImage;
        }

    }

    private void showImage(int imgIndex)
    {
        // Draw the image in the panel.
        iPicList.Draw(myGraphics, 1, 1, currentImage);
        // Show the image in the PictureBox.
        pictureBox1.Image = iPicList.Images[currentImage];
        label1.Text = "image #" + currentImage;
        panel1.Refresh();
    }

    private void button1_Click(object sender, EventArgs e)
    {
        if (iPicList.Images.Count - 1 > currentImage)
        {
            currentImage++;
        }
        else
        {
            currentImage = 0;
        }
        showImage(currentImage);
    }

    private void button2_Click(object sender, EventArgs e)
    {
        if (iPicList.Images.Count - 1 >= currentImage)
        {
            if (currentImage == 0)
                currentImage = iPicList.Images.Count-1;
            else
                currentImage--;
        }
        else
        {
            currentImage = iPicList.Images.Count;
        }
        showImage(currentImage);
    }

    private void pictureBox1_DoubleClick(object sender, EventArgs e)
    {
        MessageBox.Show("Picture Box Double clicked");
    }

    private void pictureBox1_Click(object sender, EventArgs e)
    {
        panel1.Refresh();
        myGraphics.DrawRectangle(Pens.Black, 0, 0, iPicList.Images[currentImage].Width + 1, iPicList.Images[currentImage].Height + 1);
        pictureBox1.Image = iPicList.Images[currentImage];
    }
}
}

必要な変更は次のとおりです。

次のフォルダーを、大量の jpg がある場所に変更します。

DirectoryInfo dirImages = new DirectoryInfo("C:\\2012");

また、他の種類の画像を扱っている場合は、ここで変更してください。

if (file.Extension == ".jpg") // Change it to your image type.

ボタンを使用して上下に移動したくない場合は、スクロール可能なパネルまたはリストなどで PictureBox コントロールをホストするいくつかのオプションがあります。

c# - Windowsフォームでクリック可能な画像グリッド?

2 に答える 2

Related

Reference