実践！Windowsアプリを作る

「第3章 機能更新」の"AboutBox"ではウィンドウベースのダイアログボックスを作成しました。
基本的にはWindowクラスを継承し、"ShowDialog"メソッドによりモーダルダイアログとして表示していました。

今回のMaterialDesignThemesを使用したメッセージボックスはユーザーコントロールをベースとして作成します。
表示はMaterialDesignThemes.Wpf.DialogHostクラスの"Show"メソッドで行います。

と云う訳でメッセージを表示するユーザーコントロールを作成して行きます。

1. 「ソリューションエクスプローラー」の"CopyFilesWithSpecifiedName"プロジェクトを右クリック
2. “追加"→"ユーザーコントロール(WPF)…"を選択
3. 「新しい項目の追加」ウィンドウで"名前"に"ErrorDialog"と入力し"追加"ボタンをクリック

追加するユーザーコントロールの最終的なデザインは以下のようになります。

“ErrorDialog.xaml"ファイルが追加されていますので内容を以下のように変更します。

<UserControl x:Class="CopyFilesWithSpecifiedName.ErrorDialog"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:CopyFilesWithSpecifiedName"
             mc:Ignorable="d"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             d:DesignHeight="200" d:DesignWidth="400">
    <materialDesign:Card>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <StackPanel x:Name="InfoPanel" Orientation="Horizontal" HorizontalAlignment="Left" Margin="10,10,0,5" Visibility="Hidden">
                <materialDesign:PackIcon Kind="MessageAlertOutline" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Center" Width="48" Height="48" Foreground="#DD0000FF" Margin="0,0,5,0" />
                <Label Content="Infomation" Margin="5,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="#DD0000FF" FontSize="48"/>
            </StackPanel>
            <StackPanel x:Name="WarningPanel" Orientation="Horizontal" HorizontalAlignment="Left" Margin="10,10,0,5" Visibility="Hidden">
                <materialDesign:PackIcon Kind="Alert" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Center" Width="48" Height="48" Foreground="#DDFFFF00" Margin="0,0,5,0" />
                <Label Content="Warning" Margin="5,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="#DDFFFF00" FontSize="48"/>
            </StackPanel>
            <StackPanel x:Name="ErrorPanel" Orientation="Horizontal" HorizontalAlignment="Left" Margin="10,10,0,5" Visibility="Hidden">
                <materialDesign:PackIcon Kind="AlertDecagram" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Center" Width="48" Height="48" Foreground="#DDFF0000" Margin="0,0,5,0" />
                <Label Content="Error" Margin="5,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="#DDFF0000" FontSize="48"/>
            </StackPanel>
            <TextBlock x:Name="Message" TextWrapping="Wrap" Text="TextBlock" Cursor="Hand" Grid.Row="1" Margin="60,5,60,5"/>
            <Button x:Name="OKButton" Content="OK" HorizontalAlignment="Right" Margin="0,5,10,10" Grid.Row="2" VerticalAlignment="Bottom" Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}"/>
        </Grid>
    </materialDesign:Card>
</UserControl>

先ず、MaterialDesignThemesを使用しますので、<UserControl>タグの"xmlns:materialDesign"属性に"http://materialdesigninxaml.net/winfx/xaml/themes"を設定しています。

次に、ウィンドウを3段に分け、

1. 上段: アイコンと"Infomation", “Warning"もしくは"Error"の表示
2. 中段: メッセージ
3. 下段: OKボタン

を配置します。

<UserControl>直下に<materialDesign:Card>を配置し、その下に<Grid>を置くようにする事でメッセージボックスをMaterialDesignThemesのカード型にする事にしました。

上段: アイコンと表示

中段: メッセージ

下段: OKボタン

“ErrorDialog.xaml.cs"ファイルにUserControlクラスを継承したErrorDialogクラスが作成されています。

それを以下のように変更します。

public partial class ErrorDialog : UserControl
{
    public enum Type
    {
        Error,
        Warning,
        Info,
    }

    public ErrorDialog(string message, Type type = Type.Error)
    {
        InitializeComponent();

        Message.Text = message;

        if (type == Type.Warning)
        {
            WarningPanel.Visibility = Visibility.Visible;
        }
        else if (type == Type.Info)
        {
            InfoPanel.Visibility = Visibility.Visible;
        }
        else
        {
            ErrorPanel.Visibility = Visibility.Visible;
        }
    }
}

コンストラクタで表示するメッセージと"Infomation"と"Warning", “Error"の区別を指定します。

なお、"Infomation"と"Warning", “Error"の区別のために列挙子Typeを規定しています。

MaterialDesignThemesのダイアログを使用するためには、ダイアログを呼び出す側のXAMLにも追加の設定が必要です。

“MainWindow.xaml"ファイルの<Window>もしくは<mah:MetroWindow>タグの子要素の<Grid>を囲むように<materialDesign:DialogHost>タグを設置します。

<mah:MetroWindow x:Class="CopyFilesWithSpecifiedName.MainWindow"
            :
            :
        Title="CopyFilesWithSpecifiedName" Height="450" Width="800" ShowCloseButton="False">
            :
            :
    <materialDesign:DialogHost>
        <Grid>
            :
            :
        </Grid>
    </materialDesign:DialogHost>
</mah:MetroWindow>

なお、<materialDesign:DialogHost>タグの属性"CloseOnClickAway"に"True"を設定すると、表示されたダイアログボックスをマウスクリックするだけで閉じる事ができるようになります。
今回はOKボタンをクリックするとダイアログボックスを閉じるようにしているので"CloseOnClickAway"属性は設定していません。

<materialDesign:DialogHost>タグを設定したウィンドウでは、そのクラスメソッド中でDialogHostクラスの"Show"メソッドをコールする事でダイアログを表示する事ができます。

なお"Show"メソッドの引数には作成したユーザーコントロールのインスタンスを指定します。

例えば"MainWindow.xaml.cs"ファイル中のMainWindowクラスのメソッド"CopyButton_Click"は、以前にMahApps.Metroを使用して表示していたメッセージボックスの部分を以下のように変更します。

private async void CopyButton_Click(object sender, RoutedEventArgs e)
{
    CopyButton.IsEnabled = false;
    var rc = fileList.CopyFiles();
    if (rc < 0)
    {
        await DialogHost.Show(new ErrorDialog(fileList.ErrMessage, ErrorDialog.Type.Error));
    }
    else
    {
        await DialogHost.Show(new ErrorDialog("コピーしました。", ErrorDialog.Type.Info));
    }
    CopyButton.IsEnabled = true;
}

更に"FromButton_Clicked"メソッド内でもエラーメッセージを表示する部分がありますので、変更しておきます。

private async void FromButton_Click(object sender, RoutedEventArgs e)
{
    using (var openFolderDialog = new CommonOpenFileDialog()
    {
        Title = "コピー元フォルダを選択してください",
        IsFolderPicker = true,
    })
    {
        if (openFolderDialog.ShowDialog() == CommonFileDialogResult.Ok)
        {
            var sourceDir = openFolderDialog.FileName;
            var rc = fileList.SetSourceDir(sourceDir, ExcludeCheck.IsChecked);
            if (rc == FileList.Code.NG)
            {
                await DialogHost.Show(new ErrorDialog(fileList.Message, ErrorDialog.Type.Error));
            }
            else
            {
                FromTextBox.Text = sourceDir;
                // コピーするファイルがない場合もCopyボタンは無効
                CopyButton.IsEnabled = ((rc == FileList.Code.OK) && (fileList.FileNameList.Count > 0));
            }
        }
    }
}

ここまでのコードについては、こちらを参照して下さい。

表示するプログレスバーについてはメッセージボックスの作成と同様にユーザーコントロールで作成します。

1. 「ソリューションエクスプローラー」の"CopyFilesWithSpecifiedName"プロジェクトを右クリック
2. “追加"→"ユーザーコントロール(WPF)…"を選択
3. 「新しい項目の追加」ウィンドウで"名前"に"FileCopyProgress"と入力し"追加"ボタンをクリック

メッセージボックスのデザインと同様、XAMLを使用してデザインしていきます。

最終的なデザインは以下のようになります。

