【C# GUI】画像表示サンプル with GPT

ここでは、C#のGUIのフレームワークであるWPFのサンプルプログラムを、ChatGPTの力を借りながら、作ったサンプルコードをまとめています。実行可能であることは確認していますが、WPF初学者の私がChatGPTと作っているので、ベストな方法ではないかもしれませんので、ご了承ください。

画像表示

画像ファイルを選択して表示し、白黒変換をするサンプル。

以下は、ChatGPTへのプロンプト。

---

Visual Studio Express 2017で、PCで動くシンプルなアプリを作ります。
GUIにはWFPを使います。

仕様は以下の通りです。
MainWindow に配置するコンポーネント
＋「ファイル選択」のボタン
＋画像表示領域
＋「白黒」ボタン
＋「カラー」ボタン

動作は次の通りです。
＋「ファイル選択」ボタンを押すと、ファイル選択ポップアップから画像ファイル(jpg, png)が選べます。
＋すると、選択した画像が、画像領域に表示されます。
＋「白黒」ボタンを押すと、画像が白黒で表示されます。
＋「カラー」ボタンを押すと、画像がカラーで表示されます。

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

---

生成された MainWindow.xaml

<Window x:Class="SimpleImageConverter.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Simple Image Converter" Height="350" Width="500">
    <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Top" Margin="10">
            <Button Content="ファイル選択" Click="OpenFileButton_Click"/>
            <Image x:Name="imageView" Margin="0,10" Width="300" Height="200"/>
            <Button Content="白黒" Click="ConvertToBlackAndWhiteButton_Click"/>
            <Button Content="カラー" Click="ConvertToColorButton_Click"/>
        </StackPanel>
    </Grid>
</Window>

生成された MainWindow.xaml.cs

using Microsoft.Win32;
using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace SimpleImageConverter
{
    public partial class MainWindow : Window
    {
        private BitmapImage originalImage;

        public MainWindow()
        {
            InitializeComponent();
        }

        private void OpenFileButton_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog openFileDialog = new OpenFileDialog();
            openFileDialog.Filter = "Image files (*.jpg, *.png)|*.jpg;*.png|All files (*.*)|*.*";

            if (openFileDialog.ShowDialog() == true)
            {
                string selectedFilePath = openFileDialog.FileName;
                originalImage = new BitmapImage(new Uri(selectedFilePath));
                imageView.Source = originalImage;
            }
        }

        private void ConvertToBlackAndWhiteButton_Click(object sender, RoutedEventArgs e)
        {
            if (originalImage != null)
            {
                BitmapSource grayscaleImage = ConvertToGrayscale(originalImage);
                imageView.Source = grayscaleImage;
            }
        }

        private void ConvertToColorButton_Click(object sender, RoutedEventArgs e)
        {
            if (originalImage != null)
            {
                imageView.Source = originalImage;
            }
        }

        private BitmapSource ConvertToGrayscale(BitmapSource sourceImage)
        {
            FormatConvertedBitmap grayscaleBitmap = new FormatConvertedBitmap();
            grayscaleBitmap.BeginInit();
            grayscaleBitmap.Source = sourceImage;
            grayscaleBitmap.DestinationFormat = PixelFormats.Gray8;
            grayscaleBitmap.EndInit();
            return grayscaleBitmap;
        }
    }
}じ

Visual Studio Express 2017 で実行した画面。

ファイルを選択しすると画像が表示される。

「白黒」を押すと画像が白黒表示になる。

 

ちなみに画像は、バーチャルでブラジルに行った時の写真です。