2022年8月17日 水曜日 04:50

【プログラミング初心者向け】計算機アプリを作ってみよう Part4(TextBlock作成編)

【プログラミング初心者向け】計算機アプリを作ってみよう Part4(TextBlock作成編)

※この記事では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の追加を行いました。次回はボタンの定義と作成をしていきます。

ここまでお読みいただきありがとうございました。

それではまた。

リラ吉

にほんブログ村 にほんブログ村へ

関連記事

【書籍紹介】「一流の頭脳」

皆様こんにちは。リラ吉です。 現代社会において、うつ病などの精神疾患、寿命が延びたことによる認知症の増加は非常に大きな問題になっております。 私自身、仕事で悩み、休職を経験したこともありました。 今回の記事ではそんな精神疾患やうつ病の対策について書かれたスウェーデンの精神科医であるアンダース・ハンセンさん著書「一流の頭脳」についてご紹介します。 本書のポイント 本書に書かれている重要なポイントは下記の5つです。 たとえわずかだったとしても運動をすると集中力の向上、ストレス解消に効果がある習慣的な運動は副作用のないうつ病の「特効薬」にもなる年齢を重ねるごとに脳は縮小していきますが、適度な運動をすることでそれを食い止めることができる運動は脳の海馬や前頭葉の発達を促す運動が脳にとって重要なのは人類の進化が関係している 上記ポイントの最初の3つは運動による効果、4つ目、5つ目はその理由になりますが1~4つ目のポイントはよく聞く話だと思います。 本書で一番面白いと思えるのは5つ目のポイントです。 私たち人間の進化の歴史を見ると約1万年前に農耕を始めました。約200年前に産業革命。そしてここ数十年でネットが普及という歴史になっています。 この歴史で見ると活動量は少なくとも半分に減りましたが、脳そのものは約1万年前からほとんど変わっていないというのが著者の意見です。 人類に限らず、生物は何万年もの年月をかけて緩やかに進化します。では生活様式はというとここ数十年で生物の進化のスピードをはるかにしのぐ速さで変わりました。 この生活様式の変化に脳も身体も追いつけていない状態である、また私たちの脳も身体も1万年前とそこまでかわっていないことから、当時の生活(=活動量が多い生活)に適した作りであり、最大のパフォーマンスを発揮するには適度な活動、つまり運動が必要だというのが著者の意見です。 そのような経緯から、「脳は適度な身体的負荷の下で最高のパフォーマンスをする」「変わらない脳が、速いスピードで変化する生活習慣に適応できず、様々な精神疾患が発生している」と著者は考えています。 感想 多くの方が「運動をすると集中力が上がる」「ストレス解消になる」と言っておりますが、その理由を人類の歴史から考えているのは非常に面白く感じました。 もちろん「運動が脳に良いのは人類の歴史のほとんどで体を動かしていたから」「様々な精神疾患が発生しているのは変化する生活習慣に適応できていないから」という意見が100%正しいかはわかりません。 ただ一つの意見としては参考になりますし、なにより運動をしようという気持ちにさせてくれる本かと思います。 今回の記事では紹介しませんでしたが、本書には効果の高い運動法についても書かれていますので、気になる方がいらっしゃいましたらぜひ購入していただけたらと思います。 それではまた。 リラ吉 一流の頭脳 価格:1760円(税込、送料無料) (2022/7/29時点)楽天で購入

【所有ギター紹介】Gibson Custom Shop Larry Carlton ES-335 “Pilot Run”

皆様こんにちは。リラ吉です。 先日の記事ではLarry Carlton(ラリー・カールトン)の2022年来日公演での使用機材を紹介しました。 来日公演を見に行き、あの記事を書いてから、セミアコがものすごく欲しくなってしまい・・・ 買ってしまいました 買ったギターはこのカラーを見たらわかる方も多いかもしれませんが、 Mr.335こと、Larry CarltonモデルのES-335です。 今回の記事ではこのギターをご紹介します。 特徴 上記の通りこのギターは普通のLarry CarltonモデルのES-335なのですが、実は通常のモデルではありません。 ヘッド裏を見ると「PILOT RUN」の文字があります。 実はこのギター、のちにレギュラー化となった『Larry Carlton Signatire ES-335』発売前のマーケティング用として全世界で50本ほどの限定生産されたモデルです。 ちなみに「PILOT RUN」スタンプは特に初期の物に限られるようで、#20番頃からはヘッド・シリアルは無くFホール内のオレンジ・ラベル上に変更されているようです。 長所・短所 このギターの長所としてまず挙げられるのが、汎用性の高いギターだとということです。練習としていくつかの曲を弾いてみましたが、さすがはES-335、たいていのジャンルには対応できそうな印象がありました(さすがにメタルとかはギターの特徴的にも見た目的にも難しそうですが・・・)。 汎用性が高いということはライブで重宝するということです。 短所としてあげられるのはよく言われていますが、ボディが大きいということです。 私は毎回測るときに1~2cmほど上下しますが、170cm前後の身長です。このくらいの身長だと少しボディが大きく感じてしまいます。といってもここは慣れもあるとは思うのでそのうち気にならなくなるかと思います。また、このボディの大きさがES-335特有の音色を出すためには必要であると言われていますので、短所のような長所とも捉えることができます。 というわけで、今回はGibson Custom Shop Larry Carlton ES-335 "Pilot Run"をご紹介しました。 様々なジャンルで使用できますのでどんどん使っていきたいと思います。 それではまた。 リラ吉

