{"id":858,"date":"2018-09-26T10:49:17","date_gmt":"2018-09-26T10:49:17","guid":{"rendered":"http:\/\/www.inwizards.com\/blog\/?p=858"},"modified":"2023-03-21T10:07:18","modified_gmt":"2023-03-21T10:07:18","slug":"how-to-make-checkboxes-in-xamarin-forms","status":"publish","type":"post","link":"https:\/\/www.inwizards.com\/blog\/how-to-make-checkboxes-in-xamarin-forms\/","title":{"rendered":"How to Make Checkboxes in Xamarin Forms"},"content":{"rendered":"<p style=\"text-align: justify;\"><strong>Introduction :-\u00a0<\/strong>In Xamarin.Forms, there is no default CheckBox control available and we need to create our own custom CheckBox control. This article can explain you about to create CheckBox control and it&#8217;s properties.<\/p>\n<p style=\"text-align: justify;\"><strong>Screen: CheckBox Screen<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-859\" src=\"https:\/\/i1.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/1-3.png?resize=201%2C300&#038;ssl=1\" alt=\"\" width=\"201\" height=\"300\" srcset=\"https:\/\/i1.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/1-3.png?resize=201%2C300&amp;ssl=1 201w, https:\/\/i1.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/1-3.png?w=339&amp;ssl=1 339w\" sizes=\"(max-width: 201px) 100vw, 201px\" data-recalc-dims=\"1\" \/><\/p>\n<p style=\"text-align: justify;\"><strong>Description:<\/strong><br \/>\n<strong>1 .<\/strong> Create a three folders name like Models, Views, ViewModels.<\/p>\n<p style=\"text-align: justify;\"><strong>2 .<\/strong> Create a folders name Converter in this create VisibleConverter class.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" class=\"aligncenter size-medium wp-image-860\" src=\"https:\/\/i0.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/2-3.png?resize=300%2C233&#038;ssl=1\" alt=\"\" width=\"300\" height=\"233\" srcset=\"https:\/\/i0.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/2-3.png?resize=300%2C233&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/2-3.png?w=365&amp;ssl=1 365w\" sizes=\"(max-width: 300px) 100vw, 300px\" data-recalc-dims=\"1\" \/><\/p>\n<p style=\"text-align: justify;\"><strong>3.<\/strong> Use two image one for select.png and another for unselect.png .<\/p>\n<p><strong>4 .<\/strong> Write a code in View folder xaml part.<\/p>\n<p align=\"LEFT\">&lt;StackLayout VerticalOptions=&#8221;CenterAndExpand&#8221; HorizontalOptions=&#8221;CenterAndExpand&#8221;&gt;<\/p>\n<p>&lt;Image Source=&#8221;unselect.png&#8221; IsVisible=&#8221;{Binding AgeSelectIcon}&#8221; VerticalOptions=&#8221;CenterAndExpand&#8221; HorizontalOptions=&#8221;FillAndExpand&#8221;\/&gt;<\/p>\n<p>&lt;Image Source=&#8221;select.png&#8221; IsVisible =&#8221;{Binding AgeSelectIcon, Converter={StaticResource inverseBool}}&#8221; VerticalOptions=&#8221;CenterAndExpand&#8221; HorizontalOptions=&#8221;FillAndExpand&#8221;\/&gt;<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-1542270097115731\" data-ad-slot=\"5976953901\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p>&lt;StackLayout.GestureRecognizers&gt;<\/p>\n<p>&lt;TapGestureRecognizer Command=&#8221;{Binding AgeSelectCommand}&#8221;\/&gt;<\/p>\n<p>&lt;\/StackLayout.GestureRecognizers&gt;<\/p>\n<p>&lt;local:CustomLabelBold Text=&#8221;I am age 18 or older&#8221; TextColor=&#8221;Black&#8221; FontSize=&#8221;18&#8243; HorizontalOptions=&#8221;StartAndExpand&#8221; VerticalOptions=&#8221;CenterAndExpand&#8221;\/&gt;<\/p>\n<p>&lt;\/StackLayout&gt;<\/p>\n<p style=\"text-align: justify;\"><strong>5 .<\/strong> Write a code in ViewModel folder part.<\/p>\n<p style=\"text-align: justify;\">#region Property<\/p>\n<p style=\"text-align: justify;\">private bool ageSelectIcon;<br \/>\npublic bool AgeSelectIcon<br \/>\n{<br \/>\nget { return ageSelectIcon; }<br \/>\nset<br \/>\n{<br \/>\nageSelectIcon = value;<br \/>\nRaisePropertyChanged(() =&gt; AgeSelectIcon);<br \/>\n}<br \/>\n}<\/p>\n<p style=\"text-align: justify;\">#endregion<\/p>\n<p style=\"text-align: justify;\">#region Commands<\/p>\n<p style=\"text-align: justify;\">public RelayCommand AgeSelectCommand<br \/>\n{<br \/>\nget<br \/>\n{<br \/>\nreturn new RelayCommand(() =&gt;<br \/>\n{<br \/>\nAgeSelectIcon = !AgeSelectIcon;<br \/>\n});<br \/>\n}<br \/>\n}<\/p>\n<p style=\"text-align: justify;\">#endregion<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify;\"><strong>6 .<\/strong> Write a code in Converter folder in this create VisibleConverter class.<\/p>\n<p style=\"text-align: justify;\">public class VisibleConverter : IValueConverter<br \/>\n{<br \/>\npublic object Convert(object value, Type targetType, object parameter, CultureInfo culture)<br \/>\n{<br \/>\nif (value is bool)<br \/>\n{<br \/>\nreturn !(bool)value;<br \/>\n}<br \/>\nreturn value;<br \/>\n}<\/p>\n<p style=\"text-align: justify;\">public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)<br \/>\n{<br \/>\nreturn !((bool)value);<br \/>\n}<br \/>\n}<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify;\"><strong>7 .<\/strong> Add code in App.xaml .<\/p>\n<p style=\"text-align: justify;\"><!-- Region (Check \/ UnCheck) --><\/p>\n<p>&lt;!&#8211; Region (Check \/ UnCheck) &#8211;&gt;<\/p>\n<p>&lt;converters:VisibleConverter x:Key=&#8221;inverseBool&#8221;&gt;&lt;\/converters:VisibleConverter&gt;<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-1542270097115731\" data-ad-slot=\"5976953901\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p>&lt;!&#8211; EndRegion &#8211;&gt;<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify;\"><strong>8 .<\/strong> You wil get the following screen.<\/p>\n<p style=\"text-align: justify;\">This screen for Unselect image.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-862\" src=\"https:\/\/i2.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/4-1.png?resize=278%2C51&#038;ssl=1\" alt=\"\" width=\"278\" height=\"51\" data-recalc-dims=\"1\" \/><\/p>\n<p style=\"text-align: justify;\">This screen for Select image.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-863\" src=\"https:\/\/i1.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/5-1.png?resize=276%2C47&#038;ssl=1\" alt=\"\" width=\"276\" height=\"47\" data-recalc-dims=\"1\" \/><\/p>\n<p style=\"text-align: justify;\">Hopefully this will help you to understand and we have successfully created a CheckBox in Xamarin.Forms .<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction :-\u00a0In Xamarin.Forms, there is no default CheckBox control available and we need to create our own custom CheckBox control. This article can explain you about to create CheckBox control and it&#8217;s properties. Screen: CheckBox Screen Description: 1 . Create<\/p>\n","protected":false},"author":1,"featured_media":864,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"spay_email":""},"categories":[1],"tags":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2018\/09\/nzKn9.png?fit=1004%2C778&ssl=1","_links":{"self":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts\/858"}],"collection":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/comments?post=858"}],"version-history":[{"count":4,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts\/858\/revisions"}],"predecessor-version":[{"id":1971,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts\/858\/revisions\/1971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/media\/864"}],"wp:attachment":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/media?parent=858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/categories?post=858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/tags?post=858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}