“FileCopyProgress.xaml"ファイルは以下のようにします。

<UserControl x:Class="CopyFilesWithSpecifiedName.FileCopyProgress"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:CopyFilesWithSpecifiedName"
             mc:Ignorable="d"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             d:DesignHeight="200" d:DesignWidth="400">
    <materialDesign:Card>
        <Grid>
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,10,10,10">
                <StackPanel Cursor="" Orientation="Horizontal" HorizontalAlignment="Center">
                    <Label x:Name="FileNameLabel" Content="Label" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <Label Content="をコピーしています。" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </StackPanel>
                <StackPanel Cursor="" Orientation="Horizontal" HorizontalAlignment="Center">
                    <ProgressBar x:Name="CircleProgress" IsIndeterminate="True" Style="{StaticResource MaterialDesignCircularProgressBar}" Value="0" />
                    <ProgressBar x:Name="FileCopiedProgress" Margin="10,20,20,20" Width="300" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </StackPanel>
                <Button x:Name="CancelButton" Content="Cancel" HorizontalAlignment="Center" VerticalAlignment="Center" Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}"/>
            </StackPanel>
        </Grid>
    </materialDesign:Card>
</UserControl>

先ず、MaterialDesignThemesを使用しますので<UserControl>タグの属性"xmlns:materialDesign"に"http://materialdesigninxaml.net/winfx/xaml/themes"’を設定しています。

その後、<StackPanel>を用いて上段にファイル名、中段にプログレスバーを2つ、下段にキャンセルボタンを配置します。

なお、メッセージボックスの場合と同様に全体を<materialDesign:Card>で囲っています。

プログレスバー

キャンセルボタン

プログレスバーダイアログのクラスは"FileCopyProgress.xaml.cs"ファイル内にUserControlを継承したクラスFileCopyProgressとして定義されます。

public partial class FileCopyProgress : UserControl
{
    public FileCopyProgress()
    {
        InitializeComponent();

        timer.Elapsed += TimerEvent;
    }

    public void SetFileNameProgress(string fileName, int value)
    {
        this.Dispatcher.Invoke(new Action(() =>
        {
            FileNameLabel.Content = fileName;
            FileCopiedProgress.Value = value;
            CircleProgress.Value = value;
        }));
    }
}

プログレスバーダイアログに表示するファイル名とプログレスバーの進捗状況を示す値をアップデートするためのメソッド"SetFileNameProgress"を追加しています。

このメソッドは後ほどファイルコピー中にFileListクラスのメソッド"CopyFiles"からコールされるようにします。
なのでUIの操作はディスパッチャーに登録して任せています。

ディスパッチャーを経由せず、直接、UIを操作しようとすると例外が発生して「スレッドが違う!!」と怒られます。

ディスパッチャー経由で操作を行うには、UserControlクラスの"Dispatcher"プロパティの"Invoke"メソッドにデリゲート(ここではAction)を指定してコールします。
デリゲート内には実行したい操作を記述します。

Fileクラスの"Copy"メソッドはファイルのコピーが終了するまでアプリケーションを止めてしまっています。
なので、先ずファイルをコピーする部分を非同期にし、アプリケーションを止めないようにします。

“FileList.cs"ファイル内、FileListクラスの"CopyFiles"メソッドについてFileクラスの"Copy"メソッドをコールしている部分をStreamクラスの"CopyToAsync"メソッドに置き換えます。

なお、コピーしているファイル名とコピーの進捗状況をプログレスバーに表示するため、引数にプログレスバーダイアログのオブジェクトを設定できるようにします。
更に、途中でFileCopyProgressクラスの"SetFileNameProgress"メソッドをコールしています。

public async Task<Code> CopyFiles(FileCopyProgress progress)
{
    Code result = Code.OK;
    int fileCount = 0;

    // コピー先フォルダの指定がない場合はコピー元フォルダにコピー
    var dir = (TargetDir == "") ? SourceDir : TargetDir;

    foreach (var file in FileNameList)
    {
        var targetFileName = Path.Join(dir, file.ToFile);

        progress.SetFileNameProgress(Path.GetFileName(file.FromFile), (++fileCount * 100 / FileNameList.Count));

        try
        {
            using (var source = File.OpenRead(file.FromFile))
            {
                using (var target = File.Open(targetFileName, FileMode.CreateNew))
                {
                    await source.CopyToAsync(target).ConfigureAwait(false);
                }
            }
        }
        catch (IOException)
        {
            // ファイルが既に存在する等のエラーはそのまま続行する
            continue;
        }
        catch (Exception e)
        {
            Message = e.Message;
            result = Code.NG;
            break;
        }
    }

    return result;
}

ファイルのコピーについては、先ずコピー元のファイルとコピー先のファイルをusingを使用してオープンします。
コピー先のファイルは上書きをしないために"FileMode.CreateNew"を用いてオープンします。

Streamクラスの"CopyToAsync"メソッドは非同期ですのでawaitを用いてメソッドの完了を待ちます。
“ConfigureAwait(false)"はデッドロック回避のためのおまじないです。
通常は無くても構いませんが念のため…。

内部で非同期メソッドを使用しているため"CopyFiles"メソッドの戻り値をCodeからTask<Code>に変更しasyncを付加します。

ファイルコピーの非同期化を行い、アプリケーションがフリーズする事は防止できるようになりました。
これで一応ファイルコピー中でもCloseボタンをクリックすればアプリケーションを終了する事ができます。

ただ、ファイルコーピーを無理やりキャンセルしている状態なので決して良い事ではありません。

なので"CopyFiles"メソッドにコードを更に追加しファイルコピーをキャンセルできるようにします。

ファイルコピーのキャンセルを行うには、先ず、"FileList.cs"ファイル内、FileListクラスの"CopyFiles"メソッドについてStreamクラスの"CopyToAsync"メソッドの第２引数にCancellationTokenSourceクラスの"Token"プロパティをセットします。
キャンセル時には、CancellationTokenSourceクラスの"Cancel"メソッドを外部からコールします。

なお、ファイルコピーをキャンセルした際にはStreamクラスの"CopyToAsync"メソッドは例外を発生します。
更にCancellationTokenSourceクラスの"IsCancellationRequested"プロパティが"true"にセットされます。

public enum Code
{
    OK,
    NG,
    Cancel,
}
    :
    :
private CancellationTokenSource? tokenSource = null;
private readonly object balanceLock = new object();
        :
        :
public async Task<Code> CopyFiles(FileCopyProgress progress)
{
    Code result = Code.OK;
    int fileCount = 0;

    // コピー先フォルダの指定がない場合はコピー元フォルダにコピー
    var dir = (TargetDir == "") ? SourceDir : TargetDir;

    lock (balanceLock)
    {
        tokenSource = new CancellationTokenSource();
    }

    foreach (var file in FileNameList)
    {
        var targetFileName = Path.Join(dir, file.ToFile);

        progress.SetFileNameProgress(Path.GetFileName(file.FromFile), (++fileCount * 100 / FileNameList.Count));

        try
        {
            using (var source = File.OpenRead(file.FromFile))
            {
                using (var target = File.Open(targetFileName, FileMode.CreateNew))
                {
                    await source.CopyToAsync(target, tokenSource.Token).ConfigureAwait(false);
                }
            }
        }
        catch (IOException)
        {
            // ファイルが既に存在する等のエラーはそのまま続行する
            continue;
        }
        catch (Exception e)
        {
            Message = e.Message;
            result = tokenSource.IsCancellationRequested ? Code.Cancel : Code.NG;
            break;
        }
    }

    lock (balanceLock)
    {
        tokenSource.Dispose();
        tokenSource = null;
    }

    return result;
}

public void CancelCopy()
{
    lock (balanceLock)
    {
        tokenSource?.Cancel();
    }
}

CancellationTokenSourceクラスの"Cancel"メソッドを外部からコールするため、新たに"CancelCopy"メソッドを追加しています。

また、CancellationTokenSourceクラスのインスタンス操作時にはタスク切り換え等による不整合が起きないようlockステートメントによる排他処理を行っています。