【2022年来日公演版】Larry Carlton(ラリー・カールトン)の使用機材

世界的に有名なギタリストLarry Carlton(ラリー・カールトン)氏。 今回の記事では2022年の横浜公演のセカンドステージで使用したギター・アンプ・エフェクターを紹介いたします。 使用ギター 彼の代名詞といえばGibson ES-335ですが、近年使用しているのはパートナーシップを結び開発したSire H7です。カラーはCherry Sunburstでした。 ご本人が使用しているものは特注モデルかもしれませんが、私達が手に入れられるモデルの新品価格はデジマートさんを見る限り9万3500円です。Gibson ES-335よりは手に入れやすい価格になっております。 使用アンプ アンプはダンブル系のアンプとして有名なBludotone(ブルードトーン)を使用していました。 以前のインタビューで「Bludotoneのアンプはブリュッセルと東京にもあって、ヨーロッパと日本でツアーする時はアメリカから空輸しなくていいんだ」と言っておりましたので、このアンプは「日本に置いてあるアンプ」なのかもしれません(ただ昔のインタビューなので今は日本にないかもしれません)。 (adsbygoogle = window.adsbygoogle || ).push({}); 使用エフェクター・パワーサプライ エフェクターは下記のものを使用しておりました。 BOSS FV-30H/L(ボリュームペダル)Vox Wah(ワウ) ※V847かモディファイされたものか不明Blueline Overdrive(オーバードライブ)Providence CHRONO DELAY DLY-4(ディレイ)FREE THE...

【プログラミング初心者向け】計算機アプリを作ってみよう Part3(Grid作成編)

※この記事ではC#とWPFを使用してアプリを作成しております。MacOSではWPFを使用できませんので、その点はご了承ください。 皆様こんにちは。リラ吉です。 前回は計算機アプリのスタイルを作成しました。今回もUI部分(レイアウト)を作成していきます。 本記事では背景色の変更とGridの作成まで行います。 背景色の変更 まず背景色の変更をします。現在は下の画像のように計算機の背景は真っ白だと思います。これを変更していきます。 やることは前回作ったMainWindow.xamlの</Window.Resources>の下に下記コードを書いていきます。 <Window.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#F9F6EF" Offset="0"/> ...
PVアクセスランキング にほんブログ村

返事を書く

Please enter your comment!
Please enter your name here

最新記事

【プログラミング初心者向け】計算機アプリを作ってみよう Part4(TextBlock作成編)

※この記事では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"> ...

【書籍紹介】「一流の頭脳」

皆様こんにちは。リラ吉です。 現代社会において、うつ病などの精神疾患、寿命が延びたことによる認知症の増加は非常に大きな問題になっております。 私自身、仕事で悩み、休職を経験したこともありました。 今回の記事ではそんな精神疾患やうつ病の対策について書かれたスウェーデンの精神科医であるアンダース・ハンセンさん著書「一流の頭脳」についてご紹介します。 本書のポイント 本書に書かれている重要なポイントは下記の5つです。 たとえわずかだったとしても運動をすると集中力の向上、ストレス解消に効果がある習慣的な運動は副作用のないうつ病の「特効薬」にもなる年齢を重ねるごとに脳は縮小していきますが、適度な運動をすることでそれを食い止めることができる運動は脳の海馬や前頭葉の発達を促す運動が脳にとって重要なのは人類の進化が関係している 上記ポイントの最初の3つは運動による効果、4つ目、5つ目はその理由になりますが1~4つ目のポイントはよく聞く話だと思います。 本書で一番面白いと思えるのは5つ目のポイントです。 私たち人間の進化の歴史を見ると約1万年前に農耕を始めました。約200年前に産業革命。そしてここ数十年でネットが普及という歴史になっています。 この歴史で見ると活動量は少なくとも半分に減りましたが、脳そのものは約1万年前からほとんど変わっていないというのが著者の意見です。 人類に限らず、生物は何万年もの年月をかけて緩やかに進化します。では生活様式はというとここ数十年で生物の進化のスピードをはるかにしのぐ速さで変わりました。 この生活様式の変化に脳も身体も追いつけていない状態である、また私たちの脳も身体も1万年前とそこまでかわっていないことから、当時の生活(=活動量が多い生活)に適した作りであり、最大のパフォーマンスを発揮するには適度な活動、つまり運動が必要だというのが著者の意見です。 そのような経緯から、「脳は適度な身体的負荷の下で最高のパフォーマンスをする」「変わらない脳が、速いスピードで変化する生活習慣に適応できず、様々な精神疾患が発生している」と著者は考えています。 感想 多くの方が「運動をすると集中力が上がる」「ストレス解消になる」と言っておりますが、その理由を人類の歴史から考えているのは非常に面白く感じました。 もちろん「運動が脳に良いのは人類の歴史のほとんどで体を動かしていたから」「様々な精神疾患が発生しているのは変化する生活習慣に適応できていないから」という意見が100%正しいかはわかりません。 ただ一つの意見としては参考になりますし、なにより運動をしようという気持ちにさせてくれる本かと思います。 今回の記事では紹介しませんでしたが、本書には効果の高い運動法についても書かれていますので、気になる方がいらっしゃいましたらぜひ購入していただけたらと思います。 それではまた。 リラ吉 一流の頭脳 価格:1760円(税込、送料無料) (2022/7/29時点)楽天で購入

