[Xamarin.Forms][iOS] RadioButtonのチェック部分の色を変更する
今回はiOSでXamarin.FormsのRadioButtonコントロールのチェック部分の色を任意の色に変更する方法のお話です。
なぜiOS限定かというと、iOSだけRadioButtonに対応するRendererが存在しなくて弄り方特定するまで時間がかかったからです。
(画像のマル部分の色を変更します)
先に結論を書くと、ApplicationのResourceDictionaryの特定のキーを上書きすることで変更できます。
RadioButtonThemeColorが非選択時の外周円の色、RadioButtonCheckMarkThemeColorが選択時の塗りつぶしと外周円の色です。
xamlで書くときはこう......
<Application.Resources>
<SolidColorBrush x:Key="RadioButtonThemeColor" Color="Red" />
<SolidColorBrush x:Key="RadioButtonCheckMarkThemeColor" Color="Blue" />
</Application.Resources>
コードで書くとこうなります。
Application.Current.Resources["RadioButtonThemeColor"] = new SolidColorBrush { Color = Color.Red };
Application.Current.Resources["RadioButtonCheckMarkThemeColor"] = new SolidColorBrush { Color = Color.Blue };
PageのInitializeComponent()でRadioButtonのインスタンスが生成される前に設定しておく必要があります。
さて、どうしてこのように変更するのか順を追って見ていきましょう。
Xamarin.Forms標準でいじれない挙動を変更したい場合、カスタムRendererを作ってネイティブコントロールに干渉していくのが手軽な常套手段となります。 しかし、RadioButtonではiOSだけRendererが存在せず、この常套手段が通用しませんでした。
RadioButtonはControl Template方式で独自の見た目を定義することができるようになっていて、使用されるビジュアル解決の優先順位を表すと次のようになります。
- 個別に設定されたコントロールテンプレート
- プラットフォームごとに設定されたRenderer
- デフォルトのコントロールテンプレート
このため、iOSではRendererがデフォルトのコントロールテンプレートが使用されていました。 そこで参照されていた色が前半の変更方法で示したリソースという訳です。
iOSにはRadioButtonに相当するコントロールが存在しないためこのような作りになったのだと思いますが、プレビュー時点ではiOSもRendererで独自に丸をレンダリングしていた印象があったので苦戦しました。
参考
RadioButtonはControl Templateに関する公式ブログ Beautiful Custom RadioButton with Xamarin.Forms 5 - Xamarin Blog
RadioButtonのデフォルトテンプレートの定義のソースコード Xamarin.Forms/RadioButton.cs at 5.0.0 · xamarin/Xamarin.Forms
フォローしませんか？
お気軽にご依頼・ご相談ください
