※この記事では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"/>
<GradientStop Color="#A3AAAE" Offset="1"/>
</LinearGradientBrush>
</Window.Background>
今回は勉強も兼ねてグラデーションにしてみました。
背景を追加した状態でデザインタブを押すと
このように色が変わりました。ちゃんとグラデーションになっていますね。
ちなみにグラデーションじゃなくて普通の色にしたいという方は
このようにWidthの横にBackGround=で色を設定すると背景色を変えられます(上の例だと色はBlackです)。
これで背景色の変更は完了です。
Gridの作成
次にGridを作成しますGridとは行と列のことです。Excelのセルを作るイメージです。
このアプリの完成図は
このようになっています。まずはこれが何行何列なのか考えます。
Excelで考えるとわかりやすいかと思いますでの、これと似たようなものをExcelで作ると
このようになります。このExcelの図でわかるように、今回は7行4列のGridを作ります。
7行4列のGridを作るコードは下記になります。
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
上のコードをMainWindow.xamlの<Grid>と</Grid> の間に書きます。下の画像のようになっていれば大丈夫です。
今回書くコードについては以上です。これ以降は解説をしていきます。
コード解説
これがどういうコードなのかというと解説ですが、まずは書いたコードの前半部分を見ていきましょう。
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
1行目に<Grid.RowDefinitions>9行目に</Grid.RowDefinitions>があります。これは「これから行を作るよ」「行を作り終わったよ」という宣言になります。
そして上記の宣言の間に<RowDefinition Height=”*” />を書くと1行できるというのがコードの意味です。今回は7行なのでこのコードを7つ書きました。
列に関しても同様です。
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.ColumnDefinitions>と</Grid.ColumnDefinitions>の間に <ColumnDefinition Width=”*” />を書くことで列を作っています。
ただこのコードを見て
ちょっと待って、行を作る時の一個目が<RowDefinition Height=”40″/>で他が <RowDefinition Height=”*” />になっていてちょっと違うじゃん
と思われた方もいるでしょう。
Height=”40″ というのは「高さを40pixelにしますよ」という意味です。そしてHeight=”*”というのは「高さを均等に分けます」という意味になります。
MainWindow.xamlの8行目を見てみるとHeight=’700’と書いてあります。これはこのアプリの高さは700pixelということを意味します。
この700pixelの行を7つに分けるのですが、最初の行は40pixel、残り6つは余ったpixelを均等に割り振ろうというのがここで追加するコードの意味になります。下の画像のイメージですね。
では列はどうでしょうか?
このアプリの列の幅を見てみると500pixelになっています。列は<ColumnDefinition Width=”*” /> が4つあるので、すべて均等で500/4=125pixelになります。
ではデザインタブを押してどうなっているか見てみます。
ちゃんとGridが出来ているのがわかります。
ですがまだ行と列を区切ったにすぎません。このGridの中身(ボタンなど)を作っていく必要があります。
次回の記事では今回作成したGridに入力あるいは計算した結果、式を表示するTextBlockを作っていきたいと思います。
ここまでお読みいただきありがとうございました。
それではまた。
リラ吉