【所有ギター紹介】Gibson Custom Shop Larry Carlton ES-335 “Pilot Run”

皆様こんにちは。リラ吉です。 先日の記事ではLarry Carlton(ラリー・カールトン)の2022年来日公演での使用機材を紹介しました。 来日公演を見に行き、あの記事を書いてから、セミアコがものすごく欲しくなってしまい・・・ 買ってしまいました 買ったギターはこのカラーを見たらわかる方も多いかもしれませんが、 Mr.335こと、Larry CarltonモデルのES-335です。 今回の記事ではこのギターをご紹介します。 特徴 上記の通りこのギターは普通のLarry CarltonモデルのES-335なのですが、実は通常のモデルではありません。 ヘッド裏を見ると「PILOT RUN」の文字があります。 実はこのギター、のちにレギュラー化となった『Larry Carlton Signatire ES-335』発売前のマーケティング用として全世界で50本ほどの限定生産されたモデルです。 ちなみに「PILOT RUN」スタンプは特に初期の物に限られるようで、#20番頃からはヘッド・シリアルは無くFホール内のオレンジ・ラベル上に変更されているようです。 長所・短所 このギターの長所としてまず挙げられるのが、汎用性の高いギターだとということです。練習としていくつかの曲を弾いてみましたが、さすがはES-335、たいていのジャンルには対応できそうな印象がありました(さすがにメタルとかはギターの特徴的にも見た目的にも難しそうですが・・・)。 汎用性が高いということはライブで重宝するということです。 短所としてあげられるのはよく言われていますが、ボディが大きいということです。 私は毎回測るときに1~2cmほど上下しますが、170cm前後の身長です。このくらいの身長だと少しボディが大きく感じてしまいます。といってもここは慣れもあるとは思うのでそのうち気にならなくなるかと思います。また、このボディの大きさがES-335特有の音色を出すためには必要であると言われていますので、短所のような長所とも捉えることができます。 というわけで、今回はGibson Custom Shop Larry Carlton ES-335 "Pilot Run"をご紹介しました。 様々なジャンルで使用できますのでどんどん使っていきたいと思います。 それではまた。 リラ吉

【2022年来日公演版】Larry Carlton(ラリー・カールトン)の使用機材

世界的に有名なギタリストLarry Carlton(ラリー・カールトン)氏。 今回の記事では2022年の横浜公演のセカンドステージで使用したギター・アンプ・エフェクターを紹介いたします。 使用ギター 彼の代名詞といえばGibson ES-335ですが、近年使用しているのはパートナーシップを結び開発したSire H7です。カラーはCherry Sunburstでした。 ご本人が使用しているものは特注モデルかもしれませんが、私達が手に入れられるモデルの新品価格はデジマートさんを見る限り9万3500円です。Gibson ES-335よりは手に入れやすい価格になっております。 使用アンプ アンプはダンブル系のアンプとして有名なBludotone(ブルードトーン)を使用していました。 以前のインタビューで「Bludotoneのアンプはブリュッセルと東京にもあって、ヨーロッパと日本でツアーする時はアメリカから空輸しなくていいんだ」と言っておりましたので、このアンプは「日本に置いてあるアンプ」なのかもしれません(ただ昔のインタビューなので今は日本にないかもしれません)。 (adsbygoogle = window.adsbygoogle || ).push({}); 使用エフェクター・パワーサプライ エフェクターは下記のものを使用しておりました。 BOSS FV-30H/L(ボリュームペダル)Vox Wah(ワウ) ※V847かモディファイされたものか不明Blueline Overdrive(オーバードライブ)Providence CHRONO DELAY DLY-4(ディレイ)FREE THE...

【プログラミング初心者向け】計算機アプリを作ってみよう Part3(Grid作成編)

※この記事ではC#とWPFを使用してアプリを作成しております。MacOSではWPFを使用できませんので、その点はご了承ください。 皆様こんにちは。リラ吉です。 前回は計算機アプリのスタイルを作成しました。今回もUI部分(レイアウト)を作成していきます。 本記事では背景色の変更とGridの作成まで行います。 背景色の変更 まず背景色の変更をします。現在は下の画像のように計算機の背景は真っ白だと思います。これを変更していきます。 やることは前回作ったMainWindow.xamlの</Window.Resources>の下に下記コードを書いていきます。 <Window.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#F9F6EF" Offset="0"/> ...