Xamarin.Forms に背景画像の透過度設定スライダー追加

彩白 雪乃
LINEで送る
Facebook にシェア
[`livedoor` not found]
[`nifty` not found]
[`yahoo` not found]
[`fc2` not found]
このエントリーをはてなブックマークに追加

アイキャッチ画像は、彩白 雪乃  さんです。

 

今回は、設定ページに背景画像の透過度を調整するスライダーを設置しました。また、「Powered By Yahoo!」ボタンの配置位置を最下端に変更し、ページタイトルの追加もしています。

1、リンクボタンの最下端配置

これは、各コントロールのタグで使用する LayoutOpetion で実現できます。今回は、1つ上のボタンタグに VerticalOptions=”StartAndExpand” を使用しました。

YahooWeather_FormsPage.xaml

LayoutOption には、以下のものがあります。

  • Start: 開始位置にレイアウトする
  • Center: 中央にレイアウトする
  • End: 終端にレイアウトする
  • Fill: いっぱいに広げる
  • StartAndExpand: 開始位置にレイアウトして余白を埋めつくす
  • CenterAndExpand: 中央にレイアウトして余白を埋め尽くす
  • EndAndExpand: 終了位置にレイアウトして余白を埋め尽くす
  • FillAndExpand: いっぱいに広げて余白を埋め尽くす

詳しくはこちらサイトを参考にして下さい。

Xamarin.Formsで画面レイアウトを作るためのレイアウトコントロールの必要最低限

 

2、各ページにタイトルの追加

Navigation Page の場合、これは簡単です。各ページの<ContentPage>タグに Title=”” を追加するだけです。

settingPage.xaml

YahooWeather_FormsPage.xaml

3、背景画像の透過度設定用スライダーの追加

スライダーには値が変化をイベントにするオプション alueChanged=”OnSliderValueChanged” を記載しています。

また、スライダーの値を表示するため、ラベルも加えました。デバッグの目的が一番ですね。

settingPage.xaml

 

スライダーの値変更時に実行するメソッドを settingPage.xaml.cs に追加。

settingPage.xaml.cs

 

YahooWeather_FormsPage.xaml.cs には保存した透過度の設定値を反映するメソッドを設け、イニシャライズ時と10秒ごとの画像切替え時に、そのメソッドを実行する様にしました。

 

YahooWeather_FormsPage.xaml.cs

 

スライダーの位置に応じて背景画像の透過度が変更され、それがメイン画面にも反映する様にしています。

iPhone の場合

Android の場合

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です