更に"MainWindow.xaml.cs"ファイル内、MainWindowクラスの"CopyButton_Click"メソッドで"CopyFiles"メソッドをコールしている部分について、ファイルのコピーを開始すると共にプログレスバーダイアログの表示を行うように変更します。

なお、内部で非同期メソッドを使用しているため宣言部分にasyncを付加します。

private async void CopyButton_Click(object sender, RoutedEventArgs e)
{
    CopyButton.IsEnabled = false;

    var progress = new FileCopyProgress();
    var copyTask = fileList.CopyFiles(progress);
    var progressTask = DialogHost.Show(progress);

    var taskDone = await Task.WhenAny(copyTask, progressTask);

    if (taskDone == progressTask)
    {
        fileList.CancelCopy();
        await copyTask;
        await DialogHost.Show(new ErrorDialog("キャンセルされました。", ErrorDialog.Type.Warning));
    }
    else
    {
        DialogHost.Close(null);
        await progressTask;

        var rc = copyTask.Result;
        if (rc == FileList.Code.NG)
        {
            await DialogHost.Show(new ErrorDialog(fileList.Message, ErrorDialog.Type.Error));
        }
        else
        {
            await DialogHost.Show(new ErrorDialog("コピーしました。", ErrorDialog.Type.Info));
        }
    }

    CopyButton.IsEnabled = true;
}

主にvar rc = await fileList.CopyFiles();としていた部分を変更します。

先ず、プログレスバーを表示するためのユーザーコントロールFileCopyProgressクラスのオブジェクトを作成します。
次に、作成したFileCopyProgressクラスのオブジェクトを引数にしてFileListクラスの"CopyFiles"メソッドをコールします。

通常であれば"CopyFiles"メソッドは非同期処理なのでメソッドの前にawaitを付加して処理の完了を待つのですが、今回は同時にプログレッシブバーダイアログの表示を行いたいので、awaitは付加せず、すぐ次の処理に移るようにします。

次の処理では、作成してあるFileCopyProgressクラスのオブジェクトを引数にしてDialogHostクラスの"Show"メソッドをコールします。
この処理も非同期処理ですがawaitを付加せず、すぐ次の処理に移るようにします。

“CopyFiles"メソッドおよび"Show"メソッドのタスクの終了はTaskクラスの"WhenAny"メソッドを使用して確認します。
“WhenAny"メソッドは、引数に指定したタスクの何れかが終了するのを待つためのタスクを作成、実行します。
なので、awaitを付加するとタスクの終了時には終了したタスクが返ります。

返ったタスクを確認する事でプログレスバー表示のキャンセルボタンがクリックされたか、ファイルコピーが終了したかの区別が付きます。

プログレスバー表示のキャンセル時

ファイルコピー終了時

ClickOnceによるインストーラー作成のため以下のように設定を行います。

1. 「ソリューションエクスプローラー」の"CopyFilesWithSpecifiedName"プロジェクトを右クリック
2. “発行…"を選択
   
3. 「公開」ウィンドウの"ターゲット"で"ClickOnce"を選択し"次へ"をクリック
   
4. 「公開」ウィンドウの"発行場所"はそのままでOKなので"次へ"をクリック
   
5. 「公開」ウィンドウの"インストール場所"は"CD、DVD、またはUSBドライブから"を選択し"次へ"をクリック
   
6. 「公開」ウィンドウの"設定"で"オプション"をクリック
   
7. 「発行オプション」ウィンドウの"説明"で"発行者名"等の欄を適当に記入した後"OK"をクリック
   なお"説明"以外はデフォルトでOK
   
8. 「公開」ウィンドウの"マニュフェストの署名"はそのままでOKなので"次へ"をクリック
   
9. 「公開」ウィンドウの"構成"は以下の設定を確認後"完了"をクリック
   

• 構成: Release|AnyCPU
• ターゲットフレームワーク: net6.0-windows
• 配置モード: フレームワーク依存
• ターゲットランタイム: 移植可能

以上で"発行プロファイル…が作成されました。"と表示されればOKです。
“閉じる"をクリックしてウィンドウを閉じます。

「CopyFilesWithSpecifiedName.csprj:公開」ウィンドウの"発行"をクリックするとリリース版のビルドが行われます。

発行場所"bin\publish\"フォルダ内に"setup.exe"と共にインストールに必要なファイルが作成されます。

他のWindows PCにアプリケーションをインストールする場合には"bin\publish\"以下のファイルを全てコピーし、"setup.exe"を実行します。

リリースしたインストーラーはこちらからダウンロードできます。

先ずは表示するダイアロボックスを作成します。

とは云え、ダイアログボックスと通常のウィンドウは同じ手順で作成できます。
基本的には、Windowクラスを継承したクラスを新規に作成し、インスタンスを作成後、"ShowDialog"メソッドでダイアログボックスを表示します。

クラス作成は以下のようにします。

1. 「ソリューションエクスプローラー」で"CopyFilesWithSpecifiedName"を右クリック
2. “追加"→"ウィンドウ(WPF)…"を選択
3. 「新しい項目の追加」で"ウィンドウ(WPF)"が選択されているのを確認
4. “名前:"に"AboutBox"と記入し、"追加"ボタンをクリック

“AboutBox"のデザインは"MainWindow"と同様に"AboutBox.xaml"ファイルで行います。

なお、ダイアログボックスですのでタイトルバーは表示しません。
ですので、MahApps.Metroを使用せず、MaterialDesignThemesのみを使用します。

最終的な"AboutBox"は以下のようにします。

“AboutBox.xaml"は以下のようになります。

<Window x:Class="CopyFilesWithSpecifiedName.AboutBox"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CopyFilesWithSpecifiedName"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:System="clr-namespace:System;assembly=System.Runtime"
        mc:Ignorable="d"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Medium"
        TextElement.FontSize="14"
        FontFamily="{materialDesign:MaterialDesignFont}"
        WindowStyle="None" ResizeMode="NoResize" Background="Transparent" AllowsTransparency="True"
        MouseLeftButtonDown="Window_MouseLeftButtonDown" Loaded="Window_Loaded"
        Title="AboutBox" Height="480" Width="640">
    <Border BorderBrush="Black" BorderThickness="1" CornerRadius="10,10,10,10" Background="White">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid Margin="10,10,10,7">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <materialDesign:PackIcon Kind="ContentCopy" HorizontalAlignment="Center" VerticalAlignment="Center" Width="32" Height="32" Foreground="BlueViolet"/>
                <TextBlock Style="{StaticResource MaterialDesignHeadline4TextBlock}" Text="CopyFilesWithSpecifiedName" Grid.Column="1" Margin="10,0,0,0" Foreground="BlueViolet"/>
            </Grid>
            <Grid Grid.Row="1" Margin="10,5,10,5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Label Content="詳細: "/>
                <TextBlock TextWrapping="Wrap" Grid.Column="1"><Run Text="指定したフォルダ内のファイルをコピーします。"/><LineBreak/><Run Text="コピーする際のファイル名は&quot;指定のファイル名+連番.拡張子&quot;となります。"/><LineBreak/><Run Text="コピー先のフォルダは選択できます。"/><LineBreak/><Run Text="コピー先のフォルダを指定しない場合、コピー元のフォルダにコピーします。"/></TextBlock>
                <TextBlock Text="バージョン : 1.0.0" Grid.Row="1" MinWidth="3" Grid.ColumnSpan="2"/>
                <TextBlock Text="ライセンス : MIT" Grid.Row="2" Grid.ColumnSpan="2"/>
                <TextBlock Text="Copyright (c) 2023 Yoshimasa Awata" Grid.Row="3" Grid.ColumnSpan="2"/>
                <Label Content="使用しているパッケージ :" Margin="0,10,0,1" Grid.Row="4" Grid.ColumnSpan="2" />
                <Button x:Name="LicenseButton" Content="ライセンス表示" Grid.Row="4" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10,0,10,5"
                    Style="{StaticResource MaterialDesignRaisedLightButton}" FontSize="9" Click="LicenseButton_Click"/>
                <materialDesign:Card Grid.Row="5" Grid.ColumnSpan="2" Cursor="">
                    <ListView x:Name="PackageList" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionChanged="PackageList_SelectionChanged">
                        <ListView.View>
                            <GridView>
                                <GridView.ColumnHeaderContainerStyle>
                                    <Style TargetType="{x:Type GridViewColumnHeader}">
                                        <Setter Property="Background" Value="LightBlue"/>
                                    </Style>
                                </GridView.ColumnHeaderContainerStyle>
                                <GridViewColumn x:Name="PackageColumn" Header="パッケージ" DisplayMemberBinding="{Binding Name}"/>
                                <GridViewColumn x:Name="LicenseColumn" Header="ライセンス" DisplayMemberBinding="{Binding License}" Width="100"/>
                            </GridView>
                        </ListView.View>
                    </ListView>
                </materialDesign:Card>
                <TextBlock x:Name="AlartTextBox" Grid.Row="6" Grid.ColumnSpan="2" Foreground="Red"/>
            </Grid>
            <Button x:Name="OKButton" Content="OK" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5,5,10,10"
            Style="{StaticResource MaterialDesignRaisedLightButton}" Click="OKButton_Click"/>
        </Grid>
    </Border>
