[ストアアプリ][入門] Step24. RadioButtonコントロールを使用する ~ 選択肢として画像を表示する ~

通常ラジオボタンの表面にはテキストが表示されていますが、画像を表示することも可能です。

今回は画像を表示してみましょう。


 

画像を準備する

まずは画像を準備します。

ソリューションエクスプローラーで [Assets]フォルダを右クリックし、[追加]-[既存の項目]をクリックします。

画像の追加

ラジオボタンに表示したい画像を選択します。一度に複数のファイルを選択することが可能です。

画像ファイルの選択


 ラジオボタンに画像を表示する

あとは画像を表示するのみです。

ラジオボタンのContenプロパティに イメージコントロールを使用します。

XAMLの<RadioButton>内にあるContentプロパティは削除し、<RadioButton></RadioButon>の中に<Inage>を入れ、画像を設定します。

画像はSourceプロパティで指定します。画像をAsstesフォルダに入れたので、パスは “Assets/画像ファイル名” になります。

XAMLの例

<RadioButton x:Name="rdoApple" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="41,45,0,0"
             IsChecked="True" >
    <Image Source="Assets/apple.png" Height="223" Width="214" />
</RadioButton>
<RadioButton x:Name="rdoStrawberry" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="342,45,0,0" >
    <Image Source="Assets/strawberry.png" Height="223" Width="214" />
</RadioButton>

 

 

 

 

画像を設定したラジオボタンは以下のようになります

 

実行をすると分かりますが、画像をクリックするとチェック状態が変更されます。画像設定後のラジオボタン

“[ストアアプリ][入門] Step24. RadioButtonコントロールを使用する ~ 選択肢として画像を表示する ~” への1件の返信

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください