Winforms アプリでドラッグ アンド ドロップ ファイル アップローダを作成する方法

最新のアプリケーションの多くは、ユーザーがシステムにアップロードできるファイルで動作します。画像エディタ、コード IDE、ワード プロセッサはすべてその例です。Windows フォーム アプリケーションを構築している場合、この機能をユーザー インターフェイスの一部として簡単に追加できます。

Windows フォーム アプリケーションでは、パネルやリスト ボックスなどの UI 要素をドラッグ アンド ドロップできます。これらの UI 要素を使用して、ドラッグ アンド ドロップ機能を作成できます。ユーザーがファイルをパネルにドラッグすると、そのファイルに基づいたフィードバックを表示できます。

ドラッグ アンド ドロップ コンテナーの UI を作成する方法

パネル要素を使用して、ドラッグ アンド ドロップ機能の UI を作成できます。その後、ListBox UI 要素を使用して、ユーザーがパネルにドラッグしたファイルの名前を表示できます。

1. 新しい Windows フォーム アプリケーションを作成します。
2. ツールボックスで、パネル UI 要素を検索し、キャンバスにドラッグします。
   
3. 新しいパネルを強調表示します。プロパティ ウィンドウで、次のプロパティの値を変更します。
   
4. ツールボックスで ListBox UI 要素を検索し、キャンバスにドラッグします。パネルの内側になるように配置し、ListBox とパネルの間にある程度のスペースがあることを確認します。
   
5. 新しい ListBox を強調表示し、次のプロパティの値を変更します。
   

ドラッグ アンド ドロップ イベントを追加する方法

Windows フォーム アプリケーションでイベントを使用して、特定のイベントが発生した場合にのみ特定の機能を実行できます。

ドラッグ アンド ドロップ パネルに機能を追加するには、2 つのイベントを追加する必要があります。パネル上でファイルをドラッグすると、「DragEnter」イベントが発生します。マウスを放してファイルをパネルにドロップすると、「DragDrop」イベントが発生します。

1. 外側のパネルの UI 要素を強調表示します。
   
2. プロパティ ウィンドウで、Lighteningアイコンをクリックしてイベント リストを開きます。
   
3. DragEnterイベントをダブルクリックして、新しい関数を生成します。この関数は、ファイルをパネル上にドラッグすると実行されます。
   
4. 新しい関数内で、マウスのアイコンを変更してドラッグ/ドロップ アクションを示します。 private void dragDropPanel_DragEnter(object sender, DragEventArgs e)
{
    // Changes the icon of the mouse
    e.Effect = DragDropEffects.All;
}
5. Visual Studio ウィンドウの上部にあるForm 1.cs [デザイン]タブをクリックして、キャンバス ビューに戻ります。パネル UI 要素を強調表示します。
   
6. プロパティ ウィンドウで、Lighteningアイコンをクリックしてイベント リストに戻ります。今回は、DragDropイベントをダブルクリックします。これにより、マウスを放してファイルをパネルにドロップしたときに実行される別の関数が生成されます。
   
7. 新しい DragDrop 関数内で、ユーザーがパネルにドラッグしているファイルのリストを取得します。これは、関数に自動的に渡されるイベントの詳細で確認できます。 private void dragDropPanel_DragDrop(object sender, DragEventArgs e)
{
    string[] files = (string[])e.Data.GetData(DataFormats.FileDrop, false);
}

ドラッグしたファイルの一覧を表示する方法

ユーザーがファイルをドラッグ アンド ドロップする機能を追加したので、ListBox UI 要素を使用してファイルの名前を表示できます。

1. dragDropPanel_DragDrop() 関数内で、ファイルのリストを取得した後、for ループを使用して各ファイルをループします。 foreach (var file in files)
{


   }

2. for ループ内では、ファイルの名前のみを取得します。ファイルの名前をファイル パスから分離し、別の変数に格納します。Mac を使用している場合は、バックスラッシュの代わりにスラッシュを考慮するようにコードを変更する必要がある場合があります。 string fileName = file.Substring(file.LastIndexOf("\\") + 1, file.Length - (file.LastIndexOf("\\") + 1));
3. ファイルの名前を ListBox UI 要素に追加します。 try
{
    uploadedFilesList.Items.Add(fileName);
}
catch (Exception exception)
{
    Console.WriteLine(exception);
}
4. ListBox はデフォルトでは表示されません。for ループの後、ListBox の可視性を true に変更します。 uploadedFilesList.Visible = true;
5. ファイルの先頭にあるコンストラクターを変更します。ドラッグ アンド ドロップ パネルの AllowDrop プロパティと AutoScroll プロパティを true に設定します。 public Form1()
{
    InitializeComponent();
    dragDropPanel.AllowDrop = true;
    dragDropPanel.AutoScroll = true;
}

リストをクリアする方法

ユーザーがアイテムをパネルにドラッグした後、リストをクリアして最初からやり直したい場合があります。ユーザーがクリックしたときにリストをクリアするボタンを追加できます。

1. ツールボックスを使用して、ボタンをキャンバスにドラッグします。
   
2. ボタンを強調表示します。プロパティ ウィンドウを使用して、次のプロパティを新しい値に変更します。
   
3. ボタンをダブルクリックして、新しい関数を生成します。実行時にボタンをクリックすると、この関数が実行されます。 private void clearButton_Click(object sender, EventArgs e)
{


   }

4. 関数内で、ListBox UI 要素の内容をクリアして非表示にします。 private void clearButton_Click(object sender, EventArgs e)
{
    uploadedFilesList.Items.Clear();
    uploadedFilesList.Visible = false;
}

ドラッグ アンド ドロップ パネルをテストする方法

ドラッグ アンド ドロップ機能をテストするには、アプリケーションを実行し、いくつかのファイルをパネルにドラッグします。必要に応じて、実行時に Visual Studio で Winforms アプリケーションをデバッグすることもできます。これは、コードの各行で何が起こっているかを理解するのに役立ちます。

1. Visual Studio ウィンドウの上部にある緑色の再生ボタンを押して、アプリケーションを実行します。
   
2. ファイル エクスプローラーからいくつかのファイルをドラッグし、パネルにドロップします。Visual Studio を管理者モードで実行していないことを確認してください。管理者モードでドラッグ アンド ドロップを機能させるには、追加のセキュリティ アクセス許可を構成する必要があります。
   
3. パネルが更新され、パネルにドラッグしたファイルの名前が表示されます。
   
4. 十分な数のファイルをドラッグすると、ドラッグ アンド ドロップ パネルの右側にスクロールバーが自動的に表示されます。
   
5. Clearボタンをクリックして、リストを空にします。
   

Windows フォーム アプリでのドラッグ アンド ドロップ機能の使用

これで、Windows フォーム アプリケーションにドラッグ アンド ドロップ機能を追加する方法が理解できたと思います。Windows フォームで興味深いことを行うために探索できる機能は他にもたくさんあります。