通常ラジオボタンの表面にはテキストが表示されていますが、画像を表示することも可能です。
今回は画像を表示してみましょう。
画像を準備する
まずは画像を準備します。
ソリューションエクスプローラーで [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>
画像を設定したラジオボタンは以下のようになります
実行をすると分かりますが、画像をクリックするとチェック状態が変更されます。
Please follow and like us:
コメント
[…] いては[ストアアプリ][入門] Step24. RadioButtonコントロールを使用する ~ 選択肢として画像を表示する ~の記事を参照してください。 […]