Use an Image for a Button

PDF for offline use
Sample Code:
Related Articles:
Related SDKs:

Let us know how you feel about this

Translation Quality


This recipe shows you how to create an image button.


Buttons have a number of different states, and you can set the button image once for all states or assign different values for each state.

To set the ‘default’ image for a button, call SetImage for UIControlState.Normal and that image will be used for all states:

buttonRect = UIButton.FromType(UIButtonType.RoundedRect);
buttonRect.SetImage(UIImage.FromFile ("star-gold45.png"), UIControlState.Normal);

Alternatively you can make each state different, as this image shows:

For the RoundedRect button type, only two states need to be set (the blue highlighted color is automatically applied to the transparent parts of the image):

buttonStarRect= UIButton.FromType(UIButtonType.RoundedRect);
buttonStarRect.SetImage (UIImage.FromFile ("star-gold45.png"), UIControlState.Normal);
buttonStarRect.SetImage (UIImage.FromFile ("star-grey45.png"), UIControlState.Disabled);

For the Custom button type you must supply a separate image for the Highlighted state if you wish the button to look different when pressed.

buttonStarCustom = UIButton.FromType(UIButtonType.Custom);
buttonStarCustom.SetImage (UIImage.FromFile ("star-gold45.png"), UIControlState.Normal);
buttonStarCustom.SetImage (UIImage.FromFile ("star-gold45_sel.png"), UIControlState.Highlighted);
buttonStarCustom.SetImage (UIImage.FromFile ("star-grey45.png"), UIControlState.Disabled);

Additional Information

You can also set the different states using Interface Builder by choosing each one from the drop-down-list in the Attribute Inspector (see the Set Button Text recipe for an example using Interface Builder).

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.