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ファイルのコードは以下の通りです。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPFサンプル" Height="350" Width="525">
    <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Name="englishButton" Content="英語表示" Click="englishButton_Click"/>
            <Button Name="japaneseButton" Content="日本語表示" Click="japaneseButton_Click"/>
            <TextBox Name="messageTextBox" Width="200" Height="30" Margin="0,20,0,0" IsReadOnly="True"/>
        </StackPanel>
    </Grid>
</Window>

 

次に、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 x:Class="Hello_WPF.Window1"
        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:Hello_WPF"
        mc:Ignorable="d"
        Title="Window1" Height="450" Width="800">
    <Grid>
        <Button Content="Button" HorizontalAlignment="Left" Margin="360,173,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>

    </Grid>
</Window>

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

using System.Windows;

namespace Hello_WPF
{
    /// <summary>
    /// Window1.xaml の相互作用ロジック
    /// </summary>
    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: 318