</Window>

AboutBoxのMaterialDesignThemes使用準備

<Window x:Class="CopyFilesWithSpecifiedName.AboutBox"
            :
            :
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Medium"
        TextElement.FontSize="14"
        FontFamily="{materialDesign:MaterialDesignFont}"
        Title="AboutBox" Height="480" Width="640">
    <Grid>
        :
        :
    </Grid>
</Window>

AboutBoxのタイトルバー削除

<Window x:Class="CopyFilesWithSpecifiedName.AboutBox"
            :
            :
        WindowStyle="None" ResizeMode="NoResize"
        MouseLeftButtonDown="Window_MouseLeftButtonDown"
        Title="AboutBox" Height="480" Width="640">
    <Grid>
            :
            :
    </Grid>
</Window>

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if (e.ButtonState == MouseButtonState.Pressed)
    {
        this.DragMove();
    }
}

AboutBoxの枠線とコーナー追加

<Window x:Class="CopyFilesWithSpecifiedName.AboutBox"
            :
            :
        Title="AboutBox" Height="480" Width="640">
    <Border BorderBrush="Black" BorderThickness="1" CornerRadius="10,10,10,10" Background="White">
        <Grid>
            :
            :
        </Grid>
    </Border>
</Window>

AboutBoxのアイコンとアプリケーション名

<materialDesign:PackIcon Kind="ContentCopy" HorizontalAlignment="Center" VerticalAlignment="Center" Width="32" Height="32" Foreground="BlueViolet"/>

<TextBlock Style="{StaticResource MaterialDesignHeadline4TextBlock}" Text="CopyFilesWithSpecifiedName" Grid.Column="1" Margin="10,0,0,0" Foreground="BlueViolet"/>

AboutBoxの複数行文字列

<Hyperlink NavigateUri="https://www.google.com/" RequestNavigate="Hyperlink_RequestNavigate">Google</Hyperlink>

private void Hyperlink_RequestNavigate(object sender, System.Windows.Navigation.RequestNavigateEventArgs e)
{
    try
    {
        var startInfo = new System.Diagnostics.ProcessStartInfo(e.Uri.ToString());
        startInfo.UseShellExecute = true;
        System.Diagnostics.Process.Start(startInfo);
    }
    catch (System.ComponentModel.Win32Exception noBrowser)
    {
        if (noBrowser.ErrorCode == -2147467259)
        {
            MessageBox.Show(noBrowser.Message);
        }
    }
    catch (System.Exception other)
    {
        MessageBox.Show(other.Message);
    }
}

AboutBoxのパッケージおよびライセンスリスト

public partial class AboutBox : Window
{
    protected class Package
    {
        public string Name { get; set; }
        public string License { get; set; }
        public string Url { get; set; }
    }

    private static readonly ReadOnlyObservableCollection<Package> Packages = new ReadOnlyObservableCollection<Package>(
        new ObservableCollection<Package>() {
        new Package {Name = "WindowsAPICodePack-Core", License = "Custom", Url = "https://github.com/aybe/Windows-API-Code-Pack-1.1/blob/master/LICENCE"},
        new Package {Name = "WindowsAPICodePack-Shell", License = "Custom", Url = "https://github.com/aybe/Windows-API-Code-Pack-1.1/blob/master/LICENCE"},
        new Package {Name = "MahApps.Metro", License = "MIT", Url = "https://github.com/MahApps/MahApps.Metro/blob/develop/LICENSE"},
        new Package {Name = "MahApps.Metro.IconPacks", License = "MIT", Url = "https://github.com/MahApps/MahApps.Metro.IconPacks/blob/develop/LICENSE"},
        new Package {Name = "ControlzEx", License = "MIT", Url = "https://github.com/ControlzEx/ControlzEx/blob/develop/LICENSE"},
        new Package {Name = "Microsoft.Xaml.Behaviors.Wpf", License = "MIT", Url = "https://github.com/microsoft/XamlBehaviorsWpf/blob/master/LICENSE"},
        new Package {Name = "System.Text.Json", License = "MIT", Url = "https://www.nuget.org/packages/System.Text.Json/4.7.2/license"},
        new Package {Name = "MaterialDesignThemes", License = "MIT", Url = "https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/LICENSE"},
        new Package {Name = "MaterialDesignColors", License = "MIT", Url = "https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/LICENSE"},
        new Package {Name = "MaterialDesignThemes.MahApps", License = "MIT", Url = "https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/LICENSE"},
    });

    public AboutBox()
    {
        InitializeComponent();

        PackageList.ItemsSource = Packages;
        PackageList.SelectedIndex = 0;
    }
        :
        :
}

<ListView x:Name="PackageList" Grid.Row="5" Grid.ColumnSpan="2" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
    <ListView.View>
        <GridView>
            <GridViewColumn x:Name="PackageColumn" Header="パッケージ" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn x:Name="LicenseColumn" Header="ライセンス" DisplayMemberBinding="{Binding License}"/>
        </GridView>
    </ListView.View>
</ListView>

<ListView x:Name="PackageList" Grid.Row="5" Grid.ColumnSpan="2" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionChanged="PackageList_SelectionChanged">
    <ListView.View>
        <GridView>
            <GridViewColumn x:Name="PackageColumn" Header="パッケージ" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn x:Name="LicenseColumn" Header="ライセンス" DisplayMemberBinding="{Binding License}"/>
        </GridView>
    </ListView.View>
</ListView>

protected class Package
{
    public string Name { get; set; }
    public string License { get; set; }
    public string Url { get; set; }
}

private static readonly ReadOnlyObservableCollection<Package> Packages = new ReadOnlyObservableCollection<Package>(
    new ObservableCollection<Package>() {
    new Package {Name = "WindowsAPICodePack-Core", License = "Custom", Url = "https://github.com/aybe/Windows-API-Code-Pack-1.1/blob/master/LICENCE"},
    new Package {Name = "WindowsAPICodePack-Shell", License = "Custom", Url = "https://github.com/aybe/Windows-API-Code-Pack-1.1/blob/master/LICENCE"},
    new Package {Name = "MahApps.Metro", License = "MIT", Url = "https://github.com/MahApps/MahApps.Metro/blob/develop/LICENSE"},
    new Package {Name = "MahApps.Metro.IconPacks", License = "MIT", Url = "https://github.com/MahApps/MahApps.Metro.IconPacks/blob/develop/LICENSE"},
    new Package {Name = "ControlzEx", License = "MIT", Url = "https://github.com/ControlzEx/ControlzEx/blob/develop/LICENSE"},
    new Package {Name = "Microsoft.Xaml.Behaviors.Wpf", License = "MIT", Url = "https://github.com/microsoft/XamlBehaviorsWpf/blob/master/LICENSE"},
    new Package {Name = "System.Text.Json", License = "MIT", Url = "https://www.nuget.org/packages/System.Text.Json/4.7.2/license"},
    new Package {Name = "MaterialDesignThemes", License = "MIT", Url = "https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/LICENSE"},
    new Package {Name = "MaterialDesignColors", License = "MIT", Url = "https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/LICENSE"},
    new Package {Name = "MaterialDesignThemes.MahApps", License = "MIT", Url = "https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/LICENSE"},
});

