enisn / Xamarin.Forms.InputKit

CheckBox, Radio Button, Labeled Slider, Dropdowns etc.
MIT License
588 stars 100 forks source link

Unable to set custom image for RadioButton #127

Open rob7z5 opened 5 years ago

rob7z5 commented 5 years ago

The goal is to have a white background on the circle portion of the radio button and since I could not find a property that would show the background as white and still have the border I attempted to create custom images. PNG circle with solid border and white fill with no background outside the circle.

Create the control from codebehind like so:

var rb = new RadioButton();
// these are cross platform resources (in this case AndroidResource)
rb.CircleImage = "circle_open.png";
rb.CheckedImage = "circle_checked.png"; 

// add it to my RadioButtonGroupView
rbgv.Children.Add(rb);

The control then shows solid color of your defaults or whatever I set color / circle color to in the circle area, no sign of the images I want to use. I have tried various color combinations and transparency trying to get some better result but have yet to see the images.

Whereas I expected to just see the image I set as the checked or unchecked background??

Xamarin.Forms 3.6.0.344457 Android 9 on a Samsung device

Thank you!

enisn commented 5 years ago

@rob7z5 Short answer is unfortunately it's not possible using two color in images. IconView fills all pixels with color of an image. That is used logic to change colors. I think a property can be added as IsFillColorActive or something like this.


But you can try add this:

            rb.ApplyIsCheckedAction = (isChecked) =>
            {
        //you can switch between 2 images when every check changed.
                rb.CircleImage = isChecked ? "my_custom_image.png" : "circle_open.png";

                rb.ApplyIsChecked(isChecked);
            };

Each element uses default Action which named without Action suffix. In this situation, for example: RadioButton calls ApplyIsCheckedAction and this action calls ApplyIsChanged method as default. You can change what will happen when control check changed.