Easily Create RadioButton in Xamarin.Forms

hqdefault

Introduction :- Radio button is a selection control that allows users to select one option from a list of predefined choices.

In Xamarin.Forms,there is no default RadioButton control available and we need to create our own custom RadioButton control.

Screen: RadioButton Screen.

1

Description:

1 . Create a three folders name like Models, Views, ViewModels.

2 . Create a folders name Converter in this create VisibleConverter class.

 4

3. Use two image one for select.png and another for unselect.png .

4 . Write a code in View folder xaml part.

<Grid HorizontalOptions=”FillAndExpand” VerticalOptions=”FillAndExpand” Margin=”0,0,0,30″>

<Grid.RowDefinitions>

<RowDefinition Height=”Auto”/>

<RowDefinition Height=”40″/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”*”/>

<ColumnDefinition Width=”70″/>

<ColumnDefinition Width=”50″/>

<ColumnDefinition Width=”70″/>

<ColumnDefinition Width=”*”/>

</Grid.ColumnDefinitions>

<StackLayout Grid.Column=”1″ Grid.Row=”0″ VerticalOptions=”CenterAndExpand” HorizontalOptions=”CenterAndExpand” BackgroundColor=”Blue” HeightRequest=”50″ WidthRequest=”50″>

<Image Source=”unselect.png” x:Name=”imggcirclecheck” IsVisible=”{Binding YesRefugeeSelectIcon}” VerticalOptions=”CenterAndExpand” HorizontalOptions=”FillAndExpand”/>

<Image Source=”select.png” IsVisible =”{Binding YesRefugeeSelectIcon, Converter={StaticResource inverseBool}}” VerticalOptions=”CenterAndExpand” HorizontalOptions=”FillAndExpand”/>

<StackLayout.GestureRecognizers>

<TapGestureRecognizer Command=”{Binding YesRefugeeSelectCommand}”/>

</StackLayout.GestureRecognizers>

</StackLayout>

<local:CustomLabelRegular Text=”Yes” TextColor=”Black” FontSize=”16″ Grid.Column=”1″ Grid.Row=”1″ HorizontalOptions=”CenterAndExpand” VerticalOptions=”StartAndExpand” />

<StackLayout Grid.Column=”3″ Grid.Row=”0″ VerticalOptions=”CenterAndExpand” HorizontalOptions=”CenterAndExpand” BackgroundColor=”Blue” HeightRequest=”50″ WidthRequest=”50″>

<Image Source=”unselect.png” x:Name=”imggclosecircle” IsVisible=”{Binding NoRefugeeSelectIcon}” VerticalOptions=”CenterAndExpand” HorizontalOptions=”FillAndExpand”/>

<Image Source=”select.png” IsVisible =”{Binding NoRefugeeSelectIcon, Converter={StaticResource inverseBool}}” VerticalOptions=”CenterAndExpand” HorizontalOptions=”FillAndExpand”/>

<StackLayout.GestureRecognizers>

<TapGestureRecognizer Command=”{Binding NoRefugeeSelectCommand}”/>

</StackLayout.GestureRecognizers>

</StackLayout>

<local:CustomLabelRegular Text=”No” TextColor=”Black” FontSize=”16″ Grid.Column=”3″ Grid.Row=”1″ HorizontalOptions=”CenterAndExpand” VerticalOptions=”StartAndExpand” />

</Grid>

5. Write a code in View folder xaml.cs part.

#region Refugee

private bool yesRefugeeSelectIcon;

public bool YesRefugeeSelectIcon

{

get { return yesRefugeeSelectIcon; }

set

{

yesRefugeeSelectIcon = value;

RaisePropertyChanged(() => YesRefugeeSelectIcon);

}

}

private bool noRefugeeSelectIcon;

public bool NoRefugeeSelectIcon

{

get { return noRefugeeSelectIcon; }

set

{

noRefugeeSelectIcon = value;

RaisePropertyChanged(() => NoRefugeeSelectIcon);

}

}

#endregion

#region Refugee Command

public RelayCommand YesRefugeeSelectCommand

{

get

{

return new RelayCommand(() =>

{

if (NoRefugeeSelectIcon)

{

NoRefugeeSelectIcon = false;

YesRefugeeSelectIcon = !YesRefugeeSelectIcon;

}

else

{

YesRefugeeSelectIcon = !YesRefugeeSelectIcon;

YesRefugeeSelectIcon = true;

}

});

}

}

public RelayCommand NoRefugeeSelectCommand

{

get

{

return new RelayCommand(() =>

{

if (YesRefugeeSelectIcon)

{

YesRefugeeSelectIcon = false;

NoRefugeeSelectIcon = !NoRefugeeSelectIcon;

}

else

{

NoRefugeeSelectIcon = !NoRefugeeSelectIcon;

NoRefugeeSelectIcon = true;

}

});

}

}

#endregion

6 . Write a code in Converter folder in this create VisibleConverter class.

public class VisibleConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

{

if (value is bool)

{

return !(bool)value;

}

return value;

}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

{

return !((bool)value);

}

}

7 . Add code in App.xaml .

<!– Region (Check / UnCheck) –>

<converters:VisibleConverter x:Key=”inverseBool”></converters:VisibleConverter>

<!– EndRegion –>

8 . You wil get the following screen.

2

Hopefully this will help you to understand and we have successfully created a RadioButton in Xamarin.Forms .

Author – Ayaz Shaikh ( Xamarin Developer )

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>