Chapter 32

ステップ8-3: もうひと手間

Apterygiformes-zenn
Apterygiformes-zenn
2021.12.30に更新

画面へのドラッグ&ドロップ

概要

画面の特定の場所に画像をドロップしてもファイルを開けるようにします。

コントロールの配置・設定

ドロップ用の領域を配置するためにWindow直下のコントロールをGridにします。
ドキュメントアウトラインでStackPanelを右クリックし、グループに含める > Gridを選択します。

これでStackPanelが、新しく追加されたGridの中に入ります。

Gridを2行にします。

Gridの下の行にTextBoxをドラッグ&ドロップします。

TextBoxBackgroundプロパティを設定します。
R168で、GB255です。

TextBoxに以下のプロパティを設定します。

プロパティ 設定値
Text ここに画像ファイルをドロップしても開けます
TextWrapping NoWrap
Margin(左) 10
Margin(上) 0
Margin(右) 10
Margin(下) 10

TextBoxに以下のプロパティを設定します。

プロパティ 設定値
HorizontalContentAlignment Center
VerticalContentAlignment Center

IsReadOnlyをONにします。

BorderThicknessの右端のを選択します。

カスタム式を選択します。

0を入力してEnterを押します。

これでTextBoxの縁の線がなくなりました。

FocusableをOFFにし、TAB移動でフォーカスが来ないようにします。

全体的なレイアウトの調整

WindowHeight200に修正します。

Gridの1行目をAutoに設定します。

ロジックの記述

TextBoxPreviewDragOverイベントの処理を書きます。
ドラッグ対象がTextBox上に来た時の処理です。

// マウスカーソルをコピー中の絵に変更
e.Effects = DragDropEffects.Copy;
// ドラッグ中のオブジェクトがファイルの場合に受け付ける
e.Handled = e.Data.GetDataPresent(DataFormats.FileDrop);

TextBoxDropイベントの処理を書きます。

// ドロップしたファイル一覧を取得
if (e.Data.GetData(DataFormats.FileDrop) is not string[] dropFiles)
{
    return;
}

foreach (string file in dropFiles)
{
    // 画像表示
    ShowImage(file);
}

EXEへのドラッグ&ドロップ

App.xamlからStartupイベントハンドラを作成します。

コマンドライン引数を保存しておきます。

App.xaml.cs
/// <summary>
/// コマンドライン引数
/// </summary>
public static string[]? CommandLines { get; private set; }

private void Application_Startup(object sender, StartupEventArgs e)
{
    CommandLines = e.Args;
}

MainWindowLoadedのイベントハンドラを作成し、以下を入力します。

MainWindow.xaml.cs
// コマンドライン引数があるか確認
if (App.CommandLines?.Any() == true)
{
    foreach (string item in App.CommandLines)
    {
        // 画像表示
        ShowImage(item);
    }
}

マウスホイールで拡大/縮小

画像ウィンドウの上でマウスホイールを回すと拡大/縮小できるようにします。

ImageWindow.xamlWindowMinWidthMinHeight150を設定します。

ImageWindow.xaml.csに以下のメソッドを作成します。

ImageWindow.xaml.cs
/// <summary>
/// ウィンドウサイズ拡大/縮小
/// </summary>
/// <param name="zoom">true:拡大、 false:縮小</param>
private void ChangeWindowSize(bool zoom)
{
    // 一度に拡大/縮小する単位
    const double ZoomRate = 0.1;

    int sign = zoom ? 1 : -1;

    // ウィンドウサイズ変更
    Height += (Height * ZoomRate) * sign;
    Width += (Width * ZoomRate) * sign;

    // ウィンドウサイズが小さくなりすぎた場合、最小値に設定
    if (Height < MinHeight ||
        Width < MinWidth)
    {
        Height = MinHeight;
        Width = MinWidth;
    }
}

WindowMouseWheelイベントハンドラを作成し、以下を入力します。

ImageWindow.xaml.cs
// ウィンドウサイズ拡大/縮小
ChangeWindowSize(e.Delta > 0);

実行

実行してみます。
画像ファイルをメイン画面の下の部分にドラッグ&ドロップします。

画像を開くボタンの時と同じように画像が表示されました。

画像ウィンドウの上でマウスホイールを回してみます。
手前(下)に回転させると縮小、奥(上)に回転させると拡大します。

メイン画面を広げてみます。
ドラッグ&ドロップエリアがウィンドウサイズに合わせて広がりました。

デバッグ実行を終了し、EXEに直接、画像をドラッグ&ドロップしてみます。

メイン画面と画像が表示されました。

復習ポイント

  • 親のコンテナコントロールを後から追加する
  • ドラッグ&ドロップ
  • コマンドライン引数
  • マウスホイール イベント