※この記事ではC#とWPFを使用してアプリを作成しております。MacOSではWPFを使用できませんので、その点はご了承ください。
皆様こんにちは。リラ吉です。
前回は計算機アプリのスタイルを作成しました。今回もUI部分(レイアウト)を作成していきます。
本記事では式、数字を表示するTextBlockの作成を行います。
TextBlockの作成
まずはTextBlockを作っていきます。TextBlockとは文字を表示するところです。
TextBlockを作るのはエクセルで作った画面イメージの下図の矢印の場所です。
余談ではありますが、WPFにはTextBlockのように文字を表示するTextBoxというのもあります。
厳密にはフォントの設定等の違いもありますが、この2つの一番の違いは
- TextBlock:入力した文字、数字等を編集不可
- TextBox:入力した文字、数字等を編集可能
となっています。
今回作成する電卓は編集する必要はありませんのでTextBlockを使用します。
ではTextBlockを作っていきましょう。今回は下のコードを使います。 最初の3行が式を表示する1つ目のTextBlock、4行目が空白で、5行目以降が数字を表示する2つ目のTextBlockを作るためのコードです。
<Viewbox Grid.Row="0" Grid.ColumnSpan="4" HorizontalAlignment="Right">
<TextBlock Text="{Binding FormoulaText}" Margin="0,0,20,0"/>
</Viewbox>
<TextBlock Grid.Row="1" Grid.ColumnSpan="4" Background="#ffffff"/>
<Viewbox Grid.Row="1" Grid.ColumnSpan="4" HorizontalAlignment="Right" Margin="0,0,20,0">
<TextBlock Text="{Binding ResultText}" Margin="0,0,20,0"/>
</Viewbox>
このコードを前回作ったGridの下(</Grid.ColumnDefinitions>の下)に書きます。
下の画像のようになるかと思います。
ではデザインを見ていきましょう。
このようになっているかと思います。こうなっていれば大丈夫です。
ここから先はこのコードの解説になります。
コードの解説
解説すると、まずは最初の3行を見ていきます。
<Viewbox Grid.Row="0" Grid.ColumnSpan="4" HorizontalAlignment="Right">
<TextBlock Text="{Binding FormoulaText}" Margin="0,0,20,0"/>
</Viewbox>
2行目の<TextBlock Text=”{Binding FormoulaText}” Margin=”0,0,20,0″/>が TextBlockを作っている部分です。
この2行目部分を分解して解説すると
- <TextBlock:「TextBlockを作りますよ」という宣言
- Text=”{Binding FormoulaText}” :「”{Binding FormoulaText}” をここには表示しますよ」という意味({Binding FormoulaText})とは何なのかはこの記事の後半で解説します)
- Margin=”0,0,20,0″ :「右側に20pixelの余白を作りますよ」という意味(Marginは余白を作るものです。Margin=”左側の余白,上側の余白,右側の余白,下側の余白”で設定できます)
- />:「TextBlockの中身はここまでですよ」という意味
このような意味になります。
そしてこの2行目を挟む形で <Viewbox Grid.Row=”0″ Grid.ColumnSpan=”4″ HorizontalAlignment=”Right”>と</Viewbox> が1行目と3行目にあります
このViewboxとは簡単に言うと「Viewboxで挟んでいるところを設定どおりに拡大縮小するよ」という意味です。特に設定を決めない場合、デフォルト設定であるUniform(領域内に収まるようにサイズを調整する)になります。今回はこのデフォルト設定を使います。
領域内に収まるようにサイズを調整する ってよくわからないよ
という方が多いと思いますので、実際の画面をお見せして説明します。
まず下の画像は完成した計算機で「1+1」を計算したものになります。計算機の1番上に「1+1=」と表示されていますね。
「1+1=」は普通に表示されますが、もし「100000000000000 + 100000000000000=」のような桁数を計算する場合はどうなるとでしょうか?
計算は出来るでしょうが「1+1=」と同じサイズの文字だとおそらく枠をはみ出してしまいますね。はみ出さないように文字のサイズを調整(小さく)する必要があります。
Viewboxのデフォルト設定Uniformはそれをしてくれます。上記の「1+1=」と「100000000000000+ 100000000000000=」を並べてみますと違いが判ると思います。
文字のサイズが小さくなって枠内に収まっていますね。
ではそれを踏まえて <Viewbox Grid.Row=”0″ Grid.ColumnSpan=”4″ HorizontalAlignment=”Right”>と</Viewbox>の意味を解説しますと
- <Viewbox: 「Viewboxを使います」という宣言
- Grid.Row=”0″ :「0個目の行(つまり1番上の行)を使いますよ」という意味
- Grid.ColumnSpan=”4″ :「4つの列を結合して使用しますよ」という意味
- HorizontalAlignment=”Right” :右寄せにしますよ
- </Viewbox>: 「Viewboxの中身はここまでですよ」という意味
という意味になります。以上が最初の3行のコード(式を表示する枠の作成コード)の意味です。
では同じように5行目以降を見ていきましょう。
まず5行目の<TextBlock Grid.Row=”1″ Grid.ColumnSpan=”4″ Background=”#ffffff”/>は白い背景を作るために作りました。「1個目の行(つまり2行目)にTextBlockで枠を作って、Background=”#ffffff”にすることで背景を白くしているんだな」くらいの認識で大丈夫です。
次の<Viewbox Grid.Row=”1″ Grid.ColumnSpan=”4″ HorizontalAlignment=”Right” Margin=”0,0,20,0″>以降も式を表示するTextBlockを作った時とほぼ同じですね。
異なるのは{Binding FormoulaText}が{Binding ResultText}になっていることです。
ではこの{Binding FormoulaText}と{Binding ResultText} はどういう意味なのでしょうか。
これは「FormoulaTextをバインドします」「ResultTextをバインドします」という意味です。
まずFormoulaTextとResultTextについてですが、これは後日の記事で作成する文字型の変数です。それぞれ「計算式」「入力した数字、あるいは計算結果」が入る変数になっています。
Bindingは「紐付けるよ」という意味です。
先ほど書いたようにText = “{Binding FormoulaText}” は「”{Binding FormoulaText}” をここには表示しますよ」という意味なのですがこれを言い換えると
「紐づいている変数FormoulaTextの中身(つまり計算式)を表示しますよ」
という意味になります。
変数のFormoulaTextとResultTextについては後日作りますので、とりあえずは「変数の中身を表示しているんだな」という認識で大丈夫です。
ここまでが今回追加したコードの解説になります。
今回はTextBlockの追加を行いました。次回はボタンの定義と作成をしていきます。
ここまでお読みいただきありがとうございました。
それではまた。
リラ吉