Articles in this section
Category / Section

How to create image button in Xamarin.Forms Button?

2 mins read

This KB article explains how to create the image button using Xamarin.Forms button.

Create image button with ImageSource

You can create an image button by using the ImageSource property that is used to set the image in button. In addition, you have to set the value of the ShowIcon property as true.

 

The following code example shows how to use ImageSource to instantiate an image button.

 

 <button:SfButton ShowIcon="True" BackgroundColor="DeepSkyBlue" 
                         HeightRequest="50" WidthRequest="45" CornerRadius="5" ImageSource="alarm.png"/>

 

The following image illustrates the result of the code.

ImageButton using ImageSource

Create image button with content

The Content property on our button is used to add any content view inside the button. You can use this Content property to create an image button.

 

The following code example shows how to use Content to instantiate an image button.

 

<button:SfButton BackgroundColor="DeepSkyBlue" CornerRadius="5" >
       <button:SfButton.Content>
             <Grid HeightRequest="45" WidthRequest="100" Margin="15">
                  <Image Source="alarm.png" />
              </Grid>
       </button:SfButton.Content>
</button:SfButton>

 

The following image illustrates the result of the code.

ImageButton using Content

Create image button with text

You can also create an image button with text using the properties Text and ImageSource.

 

The following code example shows how to create an image button with text and image.

 

<button:SfButton ImageSource="alarm.png"
                 HeightRequest="50" WidthRequest="95"  TextColor="Black"
                 ShowIcon="True" BackgroundColor="DeepSkyBlue" Text="Alarm"
                 CornerRadius="5" >

 

The following image illustrates the result of the code.

ImageButton with TextContent and Image

You can also change the alignment of the image in the button using the ImageAlignment property as shown in the example below.

 

<button:SfButton ImageSource="alarm.png" ImageAlignment="End"
                 TextColor="Black" ShowIcon="True" BackgroundColor="DeepSkyBlue"                 
                 Text="Alarm" CornerRadius="5" >

 

The following image illustrates the result of the code.

ImageButton with TextContent and ImageAlignment

A working sample can be downloaded from ImageButton_Sample

 

See Also:

 

How to create simple button

 

How to set image in button background

 

How to create image button with label

 

How to create button with label and image alignment

 

Also refer our feature tour page to know more about the features available in our button.


Conclusion

I hope you enjoyed learning about how to create image button in Xamarin.Forms Button.

You can refer to our Xamarin.Forms Button feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial
to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied