C#でGUIを作ることに興味があります。今どきは、Windows Presentation Foudation (WPF) というフレームワークを使うそうです。

しかし、コードの書き方は一度チュートリアルをやってみただけで、まだほとんど分かりません。

そこでChatGPTにサンプルコードを作ってもらいながら勉強することにしました。

環境

  • Windows 11 Home
  • Microsoft Visual Studio Express 2017 for WIndows Desktop (以降、Visual Studio)
  • ChatGPT: GPT-3.5 (アカウント登録済、無料）

    仕様の作成

    ChatGPTに入力するための文言を、いったんメモ帳で作成し、ChatGPTにコピーして入力しました。

Visual Studio Express 2017で、WPFのサンプルを作ります。

MainWindow に配置するコンポーネントは次の通りです。 ＋「英語表示」ボタン ＋「日本語表示」ボタン ＋メッセージを表示するTextBox

動作は次の通りです。 ＋「表示１」ボタンを押すと、メッセージボタンに「Hello WPF!」と表示されます。 ＋「表示２」ボタンを押すと、メッセージボタンに「こんにちは　WPF!」と表示されます。

このアプリのXAMLのコードと、C#のコードを作ってください。

プログラムの生成

ChatGPTの出力です。

もちろんです。以下が要求された機能を持つWPFアプリケーションのXAMLとC#コードの例です。

まず、MainWindow.xamlファイルのコードは以下の通りです。

 

次に、MainWindow.xaml.csファイルのコードは以下の通りです。

using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void englishButton_Click(object sender, RoutedEventArgs e)
        {
            messageTextBox.Text = "Hello WPF!";
        }

        private void japaneseButton_Click(object sender, RoutedEventArgs e)
        {
            messageTextBox.Text = "こんにちは　WPF!";
        }
    }
}

これで、要求された機能を持つWPFアプリケーションが作成されました。英語表示ボタンをクリックすると “Hello WPF!”、日本語表示ボタンをクリックすると “こんにちは　WPF!” がメッセージボックスに表示されるでしょう。

プログラムをVisual Studio Express にコピー

ではChatGPTが作ってくれたコードを実行してみます。

まず、Visual Studio を起動し、「WPFアプリ」を選択して、名前を「Hello_WPF」として「OK」を押します。

次に、MainWindow.xamlのタブを選び（１）、２の場所にChatGPTが作ったMainWindow.xamlのコードをコピーします。

 

同様に、MainWindow.xaml.cs のタブを選び（１）、２の場所にChatGPTが作ったMainWindow.xamlのコードをコピーします。

これで完了。

コードの実行

メニューの緑色の開始ボタンを押します。

すると、ウィンドウが表示されます。仕様で指示したように、英語表示を押すと「Hello WPF!」、日本語表示を押すと「こんにちは WPF!」と表示されました。完璧です。

 

考察

ここまで作ってもらえれば、あとはコードを眺めて理解したり、そこから改良していけるので、かなり学習効率がよいと思いました。そして、もし、コードで分からない部分があれば、ChatGPTに教えてもらうこともできます。

これまでは、googleで検索して情報を少しずつ集めながらサンプルコードを作っていくしかなかったのですが、ChatGPTはすぐに目的のサンプルを作ってくれるので、かなり効率がよいです。

それにしても、まだよくわからないことがあります。

メインのプログラムはそのままにして、ちょっと別なコードを実行させたいときにはどうすればよいのでしょうか。

C#の場合、プログラムが開始するのはmain()からなので、メインのプログラムのmain()をコメントアウトして、実行したいコードにmain()を作ればよいかと思ったのですが、このWPFのフレームワークだとmain()関数が見当たりません。どうなっているのでしょうか。

WPFでできるファイルの関係とmain()の場所

WPF とはというブログにWPFのわかりやすい説明がありました。ありがとうございます。

これをもとに図を作りました。

まず、プログラムを実行した再、自動的に./obj/Debug/App.g.cs というファイルが生成され、そこにmain()が入ります。

そのmain()の中で、HelloWPF.App クラスが実行されます。

Appクラスは、これも自動で生成される App.xamlとApp.xaml.cs で定義されます。この中のStartupUriという変数に、実際に作成した”MainWindow.xaml“が登録されているのです。

実際に作成した、MainWindow.xamlとMainWindow.xaml.cs は、この両方で、MainWindowクラスを定義します。MainWindow.xamlはUIの構造を定義し、MainWindow.xaml.csはイベント処理やロジックを定義します。MainWindow.xaml.csは、MainWindow.xamlのコードビハインドと呼ぶようです。

同じプロジェクト内で別なコードを実行する

例えば実験用に、Window1.xamlとWindow1.xaml.cs というものを作って、「実行」ボタンで、こっちを動かすには、

App.xaml の

StartUpUri=”MainWindow.xaml”

を

StartUpUri=”Window1.xaml”

とすればよさそうです。これをやってみます。

まず、右側のソリューションエクスポローラーの「Hello_WPF」を右クリックして、 追加＞ウィンドウを選びます。

ポップアップが出るので、「ウィンドウ（WPF）」を選択し、「 名前」を「Window1.xaml」とし、 「追加」ボタンを押します。

これで、Window1.xamlとWindow1.xaml.cs のテンプレートファイルが作成されるので、適宜中身を作成します。

例えば、Window.xamlはこんな感じに。

Window.xaml.cs はこんな感じに。ボタンを押すと、「こんにちは！」とポップアップを出すコードです。

using System.Windows;

namespace Hello_WPF
{
    /// 
    /// Window1.xaml の相互作用ロジック
    /// 
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("こんにちは！");
        }
    }
}

 

そして、App.xaml のStartUpUri=”MainWindow.xaml”を、StartUpUri=”Window1.xaml”に書き換えます。

これで、実行すると、予想通り、うまくWindow1.xamlの方が実行されました。

 

それにしても、ChatGPTを使いながら勉強するという方法で、かなり時間短縮になった感があります。ただ、ChatGPTは分かっていないことも分かった風に説明してくるので、間違った方法に誘導されないように注意は必要だと思います。

 

 

Post Views: 889