Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

RadioButton Image and text above

DannyBOAHDannyBOAH Member ✭✭
edited December 2020 in Xamarin.Forms

I am trying to create
that do not look round as they are by default but with a background of image and text on them

Image example...

Any idea how can I do it?

Best Answer

  • DannyBOAHDannyBOAH Member ✭✭
    Accepted Answer

    stackoverflow.com/questions/65240698/custom-radiobutton-image-and-text-above

    I hope this link will help for anyone looking for the way to do it.

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    You can first refer to this article: Grouped Radio Buttons in Xamarin Forms
    You can customize your own radiobutton based on above demo.

    The main code is:

        public class RadioOption : INotifyPropertyChanged
        {
            public RadioCategory Category { get; }
            public string Title { get; }
    
            private bool _isSelected { get; set; }
            public bool IsSelected 
            {
                get => _isSelected;
                set
                {
                    if(value != _isSelected)
                    {
                        this._isSelected = value;
                        NotifyPropertyChanged();
                    }
                }
            }
    
            public RadioOption(RadioCategory category, string title, bool isSelected = false)
            {
                this.Category = category;
                this.Title = title;
                this.IsSelected = isSelected;
            }
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            // This method is called by the Set accessor of each property.
            // The CallerMemberName attribute that is applied to the optional propertyName
            // parameter causes the property name of the caller to be substituted as an argument.
            private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }
    
        public enum RadioCategory
        {
            CategoryA,
            CategoryB,
            CategoryC,
            CategoryD
        }
    }
    

    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

  • DannyBOAHDannyBOAH Member ✭✭

    Thanks for the response,

    I read the article you suggested and tried to incorporate it into my project but I still could not figure out how to embed an image instead of a radio button.

    In the article, it seems like he emphasizes more the topic of groups on radio buttons than covering an image for a radio button.

  • DannyBOAHDannyBOAH Member ✭✭
    Accepted Answer

    stackoverflow.com/questions/65240698/custom-radiobutton-image-and-text-above

    I hope this link will help for anyone looking for the way to do it.

Sign In or Register to comment.