【課題10-04】自己紹介アプリ ver 3.0

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

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

【課題10-03】で改造した，自己紹介に関する情報を表すクラスIntroductionInfoを用いる設問である．

_に示すような，自己紹介に関する情報のリストを管理するアプリを作成せよ．

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

注意

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

このGUIアプリは_に示す部品を備える．なおスタイルを使ってウィンドウ以外のすべての種類の部品(Button, ListView, TextBox, Label, DatePicker)に _に示すスタイルを設定すること．

画面項目表

名前	種別	機能	初期値/文言	備考
`button1`	ボタン	「追加」ボタン	`追加`	新たな自己紹介を追加するためのボタン．．その際，新規作成して追加する`IntroductionInfo`の内容は以下のようにすること．【新規作成する自己紹介情報】学籍番号: `HI022999` 氏名: `名無しの権兵衛` 好きな言葉: `ないです` 誕生日: `2000年1月1日`(C#での記述→`new DateTime(2000, 1, 1)`)
`button2`	ボタン	「削除」ボタン	`削除`	`listView1`で選択中の自己紹介情報を削除する．未選択の場合には何もしない．
`listView1`	リストビュー	プレイヤーキャラクターの一覧表示	(備考参照)	後述する`IntroductionInfo`クラスのリストを一覧表示する．表示の際は以下のような表組みで表示すること(長くなるので学籍番号と氏名のみを表示する)．【表組みの設定】・列その1 　見出し: `学籍番号` 　表示するデータ: `StudentID`プロパティの値を表示する・列その2 　見出し: `氏名` 　表示するデータ: `Name`プロパティの値を表示する `listView1`で選択中の自己紹介情報の各プロパティの内容は`textBox1～3`および`datePicker1`で表示・編集する．
`stackPanel1`	スタックパネル	(備考参照)	-	後述する`label1～4`，`textBox1～3`および`datePicker1`を包含するスタックパネル．データバインディングを用いて，`listView1`の`.SelectedItem`プロパティを，この部品の`DataContext`プロパティに関連付けておく．
`label1`	ラベル	静的な文言	`学籍番号:`	-
`label2`	ラベル	静的な文言	`氏名:`	-
`label3`	ラベル	静的な文言	`好きな言葉:`	-
`label4`	ラベル	静的な文言	`誕生日:`	-
`textBox1`	テキストボックス	「学籍番号」の表示・編集	(備考を参照)	`listView1`で現在選択中している自己紹介情報の「学籍番号」を表示・編集する．データバインディングを用いて，`.StudentID`プロパティを関連付けておく．
`textBox2`	テキストボックス	「氏名」の表示・編集	(備考を参照)	`listView1`で現在選択中している自己紹介情報の「氏名」を表示・編集する．データバインディングを用いて，`.Name`プロパティを関連付けておく．
`textBox3`	テキストボックス	「好きな言葉」の表示・編集	(備考を参照)	`listView1`で現在選択中している自己紹介情報の「好きな言葉」を表示・編集する．データバインディングを用いて，`.Motto`プロパティを関連付けておく．
`datePicker1`	DatePicker	「誕生日」の表示・編集	(備考を参照)	`listView1`で現在選択中している自己紹介情報の「誕生日」を表示・編集する．データバインディングを用いて，`.Birthday`プロパティを関連付けておく．
(名前なし)	ウィンドウ	(メインウィンドウ)	`自己紹介アプリ ver 3.0`	プロジェクト作成時に自動作成されるメインウィンドウ．この設問ではアプリの開始時に自己紹介リストの読み込み，終了時に自己紹介リストの書き出しを行う．【開始時の処理】作業ディレクトリの直下に`intro_list.json`が存在するかどうかをチェックする．存在しない場合は何もしない．存在する場合は，このファイルをJSON形式として読み込み，自己紹介リスト(後述のリスト`intros`)に追加する．【終了時の処理】自己紹介リスト(後述のリスト`intros`)をJSON形式で保存する．ファイル名は`intro_list.json`とし保存場所は作業ディレクトリの直下とする．【プロパティの指定】・サイズは幅400×高さ300とする．・背景色はデフォルトの白以外に設定する．・左記の「初期値/文言」の列とおり文言，つまりタイトルを指定する．

共通スタイル

プロパティ名	設定値
`Margin`	`3 3 3 3`

この設問には【課題10-03】で 改造した ，自己紹介についての情報を表すクラス IntroductionInfoの定義が必要である． プロジェクトにクラスを追加し¹，_のように【課題10-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_10_04
{
    /********************************/
    /*                              */
    /*            空欄1             */
    /* IntroductionInfoクラスの定義 */
    /*     (【課題10-03】と同じ)     */
    /*                              */
    /********************************/
}

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

MainWindowクラスのテンプレート

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
public partial class MainWindow : Window
{
    // 表示・編集対象の IntroductionInfo クラスのリスト
    private ObservableCollection<IntroductionInfo> intros;

    public MainWindow()
    {
        InitializeComponent();

        // intros の初期化
        intros = new ObservableCollection<IntroductionInfo>();

        // listView の ItemsSource に↑のリストを設定しておく
        listView1.ItemsSource = intros;
    }

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

}// end of class MainWindow

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

実行結果

ヒント

なし

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

Last updated on 2024-01-09
Published on 2024-01-09