How to implement RadioBox Control in Xamarin Forms (Android,iOS) ?

AliRaza.5445AliRaza.5445 PKMember ✭✭✭

Hi, I have to implement radio box controls in xamarin forms as shown in the picture above. Since we don't have any control like that in xamarin forms, Can somebody help me how do we implement this into Xamarin.Forms (To target iOS and Android) ?
Thanks

Best Answer

Answers

  • Angelru9Angelru9 ESMember ✭✭✭

    You can try this: https://github.com/XLabs/Xamarin-Forms-Labs/tree/master/src/Forms/XLabs.Forms/Controls/RadioButton

    For example:

    var answers = new List<string>();
    answers.Add("Yes");
    answers.Add("No");
    
    var RadioGroup = new XLabs.Forms.Controls.BindableRadioGroup()
    {
      ItemsSource = answers, 
      Orientation = StackOrientation.Horizontal
    };
    
  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
    You can simply use images,

    Otherwise https://github.com/gruan01/XFControls
  • AliRaza.5445AliRaza.5445 PKMember ✭✭✭

    @Angelru9 How do I use it in XAML?

  • N_BauaN_Baua INMember ✭✭✭✭✭

    @AliRaza.5445 said:
    @Angelru9 How do I use it in XAML?

    Include the namespace in your declaration markup
    example:
    xmlns:ctrls="clr-namespace:AsNum.XFControls;assembly=AsNum.XFControls"

    and call out the implementation as under

    <ctrls:RadioGroup Orientation="Horizontal" ItemsSource="{Binding DisableByBirthDataSource}" OnImg="radiobtnon.png" OffImg="radiobtnoff.png" DisplayPath="Name" SelectedItem="{Binding GenderCollection}"/>

    Do not forget to use the following line in Android MainActivity in OnCreate call
    AsNumAssemblyHelper.HoldAssembly();

    Hope it helps.

    -- N Baua

  • Angelru9Angelru9 ESMember ✭✭✭
    edited September 2017

    @AliRaza.5445 In XAML:

    xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"

     <controls:BindableRadioGroup SelectedIndex="{Binding ItemSelected}" />
    

    @N_Baua said:

    @AliRaza.5445 said:
    @Angelru9 How do I use it in XAML?

    Include the namespace in your declaration markup
    example:
    xmlns:ctrls="clr-namespace:AsNum.XFControls;assembly=AsNum.XFControls"

    and call out the implementation as under

    <ctrls:RadioGroup Orientation="Horizontal" ItemsSource="{Binding DisableByBirthDataSource}" OnImg="radiobtnon.png" OffImg="radiobtnoff.png" DisplayPath="Name" SelectedItem="{Binding GenderCollection}"/>

    Do not forget to use the following line in Android MainActivity in OnCreate call
    AsNumAssemblyHelper.HoldAssembly();

    Hope it helps.

    -- N Baua

    This too it's good idea.

  • AliRaza.5445AliRaza.5445 PKMember ✭✭✭

    @Angelru9 , I copied your code in my project. Everything is same, code is same. But I get weird errors in BindableRadioGroup.cs file that says: "No overload for OnCheckedChanged" matches delegate EventHandler<EventArgs>.
    where this delegate is declared ?

  • AliRaza.5445AliRaza.5445 PKMember ✭✭✭
    edited September 2017

    @NBaua ,
    using (var stm = this.Asm.GetManifestResourceStream(source)) { var bytes = stm.GetBytes(); return ImageSource.FromStream(() => new MemoryStream(bytes)); }

    In the convert method of ResImgConverterBase class, I get an compile time error below this method call: stm.GetBytes();
    This error says that: "Steam does not contain a definition for GetBytes() and no extension method GetBytes accepting first argument of type Stream"

    Can you help me fix this please ?

  • N_BauaN_Baua INMember ✭✭✭✭✭

    Hi @AliRaza.5445,
    I don't know what image you're trying to bind from stream here, if this is for On and Off images for radio buttons, Please use the embedded resources. This will save you from coding hazels as well as it is best practice.

  • AliRaza.5445AliRaza.5445 PKMember ✭✭✭

    Hi @NBaua ,
    I changed build action of image to Embedded Resource but problem is still there. Here is below the code for entire class.
    `public abstract class ResImgConverterBase : IValueConverter
    {

        public virtual Assembly Asm
        {
            get
            {
                return this.GetType().GetTypeInfo().Assembly;
            }
        }
    
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var source = (string)value;
            if (string.IsNullOrWhiteSpace(source))
                return null;
    
            //BUG, 不能使用已经关闭的 Stream
            //var stm = this.Asm.GetManifestResourceStream(source);
            //return ImageSource.FromStream(() => stm);
    
            using (var stm = this.Asm.GetManifestResourceStream(source))
            {
                var bytes = stm.GetBytes();
                return ImageSource.FromStream(() => new MemoryStream(bytes));
            }
    
            ////ImageSource.FromResource 会去反射获取 CallingAssembly
            ////但是如果在这里调用 ImageSource.FromResource, CallingAssembly 就变成当前这个类所在的 Assembly 了。
            //var callingAssemblyMethod = typeof(Assembly).GetTypeInfo().GetDeclaredMethod("GetCallingAssembly");
            //if (callingAssemblyMethod != null) {
            //    var asm = (Assembly)callingAssemblyMethod.Invoke(null, new object[0]);
            //    //var ress = asm.GetManifestResourceNames();
            //    var stm = asm.GetManifestResourceStream(source);
            //    return ImageSource.FromStream(() => {
            //        return stm;
            //    });
            //} else {
            //    var img = ImageSource.FromResource(source);
            //    return img;
            //}
    
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
    

    `

  • N_BauaN_Baua INMember ✭✭✭✭✭

    Those who are looking for the answer.
    use the https://github.com/mattleibow/MultiSelectListView control. You might want to change the SelectableViewCell and insted of boxview use the images of your choice.

    Here is the small video how it looks with default example.

    Hope it helps.

  • neilpatankarneilpatankar INMember

    Hi i am using XFControls for radio group and Can't access selected item in radio group how can i access which radio i selected

Sign In or Register to comment.