{"id":48476,"date":"2021-01-29T10:00:58","date_gmt":"2021-01-29T18:00:58","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/xamarin\/?p=48476"},"modified":"2021-01-28T14:08:58","modified_gmt":"2021-01-28T22:08:58","slug":"beautiful-custom-radiobutton-with-xamarin-forms-5","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/beautiful-custom-radiobutton-with-xamarin-forms-5\/","title":{"rendered":"Beautiful Custom RadioButton with Xamarin.Forms 5"},"content":{"rendered":"

This weekend I was looking to update my settings page on my latest app, My Cadence<\/a>, and introduce a new option to allow the user to select a default theme for their application. There are a few ways to implement this features. In previous applications I have built, I have used the Picker<\/a> control to give users the option to pick a setting:<\/p>\n

\"Picker<\/p>\n

This is a pretty good experience, however I wanted to see if there was something new in Xamarin.Forms 5<\/a> that I could leverage to create a better experience. Browsing the documentation<\/a> I stumbled upon the brand new RadioButton<\/a> control that is fully templatable! This means you can completely customize the look and feel of the control while still maintaining the functionality of the control.<\/p>\n

So, let’s take a look at how to leverage this new feature to create a new way for my users to select the theme.<\/p>\n

Enter RadioButton!<\/h2>\n

The first thing to do is to add the RadioButton to your application. To create a theme selection UI we will create a Grid<\/code> with 3 columns each with a RadioButton<\/code> in it.<\/p>\n

<Grid\n    ColumnDefinitions=\"*,*,*\"\n    ColumnSpacing=\"10\">\n    <RadioButton IsChecked=\"True\" Content=\"System Default\"\/>\n    <RadioButton Grid.Column=\"1\" Content=\"Light\"\/>\n    <RadioButton Grid.Column=\"2\" Content=\"Dark\"\/>\n<\/Grid>\n<\/code><\/pre>\n
This will result with the default control that displays the RadioButton besides text.<\/p>\n
\n  \"Default\n<\/center><\/p>\n
One of the beautiful parts of the new RadioButton is that it has control templating<\/a> built in. This means you can override the default template that is a Label<\/code> with anything!<\/p>\n
Control Template<\/h2>\n
In our ContentPage.Resources<\/code> we can add a new control template that can be applied to the RadioButton<\/code>. It controls what the RadioButton<\/code> looks like and even has access to the VisualStateManager<\/code> so we can customize what the Checked<\/code> state looks like. Now, this is a bit of code, but what we are creating in a template where we are drawing the circle in the top right of a frame that has a ContentPresenter<\/code> in the main area in which we can fill in any UI we want.<\/p>\n
   <ContentPage.Resources>\n        <ResourceDictionary>\n\n            <Color x:Key=\"LightRadioButtonColor\">#F3F2F1<\/Color>\n            <Color x:Key=\"DarkRadioButtonColor\">#9B9A99<\/Color>\n\n            <ControlTemplate x:Key=\"ThemeRadioTemplate\">\n                <Frame\n                    Padding=\"0\"\n                    BackgroundColor=\"{AppThemeBinding Dark={StaticResource DarkRadioButtonColor},\n                                                      Light={StaticResource LightRadioButtonColor}}\"\n                    BorderColor=\"{AppThemeBinding Dark={StaticResource DarkRadioButtonColor},\n                                                  Light={StaticResource LightRadioButtonColor}}\"\n                    HasShadow=\"False\"\n                    HeightRequest=\"80\"\n                    HorizontalOptions=\"Start\"\n                    VerticalOptions=\"Start\"\n                    WidthRequest=\"80\">\n                    <Grid Margin=\"4\" WidthRequest=\"80\">\n                        <Grid\n                            HeightRequest=\"20\"\n                            HorizontalOptions=\"End\"\n                            VerticalOptions=\"Start\"\n                            WidthRequest=\"20\">\n                            <Ellipse\n                                Fill=\"White\"\n                                HeightRequest=\"18\"\n                                HorizontalOptions=\"Center\"\n                                Stroke=\"#2E2545\"\n                                StrokeThickness=\"1\"\n                                VerticalOptions=\"Center\"\n                                WidthRequest=\"18\" \/>\n                            <Ellipse\n                                x:Name=\"Check\"\n                                BackgroundColor=\"Transparent\"\n                                Fill=\"#df6e57\"\n                                HeightRequest=\"10\"\n                                HorizontalOptions=\"Center\"\n                                Stroke=\"#df6e57\"\n                                StrokeThickness=\"0\"\n                                VerticalOptions=\"Center\"\n                                WidthRequest=\"10\" \/>\n                        <\/Grid>\n                        <!-- This enables us to put in dynamic content -->\n                        <ContentPresenter \/>\n                    <\/Grid>\n                    <VisualStateManager.VisualStateGroups>\n                        <VisualStateGroupList>\n                            <VisualStateGroup x:Name=\"CheckedStates\">\n                                <VisualState x:Name=\"Checked\">\n                                    <VisualState.Setters>\n                                        <Setter Property=\"BorderColor\" Value=\"#df6e57\" \/>\n                                        <Setter TargetName=\"Check\" Property=\"Opacity\" Value=\"1\" \/>\n                                    <\/VisualState.Setters>\n                                <\/VisualState>\n                                <VisualState x:Name=\"Unchecked\">\n                                    <VisualState.Setters>\n                                        <Setter Property=\"BorderColor\" Value=\"#F3F2F1\" \/>\n                                        <Setter TargetName=\"Check\" Property=\"Opacity\" Value=\"0\" \/>\n                                    <\/VisualState.Setters>\n                                <\/VisualState>\n                            <\/VisualStateGroup>\n                        <\/VisualStateGroupList>\n                    <\/VisualStateManager.VisualStateGroups>\n                <\/Frame>\n            <\/ControlTemplate>\n        <\/ResourceDictionary>\n    <\/ContentPage.Resources>\n<\/code><\/pre>\n
We can now apply this template to each RadioButton<\/code>. It will continue to use our text label content but apply the control template that we just setup.<\/p>\n
<Grid ColumnDefinitions=\"*,*,*\" ColumnSpacing=\"10\">\n    <RadioButton ControlTemplate=\"{StaticResource ThemeRadioTemplate}\" Content=\"Default\" IsChecked=\"True\" \/>\n    <RadioButton ControlTemplate=\"{StaticResource ThemeRadioTemplate}\" Grid.Column=\"1\" Content=\"Light\" \/>\n    <RadioButton ControlTemplate=\"{StaticResource ThemeRadioTemplate}\" Grid.Column=\"2\" Content=\"Dark\" \/>\n<\/Grid>\n<\/code><\/pre>\n
\n  \"Radio\n<\/center><\/p>\n
We aren’t done though as we can now leverage the ContentPresenter<\/code> and set the Content<\/code> to anything that we want. For this UI I want to put in an Image (in this case a FontAwesome label) and text on the bottom.<\/p>\n
<RadioButton.Content>\n    <StackLayout HorizontalOptions=\"Center\" VerticalOptions=\"Center\">\n        <Image Scale=\"0.75\" Source=\"{FontImage FontFamily=FA, Glyph={x:Static helpers:FAIcons.UserCog}, Color=#323130}\" \/>\n        <Label FontSize=\"Small\" Text=\"System\" TextColor=\"#323130\" \/>\n    <\/StackLayout>\n<\/RadioButton.Content>\n<\/code><\/pre>\n
The full XAML for all three RadioButton<\/code> controls would look a bit like this:<\/p>\n
<RadioButton ControlTemplate=\"{StaticResource ThemeRadioTemplate}\" IsChecked=\"True\">\n    <RadioButton.Content>\n        <StackLayout HorizontalOptions=\"Center\" VerticalOptions=\"Center\">\n            <Image Scale=\"0.75\" Source=\"{FontImage FontFamily=FA, Glyph={x:Static helpers:FAIcons.UserCog}, Color=#323130}\" \/>\n            <Label FontSize=\"Small\" Text=\"System\" TextColor=\"#323130\" \/>\n        <\/StackLayout>\n    <\/RadioButton.Content>\n<\/RadioButton>\n<RadioButton ControlTemplate=\"{StaticResource ThemeRadioTemplate}\" Grid.Column=\"1\">\n    <RadioButton.Content>\n        <StackLayout HorizontalOptions=\"Center\" VerticalOptions=\"Center\">\n            <Image Scale=\"0.75\" Source=\"{FontImage FontFamily=FA, Glyph={x:Static helpers:FAIcons.Sun}, Color=#323130}\" \/>\n            <Label FontSize=\"Small\" Text=\"Light\" TextColor=\"#323130\" \/>\n        <\/StackLayout>\n    <\/RadioButton.Content>\n<\/RadioButton>\n<RadioButton ControlTemplate=\"{StaticResource ThemeRadioTemplate}\" Grid.Column=\"2\">\n    <RadioButton.Content>\n        <StackLayout HorizontalOptions=\"Center\" VerticalOptions=\"Center\">\n            <Image Scale=\"0.75\" Source=\"{FontImage FontFamily=FA, Glyph={x:Static helpers:FAIcons.Moon}, Color=#323130}\" \/>\n            <Label FontSize=\"Small\" Text=\"Dark\" TextColor=\"#323130\" \/>\n        <\/StackLayout>\n    <\/RadioButton.Content>\n<\/RadioButton>\n<\/code><\/pre>\n
This will result in great cross-platform custom RadioButton<\/code>!<\/p>\n
\n  \"Final\n<\/center><\/p>\n
Learn More<\/h2>\n
Checkout the full documentation for RadioButton<\/a> and also control templating<\/a> for more insight on how to implement this in your app.<\/p>\n
You can also browse the source code of LosGatos on GitHub<\/a>, which is a delightful sample from David Ortinau that uses this technique.<\/p>\n","protected":false},"excerpt":{"rendered":"
Xamarin.Forms 5 introduced control templates for the new RadioButton control that gives you complete control and customization over the user interface.<\/p>\n","protected":false},"author":544,"featured_media":48477,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,1,367],"tags":[9193,9194,9168],"class_list":["post-48476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","category-xamarin","category-xamarin-forms","tag-control-template","tag-radio-button","tag-xamarin-forms-5"],"acf":[],"blog_post_summary":"
Xamarin.Forms 5 introduced control templates for the new RadioButton control that gives you complete control and customization over the user interface.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/48476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/544"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=48476"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/48476\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/48477"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=48476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=48476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=48476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}