どんなアプリにも必ず一つはあるボタン。

ボタンについてまとめてみました。

Buttonの使い方

かりまたかりまた

使い方は簡単で、以下のようにXamlに記述するのみです。

実際にどう動くのか?

WindowsAndroidiPhone
かりまたかりまた

特にプロパティを設定せずにボタンを置いただけだとプラットフォーム毎で大分バラつきがありますね。iPhoneに至っては何も表示されていないように見えますね。

ButtonのPublicプロパティ一覧

BorderColorプロパティ
BorderRadiusプロパティ
BorderWidthプロパティ
Commandプロパティ
CommandParameterプロパティ
ContentLayoutプロパティ
Fontプロパティ
FontAttributesプロパティ
FontFamilyプロパティ
FontSizeプロパティ
Imageプロパティ
Textプロパティ
TextColorプロパティ

Buttonのプロパティを適用してみる(Command, CommandParameter以外)

かりまたかりまた

ButtonのPublicプロパティをざっと使ってみましょう。

Xamlに以下のように記述をしています。

WindowsAndroidiPhone

 

コードビハインドでボタンを設置してみる

りんちゃんりんちゃん

コードビハインドに以下のコードを書いてみるのにゃ~。

りんちゃんりんちゃん

表示のされ方は前述しているので、Windowsでの表示のされ方のみを載せておくにゃ~。

(AndroidとiPhoneのエミューレータが重すぎて話にならない)

プロパティを設定して気付いたこと

ContentLayoutプロパティについて

かりまたかりまた

ContentLayoutプロパティが効いてないっぽい?

私のイメージだと、ボタンの余白が左側にあるので100ピクセル寄ってくれるかなと思ってたんですが。

こう設定すると上手くいくよ!というのがあればぜひ教えてください。

ContentLayoutプロパティについて教えて頂きました

かりまたかりまた

ざまりんふぉーむずマンさんにContentLayoutプロパティについて教えて頂きました!

ContentLayoutはテキストに対して画像をどこに置くかの指定ですね。

かりまたかりまた

ということで早速実践。


かりまたかりまた

ほんまや。

画像とテキストをボタンに同時に設定した場合、デフォルトではテキストの左側に画像が配置されるようですね。

りんちゃんりんちゃん

ざまりんふぉーむずマンさん、情報提供ありがとうにゃ~。

Imageプロパティについて

かりまたかりまた

Imageプロパティを設定してAndroidをデバッグすると何故か落ちます。。。

画像のフォルダパスとかは全てで合わせてるはずなんですが、どうしても落ちます。バグなのか、私の設定ミスなのか…。

プラットフォーム毎の違いについて

りんちゃんりんちゃん

挙げるとしたらキリがないにゃ~。例えば、AndroidではRadiusプロパティが全く効いてなかったり、iPhoneだとBorderColorプロパティのデフォルトが黒色だったりしてるにゃ~。

りんちゃんりんちゃん

これはプラットフォーム毎にデフォルトがどう設定されてるかによって異なってくるのにゃ~。アプリを作る際には、一つのプラットフォームだけでUIを確認するのではなく、一通りのプラットフォームやデバイスで確認するのをオススメするのにゃ~。