We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Center icon on a button

Thread ID:

Created:

Updated:

Platform:

Replies:

143792 Apr 4,2019 08:37 PM UTC Oct 7,2019 09:23 AM UTC Xamarin.Forms 12
loading
Tags: SfButton
Jiri Matejka
Asked On April 4, 2019 08:37 PM UTC

Hi,

How can I center an icon on the SfButton? I intend to use circle button with image only, no text. Something like the circle button at the bottom of this page: https://www.syncfusion.com/xamarin-ui-controls/button

SfButton provides ImageAlignment property but it can be either Start or End. 

Any way how to center the icon?

thanks

Jiri

Bharathiraja K [Syncfusion]
Replied On April 5, 2019 06:31 AM UTC

Hi Jiri Matejka, 
 
Query: How can I center an icon on the SfButton? 
 
Your requirement can be achieved by using Content property of SfButton. We have prepared the sample using Image content with center alignment of circle in SfButton and it can be downloaded from below link 
 
 
Code Snippet [XAML]: 
<SyncfusionButtons:SfButton 
                HorizontalOptions="Center"
                VerticalOptions="Center"
                BorderWidth="0"
                Grid.Row="0"
                Grid.Column="1"
                IsCheckable="true"
                WidthRequest="40"
                HeightRequest="40"
                CornerRadius="20">
            <SyncfusionButtons:SfButton.Content>
                <Image Source="wow.png" 
                       HeightRequest="20" 
                       WidthRequest="20"
                       HorizontalOptions="Center" 
                       VerticalOptions="Center"/>
            </SyncfusionButtons:SfButton.Content>
        </SyncfusionButtons:SfButton>
 
 
Image Alignment is used for aligning the Image along with Button's Text. For more reference, please refer the our online help document below here. 
 
 
Please let us know, if you have any query, 
 
Regards, 
Bharathi. 


Jiri Matejka
Replied On April 5, 2019 02:13 PM UTC

Works perfectly, thanks for your answer!

Jiri

Hemalatha Marikumar [Syncfusion]
Replied On April 8, 2019 10:07 AM UTC

  
Hi Jiri Matejka,

Thanks for your update.

We gald to know that given solution has been worked fine.Please let us know if you have any other queries.

Regards,

Hemalatha M.


Jassim Rahma
Replied On September 29, 2019 12:59 PM UTC

When using SfButton.Content, how can I reach the Image control inside the SfButoon from the code behind to change the Image Source for example at run time?


Jassim Rahma
Replied On September 29, 2019 02:12 PM UTC

This is working for me

var stringInThisCell22221 = ((SfButton)sender).Content as Grid;
Image imagebutton = stringInThisCell22221.Children[0] as Image;
imagebutton.Source = "Favorite.png";



Thank you


Muneesh Kumar G [Syncfusion]
Replied On September 30, 2019 12:45 PM UTC

Hi Jiri Matejka, 
 
Glad that the issue has been resolved and please get back to us if you need any other assistance.  
   
Thanks,    
Muneesh Kumar G.   
 


Jassim Rahma
Replied On September 30, 2019 04:11 PM UTC

I have one more question here please...

In the latest version(s) of SfButton, is it possible to use to use center icon without having to use SfButton's Content?

What I want to achieve is an button acting like an icon, something like the attached screenshot as an example.



Attachment: ImageButton_4ac6c31f.zip

Muneesh Kumar G [Syncfusion]
Replied On October 1, 2019 07:23 AM UTC

Hi Jassim, 
 
We have analyzed and achieved your requirement by using the ShowIcon property of SfButton. Please refer the below code. 
 
Code snippet [XAML]: 
<syncfusion:SfButton x:Name="iconButtonLeft" 
                 ShowIcon="True" 
                 BackgroundColor="Transparent" 
                 ImageSource="ImageButton.png"           
                 WidthRequest="50" 
                 HeightRequest="50" 
                 CornerRadius="40"> 
</syncfusion:SfButton> 
 
 
 
Screenshot:  
 
 
Note – Please give the background color of image as the button’s background. 
 
Please get back to us for further details 
 
Thanks,    
Muneesh Kumar G.   


Jassim Rahma
Replied On October 4, 2019 01:32 AM UTC

Thanks

Geetha Rajendran [Syncfusion]
Replied On October 4, 2019 12:48 PM UTC

Hi Jassim,   
  
Thanks for the update. Please let us know if you need any further assistance.  
  
Thanks,   
Geetha R. 


Jassim Rahma
Replied On October 5, 2019 01:44 AM UTC

Hi,

Sorry, I am back... One more question please..

Is it possible now to have the below button without a Button Content? I mean just by positioning the image and text?.




Hemalatha Marikumar [Syncfusion]
Replied On October 7, 2019 09:23 AM UTC

Hi Jassim,

You can achieve your requirement by using the ImageAlignment property of SfButton. Please refer the below code.

Code snippet [XAML]:

 
<syncfusion:SfButton x:Name="iconButtonLeft" 
                                       ShowIcon="True" 
                                       BackgroundColor="Transparent" 
                                       ImageSource="ImageButton.png"   
                                       Text="Save" 
                                       TextColor="Red" 
                                       ImageAlignment="Top" 
                                       CornerRadius="40"> 
</syncfusion:SfButton> 
 
 
We have prepared the sample which can be available for downloading in below 

Sample Link – https://www.syncfusion.com/downloads/support/forum/143792/ze/143792-sample1023641348.zip 

Screenshot:
 
 
 
Please get back to us for further assistance. 
 
Regards,
Hemalatha M. 
  
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon