I wanted a RadioButton type of effect with three icons. Click one of the other three and it is set to blue and the other two are coloured red. It’s actually very easy once you know the trick. You have to tell iOS 8 that the each icon image is rendered AlwaysOriginal. UIImageRenderingMode is an enum with three values (AlwaysOriginal, AlwaysTemplate and Automatic).

To display the Icon in a colour, set the RenderingMode to AlwaysOriginal then create a UIButton from it and set the TintColor to whatever you want it to be. Image1 etc are declared at the class level as UIImage, btnOne etc is a UIButton and tbar is a UIToolbar.

  tbar = new UIToolbar(new RectangleF(0, 30, 320, 44)); // hard coded values for toolbar size/location
  View.AddSubview(tbar);

  var Image1 =UIImage.FromBundle("images/image1.png");
  Image1.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
  btnOne = new UIBarButtonItem { Image = Image1, Title = "First Button", TintColor = UIColor.Blue };

// Repeat for button2, 3 etc
//  Add a click handler to each button
   btnOne.Clicked += (s, e) =>
            {
                ClearTints(); // three line method sets all buttons to red
                btnOne.TintColor = UIColor.Blue;
            };
tbar.SetItems(new []{btnOne,btnTwo,btnThree},false );

This shows three icons before and after the second one is selected.

Three icons before and after selection

Leave a Reply

Post Navigation