[ストアアプリ][入門] Step9. Buttonコントロールを使用する ~背景色の設定~

スポンサーリンク

今回は、最もよく使われる Buttonコントロールを使用する方法について見ていきましょう。

新規でアプリストアのプロジェクトを作成したら Buttonコントロールを配置して以下の通り操作してみましょう。


単色ブラシでの背景色を変更する 

Buttonの背景色を変更するには、Backgroundプロパティの値を変更します。

最も簡単なのは、プロパティウィンドウから変更する方法です。

まずは単色ブラシで背景色を変更してみましょう。

単色ブラシというのは、1色で塗りつぶす方法です。

単色ブラシでの色の設定は以下の方法があります。

  • RGBAの値を直接指定する
    赤、緑、青の色を0~255の範囲で入力します。Aは透明度を%で入力します。
  • 16進数で指定する
    #の後ろに8桁の16新数値を入力します。16進数の値は先頭から2桁ずつに区切り、それぞれ透明度、赤、緑、青の順番で指定します。
  • マウスで直接選択
    マウスで直接背景色となる色を選択します。
  • スポイトで色を取得。
    スポイトを選択すると、画面内のどの場所からでも色を吸い取って背景色に設定することができます。

単色ブラシを使用する

 


グラデーション

今度はグラデーションボタンを作ってみましょう。

MainPage.xamlページに配置した Button コントロールを選択状態にしたら、プロパティウィンドウのBackgroundプロパティを見てください。

グラデーションブラシの設定

最初に[グラデーションブラシ]のボタンをクリックします。

あとは、グラデションの開始点、終了点と色を選択します。

色の選択方法は、単色ブラシで背景色を設定するときの方法と同じです。

開始点、終了点はマウスでドラッグして移動することができます。これによりグラデーションの位置を調整することができます。

開始点の色を選択するには、開始点のつまみを選択した状態で色を選択します。

終了点の色の選択も同様に行います。

開始点と終了点はボタン1つで入れ替えることが可能です。

グラデーションを使用したボタンの例は以下の通りです。

グラデーションを設定したボタン

 

Please follow and like us:

コメント

タイトルとURLをコピーしました