<ListView x:Name="PackageList" Grid.Row="5" Grid.ColumnSpan="2" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionChanged="PackageList_SelectionChanged">
    <ListView.View>
        <GridView>
            <GridView.ColumnHeaderContainerStyle>
                <Style TargetType="{x:Type GridViewColumnHeader}">
                    <Setter Property="Background" Value="LightBlue"/>
                </Style>
            </GridView.ColumnHeaderContainerStyle>
            <GridViewColumn x:Name="PackageColumn" Header="パッケージ" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn x:Name="LicenseColumn" Header="ライセンス" DisplayMemberBinding="{Binding License}" Width="100"/>
        </GridView>
    </ListView.View>
</ListView>

<GridView.ColumnHeaderContainerStyle>
    <Style/>
</GridView.ColumnHeaderContainerStyle>

<Window x:Class="CopyFilesWithSpecifiedName.AboutBox"
            :
            :
         MouseLeftButtonDown="Window_MouseLeftButtonDown" Loaded="Window_Loaded"
        Title="AboutBox" Height="480" Width="640">
    <Border BorderBrush="Black" BorderThickness="1" CornerRadius="10,10,10,10" Background="White">
        <Grid>
            :
            :
        </Grid>
    </Border>
</Window>

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    PackageColumn.Width = PackageList.ActualWidth - LicenseColumn.ActualWidth - SystemParameters.VerticalScrollBarWidth;
}

<Button x:Name="LicenseButton" Content="ライセンス表示" Grid.Row="4"  Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10,0,10,5"
                    Style="{StaticResource MaterialDesignRaisedLightButton}" FontSize="9" Click="LicenseButton_Click"/>

private void LicenseButton_Click(object sender, RoutedEventArgs e)
{
    try
    {
        var startInfo = new System.Diagnostics.ProcessStartInfo(Packages[PackageList.SelectedIndex].Url);
        startInfo.UseShellExecute = true;
        System.Diagnostics.Process.Start(startInfo);
        AlartTextBox.Text = "";
    }
    catch (System.ComponentModel.Win32Exception noBrowser)
    {
        if (noBrowser.ErrorCode == -2147467259)
        {
            AlartTextBox.Text = noBrowser.Message;
        }
    }
    catch (System.Exception other)
    {
        AlartTextBox.Text = other.Message;
    }
}

<TextBlock x:Name="AlartTextBox" Grid.Row="6" Grid.ColumnSpan="2" Foreground="Red"/>

private void PackageList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    AlartTextBox.Text = "";
}

<materialDesign:Card Grid.Row="5" Grid.ColumnSpan="2" Cursor="">
    <ListView x:Name="PackageList" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionChanged="PackageList_SelectionChanged">
        <ListView.View>
            <GridView>
                <GridView.ColumnHeaderContainerStyle>
                    <Style TargetType="{x:Type GridViewColumnHeader}">
                        <Setter Property="Background" Value="LightBlue"/>
                    </Style>
                </GridView.ColumnHeaderContainerStyle>
                <GridViewColumn x:Name="PackageColumn" Header="パッケージ" DisplayMemberBinding="{Binding Name}"/>
                <GridViewColumn x:Name="LicenseColumn" Header="ライセンス" DisplayMemberBinding="{Binding License}" Width="100"/>
            </GridView>
        </ListView.View>
    </ListView>
</materialDesign:Card>

AboutBoxのOKボタン

<Button x:Name="OKButton" Content="OK" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5,5,10,10"
    Style="{StaticResource MaterialDesignRaisedLightButton}" Click="OKButton_Click" />

private void OKButton_Click(object sender, RoutedEventArgs e)
{
    this.Close();
}

通常、"AboutBox"は、メニューバーの"Help"以下の"About…"等のコマンドを選択すると表示されます。

ただ、今回のアプリケーションは、ファイルをコピーするだけの単純な機能しかありませんので、メニューを使用したコマンドは必要ありません。
なのでメニューを追加するメリットがありません。

代わりに、タイトルバーにAboutボタンを追加したいと思います。

幸い、MahApps.Metroにはタイトルバーの左右に簡単にボタンを追加する機能が備わっていますので、それを利用します。

“MainWindow.xaml"の<mah:MetroWindow...>タグ直下の子要素として<mah:MetroWindow.RightWindowCommands>タグの要素を追加します。

<mah:MetroWindow x:Class="CopyFilesWithSpecifiedName.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
            :
            :
        Title="CopyFilesWithSpecifiedName" Height="450" Width="800" ShowCloseButton="False">
    <mah:MetroWindow.RightWindowCommands>
        <mah:WindowCommands>
            <Button x:Name="AboutButton" Content="About" Click="AboutButton_Click"/>
        </mah:WindowCommands>
    </mah:MetroWindow.RightWindowCommands>
    <Grid>
        :
        :
    </Grid>
</mah:MetroWindow>

ボタンの要素は複数並べる事ができます。
また、タイトルバーの左にボタンを配置する場合には、<mah:MetroWindow.RightWindowCommands>タグの代わりに<mah:MetroWindow.LeftWindowCommands>タグを使用します。

ボタンの"Click"イベントに対するハンドラ"AboutButton_Click"は以下のようにします。

private void AboutButton_Click(object sender, RoutedEventArgs e)
{
    var about = new AboutBox();
    about.ShowDialog();
}

モーダルダイアログとして表示したいので、AboutBoxクラスのインスタンスを作成し"ShowDialog"メソッドを呼び出します。

ここまでのコードはこちらを参照してください。

基本的なインストール方法はこちらを参照してください。

1. 「ソリューションエクスプローラー」の"CopyFilesWithSpecifiedName"を右クリック
2. “NuGetパッケージの管理…"を選択
3. 「NuGetパッケージマネージャー」で「参照」を選択
4. “MahApps.Metro"を選択し、"インストール"をクリック

MahApps.Metroを使用するためには、先ず、Windowクラスを継承したMainWindowクラスの親クラスをMetroWindowクラスに変更する必要があります。
“MainWindow.xaml.cs"の変更は以下のようにします。

using MahApps.Metro.Controls;

namespace CopyFilesWithSpecifiedName
{
    public partial class MainWindow : MetroWindow
    {
            :
            :
        public MainWindow()
        {
            InitializeComponent();
                :
                :
        }
            :
            :
    }
}

usingディレクティブで"MahApps.Metro.Controls"を指定した上で、MainWindowのクラス宣言でMetroWindowクラスを継承するように指定するだけです。

MahApps.Metroを使用するためには、ウィンドウのデザイン等を指定するXAMLファイル、ここでは"MainWindow.xaml"を変更します。

デフォルトではMainWindowはWindowクラスを継承していましたので、<Window...>タグを使用していました。
MainWindwはMetroWindowを継承するようになりましたのでタグもそれに合わせて変更します。

<mah:MetroWindow x:Class="CopyFilesWithSpecifiedName.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CopyFilesWithSpecifiedName"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        :
        :
    </Grid>
</mah:MetroWindow>

<Window...>タグを<mah:MetroWindow...>タグへと変更し"xmlns:mah"属性に"http://metro.mahapps.com/winfx/xaml/controls"を追加指定します。

最後に、"App.xaml"のMahApps.Metro対応を行います。

<Application.Resources>タグの子要素として以下のような<ResourceDictionary>を追加します。

<Application x:Class="CopyFilesWithSpecifiedName.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:CopyFilesWithSpecifiedName"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

なお、"pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml"の部分でデザインテーマを選択できます。

“Light.Blue"の部分を以下のように指定できます。

前半部分については、"Light"と"Dark"の2種類から選択できます。
後半部分については、"Red", “Green", “Blue", “Purple", “Orange", “Lime", “Emerald", “Teal", “Cyan", “Cobalt", “Indigo", “Violet", “Pink", “Magenta", “Crimson", “Amber", “Yellow", “Brown", “Olive", “Steel", “Mauve", “Taupe", “Sienna"の23種類から選択できます。

とりあえず現時点でMahApps.Metroデザインに変わっているはずです。
実行結果は以下の通りです。

とりあえずはタイトルバーとボーダーに色が付き、ボタンの角が丸みを帯びたデザインに変わっています。
マウスオーバーした際にはフラッシュしたり、ボタンクリック時にはボーダーが太くなったりと、それなりに見栄えが良くなっています。

この時点でのコードはこちらを参照してください。

ただ、ボタン等のコントロール類のデザインは多少良くなった程度なので、もう少し手を加えたいと思います。

基本的なインストール方法はこちらを参照してください。

1. 「ソリューションエクスプローラー」の"CopyFilesWithSpecifiedName"を右クリック
2. “NuGetパッケージの管理…"を選択
3. 「NuGetパッケージマネージャー」で「参照」を選択
4. “MaterialDesignThemes"を選択し、"インストール"をクリック

なお、Material Design In XAML ToolkitとMahApps.Metroを併用する場合には、"MaterialDesignThemes"と同時に"MaterialDesignThemes.MahApps"をインストールします。
因みに"MaterialDesignThemes.MahApps"をインストールすると、"MaterialDesignThemes"と"MahApps.Metro"も同時にインストールしてくれます。

Material Design In XAML Toolkitを使用するためには、ウィンドウのデザイン等を指定するXAMLファイル、ここでは"MainWindow.xaml"を変更します。

基本的には<Window...>タグの属性として以下を追加します。

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
Background="{DynamicResource MaterialDesignPaper}"
TextElement.FontWeight="Medium"
TextElement.FontSize="14"
FontFamily="{materialDesign:MaterialDesignFont}"

MahApps.Metroと併用する場合には、<mah:MetroWindow...>タグの属性として追加します。

<mah:MetroWindow x:Class="CopyFilesWithSpecifiedName.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CopyFilesWithSpecifiedName"
        mc:Ignorable="d"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        Background="{DynamicResource MaterialDesignPaper}"
        TextElement.FontWeight="Medium"
        TextElement.FontSize="14"
        FontFamily="{materialDesign:MaterialDesignFont}"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        :
        :
    </Grid>
</mah:MetroWindow>

<Window...>タグを<mah:MetroWindow...>タグへと変更し"xmlns:mah"属性として"http://metro.mahapps.com/winfx/xaml/controls"を追加指定します。

最後に、"App.xaml"のMaterial Design In XAML Toolkit対応を行います。

先ず、<Application...>タグの"xmlns:materialDesign"属性として “http://materialdesigninxaml.net/winfx/xaml/themes"を追加します。
更に<Application.Resources>タグの子要素として以下のような<ResourceDictionary>を追加します。

<Application x:Class="CopyFilesWithSpecifiedName.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:CopyFilesWithSpecifiedName"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!-- Material Design -->
                <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

更にMahApps.Metroと併用する場合には、MahApps.Metroの<ResourceDictionaryの記述と共にMaterial Design In XAML ToolkitとMahApps.Metroの互換性を保つための指定を追加します。

<Application x:Class="CopyFilesWithSpecifiedName.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:CopyFilesWithSpecifiedName"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!-- MahApps -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <!-- Theme setting -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
                <!-- Material Design -->
                <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <!-- Material Design: MahApps Compatibility -->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Flyout.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <!-- MahApps Brushes -->
            <SolidColorBrush x:Key="HighlightBrush" Color="{DynamicResource Primary700}"/>
            <SolidColorBrush x:Key="AccentBaseColorBrush" Color="{DynamicResource Primary600}" />
            <SolidColorBrush x:Key="AccentColorBrush" Color="{DynamicResource Primary500}"/>
            <SolidColorBrush x:Key="AccentColorBrush2" Color="{DynamicResource Primary400}"/>
            <SolidColorBrush x:Key="AccentColorBrush3" Color="{DynamicResource Primary300}"/>
            <SolidColorBrush x:Key="AccentColorBrush4" Color="{DynamicResource Primary200}"/>
            <SolidColorBrush x:Key="WindowTitleColorBrush" Color="{DynamicResource Primary700}"/>
            <SolidColorBrush x:Key="AccentSelectedColorBrush" Color="{DynamicResource Primary500Foreground}"/>
            <LinearGradientBrush x:Key="ProgressBrush" EndPoint="0.001,0.5" StartPoint="1.002,0.5">
                <GradientStop Color="{DynamicResource Primary700}" Offset="0"/>
                <GradientStop Color="{DynamicResource Primary300}" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="CheckmarkFill" Color="{DynamicResource Primary500}"/>
            <SolidColorBrush x:Key="RightArrowFill" Color="{DynamicResource Primary500}"/>
            <SolidColorBrush x:Key="IdealForegroundColorBrush" Color="{DynamicResource Primary500Foreground}"/>
            <SolidColorBrush x:Key="IdealForegroundDisabledBrush" Color="{DynamicResource Primary500}" Opacity="0.4"/>
            <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.OnSwitchBrush.Win10" Color="{DynamicResource Primary500}" />
            <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.OnSwitchMouseOverBrush.Win10" Color="{DynamicResource Primary400}" />
            <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.ThumbIndicatorCheckedBrush.Win10" Color="{DynamicResource Primary500Foreground}" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

互換性のため、<ResourceDictionary...>は2つだけ追加となりますが、<SolidColorBrush...>等、結構多くの設定の追加が必要です。

とりあえず現時点でMaterial Design In XAML ToolkitとMahApps.Metroを併用したデザインに変わっているはずです。
実行結果は以下の通りです。

とりあえずボタン類に色がついてかなり見栄えが良くなりました。

この時点でのコードはこちらを参照してください。

タイトルバーについてはMahApps.Metroによって色がついて多少は良くなってはいますが、もう少し手を入れていきたいと思います。

タイトル変更

<mah:MetroWindow x:Class="CopyFilesWithSpecifiedName.MainWindow"
            :
            :
        Title="CopyFilesWithSpecifiedName" Height="450" Width="800">
    <Grid>
        :
        :
    </Grid>
</mah:MetroWindow>

クローズボタン

<mah:MetroWindow x:Class="CopyFilesWithSpecifiedName.MainWindow"
            :
            :
        Title="CopyFilesWithSpecifiedName" Height="450" Width="800" ShowCloseButton="False">
    <Grid>
        :
        :
    </Grid>
</mah:MetroWindow>

タイトルバーの色とボタンの色

<Application x:Class="CopyFilesWithSpecifiedName.App"
                  :
                  :
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                    :
                    :
                <!-- Material Design -->
                <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="LightBlue" SecondaryColor="Lime" />
                    :
                    :
            </ResourceDictionary.MergedDictionaries>
                :
                :
        </ResourceDictionary>
    </Application.Resources>
</Application>

Copyボタンが味気ないので、もう少し手を加えてみます。
ボタンの形状を両端が丸くなった形とし、内部にIconと"Copy"の文字を表示します。
ついでにツールチップも表示するようにしましょう。

ボタンの外観はこんな感じにします。

本来、ボタンの形状を変えたりするのはXAMLを使用すれば可能ですし、Iconも自作等を行ってプロジェクトに読み込ませることもできます。
ただ、MaterialDesignThemesに用意されたものを使えば容易ですので、今回はMaterialDesignThemesを使っていきます。

MaterialDesign DemoApp

Copyボタン形状指定

<Grid
  Width="{StaticResource GridWidth}">
  <Button
    Height="{StaticResource ButtonHeight}"
    materialDesign:ButtonAssist.CornerRadius="25"
    IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
    Style="{StaticResource MaterialDesignRaisedDarkButton}"
    ToolTip="MaterialDesignRaisedDarkButton with Round Corners">
    <TextBlock
      Text="25/50 Radius" />
  </Button>
</Grid>

<Button x:Name="CopyButton" Content=" ⇒ " Margin="5,0,5,0" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" IsEnabled="False" Click="CopyButton_Click"
        materialDesign:ButtonAssist.CornerRadius="25"/>

Copyボタンのツールチップの追加

<Button x:Name="CopyButton" Content=" ⇒ " Margin="5,0,5,0" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" IsEnabled="False" Click="CopyButton_Click"
        materialDesign:ButtonAssist.CornerRadius="25"
         ToolTip="ファイルを指定の名前でコピーします。" Cursor=""/>

<Button x:Name="CopyButton" Content=" ⇒ " Margin="5,0,5,0" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" IsEnabled="False" Click="CopyButton_Click"
        materialDesign:ButtonAssist.CornerRadius="25"
         ToolTip="ファイルを指定の名前でコピーします。" ToolTipService.ShowOnDisabled="True" Cursor=""/>

CopyボタンにIconと文字列を追加

<Button x:Name="CopyButton" Margin="5,0,5,0" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" IsEnabled="False" Click="CopyButton_Click"
        materialDesign:ButtonAssist.CornerRadius="25"
         ToolTip="ファイルを指定の名前でコピーします。" ToolTipService.ShowOnDisabled="True" Cursor="">
    <StackPanel Orientation="Horizontal">
        <materialDesign:PackIcon Kind="FileDocumentArrowRightOutline" />
        <TextBlock Text="Copy"/>
    </StackPanel>
</Button>

Closeボタンについては、表示する文字列にIconを追加します。

MaterialDesignThemesの"Icon Pack"から選択しようと思ったのですが、ピンとくるIconが無かったので、MahApps.Metroが提供するIconを使用する事にします。

以下のようなボタンにしたいと思います。

MahApps.Metro.IconPacks

Closeボタン用Iconの選択

MahApps.Metro.IconPacksの適用

<mah:MetroWindow x:Class="CopyFilesWithSpecifiedName.MainWindow"
            :
            :
        xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
        Title="CopyFilesWithSpecifiedName" Height="450" Width="800" ShowCloseButton="False">
    <Grid>
            :
            :
        <Button x:Name="CloseButton" Margin="0,5,5,5" Grid.Row="3" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center" Click="CloseButton_Click">
            <StackPanel Orientation="Horizontal">
                <iconPacks:PackIconVaadinIcons Kind="Exit" />
                <TextBlock Text="Exit"/>
            </StackPanel>
        </Button>
    </Grid>
</mah:MetroWindow>

リストボックスについては、MahApps.Metroを導入した時点で枠線が削除されたデザインになったため、ファイルが追加されるまではその範囲が判りません。
これでは少々不便なため、リストボックスの範囲が判るように枠線とバックグラウンド色を追加してみます。

1. 「ドキュメントアウトライン」で"FromListBox"を選択
2. 「プロパティ」で"ブラシ"の"Background"を選択
3. “エディター"で"⇆"に"#4C03A9F4″を入力
4. 「プロパティ」で"ブラシ"の"BorderBrush"を選択
5. “エディター"で"⇆"に"#FF03A9F4″を入力
6. 「プロパティ」で"外観"の"∨"以下を表示
7. “BorderThickness"の項目全てに"1″を入力

タイトルバーとCopyボタン、Closeボタン、リストボックス修正後ののデザインは以下のようになります。

メインウィンドウのデザインはかなりマシになったかと思いますが、ダイアログボックスのデザインは元のままです。

これでは中途半端です。

なので、MahApps.MetroかMaterialDesignThemesを使用したダイアログボックスの表示を行いたいと思います。
ただ、MaterialDesignThemesを使用したダイアログボックスの表示についてはコードの量が多くなりますので現時点ではMahApps.Metroを使用したダイアログボックスの表示を行いたいと思います。

MahApps.Metroのダイアログボックス

private async void CopyButton_Click(object sender, RoutedEventArgs e)
{
    CopyButton.IsEnabled = false;
    var rc = fileList.CopyFiles();
    if (rc < 0)
    {
        await this.ShowMessageAsync("エラー", fileList.Message);
    }
    else
    {
        await this.ShowMessageAsync("コピー", "コピーしました。");
    }
    CopyButton.IsEnabled = true;
}

private async void FromButton_Click(object sender, RoutedEventArgs e)
{
    using (var openFolderDialog = new CommonOpenFileDialog()
    {
        Title = "コピー元フォルダを選択してください",
        IsFolderPicker = true,
    })
    {
        if (openFolderDialog.ShowDialog() == CommonFileDialogResult.Ok)
        {
            var sourceDir = openFolderDialog.FileName;
            int rc = fileList.SetSourceDir(sourceDir);
            if (rc < 0)
            {
                await this.ShowMessageAsync("エラー", fileList.Message);
            }
            else
            {
                FromTextBox.Text = sourceDir;
                CopyButton.IsEnabled = (rc > 0);
            }
        }
    }
}

何も配置していないウィンドウは以下のようになっています。

ここにボタン等のコントロールを配置して行きます。

その前に、コントロールの配置を制御するためグリッドコントロールを配置、設定します。

メインのグリッドの分割

グリッドの追加

リストボックスとボタンの追加

ボタンとラベル、テキストボックスの追加

最初のメインウィンドウのデザインのXAMLファイルは以下のようになります。
基本的には今までの「ドキュメントアウトライン」や「プロパティ」等での設定が反映されているはずですので、特に修正する部分は無いはずです。

<Window x:Class="CopyFilesWithSpecifiedName.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CopyFilesWithSpecifiedName"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Button x:Name="FromButton" Content="From : " HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,5,5,5"/>
            <TextBox x:Name="FromTextBox" TextWrapping="Wrap" Grid.Column="1" Margin="5,5,5,5" IsReadOnly="True"/>
        </Grid>
        <Grid Grid.Column="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Button x:Name="ToButton" Content=" To :  " HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,5,5,5"/>
            <TextBox x:Name="ToTextBox" TextWrapping="Wrap" Grid.Column="1" Margin="5,5,5,5" IsReadOnly="True"/>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Label Content="共通ファイル名 : " Margin="5,5,5,5" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <TextBox x:Name="FileNameTextBox" TextWrapping="Wrap" Grid.Column="1" Margin="5,5,5,5"/>
        </Grid>
        <ListBox x:Name="FromListBox" d:ItemsSource="{d:SampleData ItemCount=5}" Grid.Row="1" Margin="5,5,5,5"/>
        <ListBox x:Name="ToListBox" Grid.Row="1" Grid.Column="2" Margin="5,5,5,5" d:ItemsSource="{d:SampleData ItemCount=5}"/>
        <Button x:Name="CopyButton" Content=" ⇒ " Margin="5,0,5,0" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" IsEnabled="False"/>
        <Button x:Name="CloseButton" Content="Close" Margin="0,5,5,5" Grid.Row="3" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center"/>
    </Grid>
</Window>

因みに<ListBox.../>タグ内のd:ItemsSource="{d:SampleData ItemCount=5}"は、デザイナーを使用してウィンドウのデザインを確認する際にダミーのデータを表示するための指定です。
実際のプログラムでは意味を持ちませんので、とりあえずはスルーします。

先ずファイル操作用クラスを作成します。

1. 「ソリューションエクスプローラー」で"CopyFilesWithSpecifiedName"を右クリック
2. ポップアップメニューで"追加"→"クラス…"を選択
3. 「新しい項目の追加」で"名前"に"FileList"と記入し"追加"ボタンをクリック

“FileList.cs"ファイルが追加され、FileListクラスが作成されます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace CopyFilesWithSpecifiedName
{
    internal class FileList
    {
    }
}

FileListクラスのフィールド/プロパティとメソッド

<ListBox ...>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Item1}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace CopyFilesWithSpecifiedName
{
    internal class FileList
    {
        public class FileNames
        {
            public string FromFile { get; set; } = "";
            public string ToFile { get; set; } = "";
        }

        public ObservableCollection<FileNames> FileNameList { get; } = new ObservableCollection<FileNames>();
    }
}

<ListBox x:Name="FromListBox" d:ItemsSource="{d:SampleData ItemCount=5}" Grid.Row="1" Margin="5,5,5,5">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding FromFile}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
<ListBox x:Name="ToListBox" Grid.Row="1" Grid.Column="2" Margin="5,5,5,5" d:ItemsSource="{d:SampleData ItemCount=5}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ToFile}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

public partial class MainWindow : Window
{
    private FileList fileList= new FileList();

    public MainWindow()
    {
        InitializeComponent();

        FromListBox.ItemsSource = fileList.FileNameList;
        ToListBox.ItemsSource = fileList.FileNameList;
    }
}

internal class FileList
{
        :
        :
    public string TargetDir { get; set; } = "";
}

