【課題9-09】自己紹介アプリ ver 2.0

プロジェクトタイプ	C# WPFアプリケーション
プロジェクト名	`Prac_9_09`
ソリューション名	`PET9`
ターゲットフレームワーク	.NET 6.0 (長期的なサポート)

※ 「WPFアプリ(.NET Framework)」ではないので注意せよ！

【課題9-08】を改造して，あらかじめ用意されているIntroductionInfoクラス(【課題9-03】)のオブジェクトの内容を JSON形式のテキストファイルとして出力する アプリを作成せよ．

レイアウトは_のよう5行2列のレイアウトにすること．

注意

この設問を解くには先に以下の課題を完了する必要がある．
後述の空欄は前提課題の回答と 全く同じ にすること(変えてはならない)．
- この設問の空欄1→【課題9-03】の空欄1
GUI部品の名前やラベルの文言は必ず守ること(そうしないと採点ができないため)．
この設問では ツールボックスを使わずに XAMLファイルを直接編集してウィンドウの定義を作成すること．

このGUIアプリは_に示す部品を備える．

画面項目表

名前	種別	機能	初期値/文言	備考
`label1`	ラベル	静的な文言	`学籍番号:`	【プロパティの指定】・`VerticalAlignment`プロパティに`Center`を指定すること．
`label2`	ラベル	静的な文言	`氏名:`	【プロパティの指定】・`VerticalAlignment`プロパティに`Center`を指定すること．
`label3`	ラベル	静的な文言	`好きな言葉:`	【プロパティの指定】・`VerticalAlignment`プロパティに`Center`を指定すること．
`label4`	ラベル	静的な文言	`誕生日:`	【プロパティの指定】・`VerticalAlignment`プロパティに`Center`を指定すること．
`textBox1`	テキストボックス	「学籍番号」の入力	(備考を参照)	「学籍番号」を入力するためのテキストボックス．データバインディングを用いて後述する`IntoroductionInfo`オブジェクトと`.StudentID`プロパティの内容を表示・編集する．【プロパティの指定】・`VerticalAlignment`プロパティに`Center`を指定すること．
`textBox2`	テキストボックス	「氏名」の入力	(備考を参照)	「氏名」を入力するためのテキストボックス．データバインディングを用いて後述する`IntoroductionInfo`オブジェクトと`.Name`プロパティの内容を表示・編集する．詳細は`button1`の備考を参照せよ．【プロパティの指定】・`VerticalAlignment`プロパティに`Center`を指定すること．
`textBox3`	テキストボックス	「好きな言葉」の入力	(備考を参照)	「好きな言葉」を入力するためのテキストボックス．データバインディングを用いて後述する`IntoroductionInfo`オブジェクトと`.Motto`プロパティの内容を表示・編集する．詳細は`button1`の備考を参照せよ．【プロパティの指定】・`VerticalAlignment`プロパティに`Center`を指定すること．
`datePicker1`	DatePicker	「誕生日」を入力するための部品	(空欄)	「誕生日」を入力するためのDatePicker．データバインディングを用いて後述する`IntoroductionInfo`オブジェクトと`.Birthday`プロパティの内容を表示・編集する． `button1`の備考も参照せよ．【プロパティの指定】・`VerticalAlignment`プロパティに`Center`を指定すること．
`button1`	ボタン	「自己紹介を保存」ボタン	`自己紹介を保存`	ファイルの保存を行うためのボタン．クリックされたとき，`textBox1～3`および`datePicker1`のいずれか一つでも空欄がある場合には何もしない．それ以外の場合は，クリックすると以下の内容のセーブファイルダイアログを表示して，出力先のファイル名を選択させ，後述する内容のテキストファイルを出力する( 【課題7-06】とはフィルターの内容が異なるので注意せよ )．【セーブファイルダイアログの内容】・タイトル : 指定しない．・フィルター : 以下の通り．　　1. 見出し : `JSONファイル` 　　　拡張子 : `.json` テキストファイルには後述の`IntoroductionInfo`オブジェクトの内容をJSON形式で保存する* ．【プロパティの指定】・`VerticalAlignment`プロパティに`Center`を指定すること．
(名前なし)	ウィンドウ	(メインウィンドウ)	`自己紹介アプリ ver 2.0`	プロジェクト作成時に自動作成されるメインウィンドウ．【プロパティの指定】・サイズは幅400×高さ300とする．・背景色はデフォルトの白以外に設定する．・左記の「初期値/文言」の列とおり文言，つまりタイトルを指定する．

この設問には【課題9-03】で作った，自己紹介についての情報を表すクラス IntroductionInfoの定義が必要である． プロジェクトにクラスを追加し¹，_のように【課題9-03】の IntroductionInfoクラスの定義を貼り付けて使用すること．

自己紹介についての情報を表すクラス(IntroductionInfo.cs)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Prac_9_09
{
    /********************************/
    /*                              */
    /*            空欄1             */
    /* IntroductionInfoクラスの定義 */
    /*     (【課題9-03】と同じ)     */
    /*                              */
    /********************************/
}

なおMainWindowクラスは_のようにすること．

MainWindowクラスのテンプレート

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
public partial class MainWindow : Window
{
    // 表示・編集対象の IntroductionInfo クラスのオブジェクト
    private IntroductionInfo intro;

    public MainWindow()
    {
        InitializeComponent();

        // intro の初期化
        this.intro = new IntroductionInfo()
        {
            StudentID = "HI022098",
            Name = "医療花子",
            Motto = "質実剛健",
            Birthday = new DateTime(2003, 8, 30)
        };
             
        // ウィンドウ自体の DataContext に↑のintroを関連付けておく
        this.DataContext = intro;
    }

    //  ..以下，必要に応じて自由に追記してよい..

}// end of class MainWindow

正しく実装できた場合，実行結果は_に示すような挙動となる²，³．

実行結果

ヒント

なし

プロジェクトを右クリック→「追加」→クラスを選択し，クラス名を入力して「作成」ボタンを押す． ↩︎
Apple社の都合により，iPhone，iPadなどのデバイスでは動画の再生はできません(Apple社はスマートフォン/タブレット製品で，意図的？にVPxやAV1コーデックのサポートを遅らせているため．参考1，参考2)． ↩︎
Microsoft Edge で動画を閲覧するためには，AV1 Extensionをインストールする必要があります． ↩︎

Last updated on 2023-12-11
Published on 2023-12-11