【課題7-06】自己紹介アプリ ver 1.0

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

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

【課題7-03】を改造して，_に示すように， 自己紹介の内容をテキストボックスなどで入力して，その内容をファイルに出力する アプリを作成せよ．

レイアウトは_のよう5行2列のレイアウトにすること(ヒントも参照せよ)．

注意

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

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

画面項目表

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

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

実行結果

ヒント

この設問ではツールボックスを使わずにXAMLファイルを直接編集してウィンドウの定義を作成すること．
- ツールボックスから部品をドラッグ&ドロップで配置すると，余計な設定が行われてしまい正しく画面を作ることができない．
- 以下のテンプレートも参考にすること．

MainWindow.xamlのテンプレート

_は，メインウィンドウのXAMLファイルのテンプレートである．ただし，あらかじめ設定しているのは各部品の名前のみであり，ウィンドウサイズ，ウィンドウタイトル，グリッドの定義，部品の配置やプロパティの指定，イベントハンドラに関しては一切設定していない．そのため必要な部分は各自で書き換える必要がある．

MainWindow.xamlのテンプレート

 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<Window x:Class="Prac_7_06.MainWindow"
        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:Prac_7_06"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

        <!-- //////////////////// グリッドの定義: ココカラ //////////////////// -->

        <Grid.RowDefinitions>
            <!-- ****************************** -->
            <!-- *                            * -->
            <!-- *            空欄1           * -->
            <!-- *     Grid の行の設定        * -->
            <!-- *                            * -->
            <!-- ****************************** -->
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <!-- ****************************** -->
            <!-- *                            * -->
            <!-- *            空欄2           * -->
            <!-- *     Grid の列の設定        * -->
            <!-- *                            * -->
            <!-- ****************************** -->
        </Grid.ColumnDefinitions>

        <!-- //////////////////// グリッドの定義: ココマデ //////////////////// -->


        <!-- ////////////////////// 部品の定義: ココカラ ////////////////////// -->

        <!-- 部品 label1，0行0列目に配置  -->
        <Label x:Name="label1" Content="学籍番号:"></Label>

        <!-- 部品 label2，1行0列目に配置  -->
        <Label x:Name="label2" Content="氏名:"></Label>

        <!-- 部品 label3，2行0列目に配置  -->
        <Label x:Name="label3" Content="好きな言葉:"></Label>

        <!-- 部品 label4，3行0列目に配置  -->
        <Label x:Name="label4" Content="誕生日:"></Label>

        <!-- 部品 textBox1，0行1列目に配置  -->
        <TextBox x:Name="textBox1"></TextBox>
        
        <!-- 部品 textBox2，1行1列目に配置  -->
        <TextBox x:Name="textBox2"></TextBox>

        <!-- 部品 textBox3，2行1列目に配置  -->
        <TextBox x:Name="textBox3"></TextBox>

        <!-- 部品 datePicker1，3行1列目に配置  -->
        <DatePicker x:Name="datePicker1"></DatePicker>

        <!-- 部品 button1，4行目(2列ぶちぬき)に配置  -->
        <Button x:Name="button1" Content="自己紹介を保存"></Button>

        <!-- ////////////////////// 部品の定義: ココマデ ////////////////////// -->

    </Grid>
</Window>

MainWindow.xamlのテンプレート : 閉じる

Apple社の都合により，iPhone，iPadなどのデバイスでは動画の再生はできません(Apple社はスマートフォン/タブレット製品で，意図的？にVPxやAV1コーデックのサポートを遅らせているため．参考1，参考2)． ↩︎
Microsoft Edge で動画を閲覧するためには，AV1 Extensionをインストールする必要があります． ↩︎

Last updated on 2023-11-22
Published on 2023-11-22