internal class FileList
{
    public enum Code
    {
        OK,
        NG,
    }
        :
        :
    public string Message { get; private set; } = "";
    public string SourceDir { get; private set; } = "";
        :
        :
    public Code SetSourceDir(string dir)
    {
        Code result = Code.OK;

        try
        {
            var files = Directory.GetFiles(dir);
            SourceDir = dir;
            FileNameList.Clear();

            foreach (var file in files)
            {
                FileNameList.Add(new FileNames() { FromFile = file });
            }

            this.MakeToFilesList();
        }
        catch (Exception e)
        {
            Message = e.Message;
            result = Code.NG;
        }

        return result;
    }
}

internal class FileList
{
        :
        :
    private string baseFileName = "new-file-name";
    public string BaseFileName {
        get { return baseFileName; }
        set
        {
            baseFileName = value;
            this.MakeToFilesList();
        }
    }
}

public partial class MainWindow : Window
{
    private FileList fileList= new FileList();

    public MainWindow()
    {
        InitializeComponent();

        FromListBox.ItemsSource = fileList.FileNameList;
        ToListBox.ItemsSource = fileList.FileNameList;
        FileNameTextBox.Text = fileList.BaseFileName;    // 追加
    }
}

protected void MakeToFilesList()
{
    int num = 0;
    foreach (var file in FileNameList)
    {
        var ext = Path.GetExtension(file.FromFile);
        var newFileName = $"{baseFileName}{num++:d3}{ext}";
        file.ToFile = newFileName;
    }
}

public Code CopyFiles()
{
    Code result = Code.OK;

    var dir = (TargetDir == "") ? SourceDir : TargetDir;

    foreach (var file in FileNameList)
    {
        var targetFileName = Path.Join(dir, file.ToFile);

        try
        {
            File.Copy(file.FromFile, targetFileName);
        }
        catch (IOException)
        {
            continue;
        }
        catch (Exception e)
        {
            Message = e.Message;
            result = Code.NG;
            break;
        }
    }

    return result;
}

Fromボタンのクリックに対するイベントハンドラを追加します。

1. 「ドキュメントアウトライン」や「デザイナー」で"FromButton"を選択
2. 「プロパティ」で稲妻ボタンをクリック
3. “Click"の入力欄をダブルクリック

“MainWindow.xaml.cs"ファイル内、MainWindowクラスに"FromButton_Click"メソッドが追加されます。

“FromButton_Click"メソッド内は以下のようにします。

private void FromButton_Click(object sender, RoutedEventArgs e)
{
    using (var openFolderDialog = new CommonOpenFileDialog()
    {
        Title = "コピー元フォルダを選択してください",
        IsFolderPicker = true,
    })
    {
        if (openFolderDialog.ShowDialog() == CommonFileDialogResult.Ok)
        {
            var sourceDir = openFolderDialog.FileName;
            var rc = fileList.SetSourceDir(sourceDir);
            if (rc == FileList.Code.NG)
            {
                MessageBox.Show(fileList.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
            }
            else
            {
                FromTextBox.Text = sourceDir;
                CopyButton.IsEnabled = ((rc == FileList.Code.OK) && (fileList.FileNameList.Count > 0));
            }
        }
    }
}

1. var openFolderDialog = new CommonOpenFileDialog(): フォルダ選択のダイアログ、IsFolderPicker = trueを指定
2. openFolderDialog.ShowDialog() == CommonFileDialogResult.Ok: ダイアログを表示してOKがクリックされたか確認
3. var rc = fileList.SetSourceDir(sourceDir): コピー元フォルダ名をセットし、処理の成否を確認
4. MessageBox.Show(fileList.Message, ...): エラーメッセージをメッセージボックスに表示
5. FromTextBox.Text = sourceDir: ②Fromテキストボックスにコピー元フォルダ名を表示
6. CopyButton.IsEnabled = ((rc == FileList.Code.OK) && (fileList.FileNameList.Count > 0)): ファイルが1個以上追加されていれば、⑦Copyボタンをクリックできるようにする

CommonOpenFileDialogについて

Toボタンのクリックに対するイベントハンドラを追加します。
Fromボタンと概ね同様の操作となります。

1. 「ドキュメントアウトライン」や「デザイナー」で"ToButton"を選択
2. 「プロパティ」で稲妻ボタンをクリック
3. “Click"の入力欄をダブルクリック

“MainWindow.xaml.cs"ファイル内、MainWindowクラスに"ToButton_Click"メソッドが追加されます。

“ToButton_Click"メソッド内は以下のようにします。

private void ToButton_Click(object sender, RoutedEventArgs e)
{
    using (var openFolderDialog = new CommonOpenFileDialog()
    {
        Title = "コピー先のフォルダを選択してください",
        IsFolderPicker = true,
    })
    {
        if (openFolderDialog.ShowDialog() == CommonFileDialogResult.Ok)
        {
            var targetDir = openFolderDialog.FileName;
            ToTextBox.Text = targetDir;
            fileList.TargetDir = targetDir;
        }
    }
}

1. var openFolderDialog = new CommonOpenFileDialog(): フォルダ選択のダイアログ、IsFolderPicker = trueを指定
2. openFolderDialog.ShowDialog() == CommonFileDialogResult.Ok: ダイアログを表示してOKがクリックされたか確認
3. ToTextBox.Text = targetDir: ④Toテキストボックスにコピー先フォルダ名を表示
4. fileList.TargetDir = targetDir: コピー先フォルダ名をセット

CommonOpenFileDialogクラスについては、CommonOpenFileDialogについてを参照して下さい。

Copyボタンのクリックに対するイベントハンドラを追加します。
Fromボタンと概ね同様の操作となります。

1. 「ドキュメントアウトライン」や「デザイナー」で"CopyButton"を選択
2. 「プロパティ」で稲妻ボタンをクリック
3. “Click"の入力欄をダブルクリック

“MainWindow.xaml.cs"ファイル内、MainWindowクラスに"CopyButton_Click"メソッドが追加されます。

“CopyButton_Click"メソッド内は以下のようにします。

private void CopyButton_Click(object sender, RoutedEventArgs e)
{
    CopyButton.IsEnabled = false;
    var rc = fileList.CopyFiles();
    if (rc < 0)
    {
        MessageBox.Show(fileList.Message);
    }
    else
    {
        MessageBox.Show("コピーしました。");
    }
    CopyButton.IsEnabled = true;
}

1. CopyButton.IsEnabled = false: ファイルコピー中に再度クリックされないよう無効化
2. var rc = fileList.CopyFiles(): 実際にファイルをコピーする

Closeボタンのクリックに対するイベントハンドラを追加します。
Fromボタンと概ね同様の操作となります。

1. 「ドキュメントアウトライン」や「デザイナー」で"CloseButton"を選択
2. 「プロパティ」で稲妻ボタンをクリック
3. “Click"の入力欄をダブルクリック

“MainWindow.xaml.cs"ファイル内、MainWindowクラスに"CloseButton_Click"メソッドが追加されます。

“CloseButton_Click"メソッド内は以下のようにします。

private void CloseButton_Click(object sender, RoutedEventArgs e)
{
    Application.Current.Shutdown();
}

1. Application.Current.Shutdown(): アプリケーションを終了する

ファイル名テキストボックスへの入力に対するイベントハンドラを追加します。
これもボタン類と概ね同様の操作となります。

1. 「ドキュメントアウトライン」や「デザイナー」で"FileNameTextBox"を選択
2. 「プロパティ」で稲妻ボタンをクリック
3. “TextChanged"の入力欄をダブルクリック

“MainWindow.xaml.cs"ファイル内、MainWindowクラスに"FileNameTextBox_TextChanged"メソッドが追加されます。

“FileNameTextBox_TextChanged"メソッド内は以下のようにします。

private void FileNameTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    fileList.BaseFileName = FileNameTextBox.Text;
    ToListBox.Items.Refresh();
}

1. fileList.BaseFileName = FileNameTextBox.Text: テキストボックス内の文字列を"BaseFileName"プロパティにセット
2. ToListBox.Items.Refresh(): リストボックスの内容が変更になっているのでアップデート