Center icon on a button

[Jiri Matejka]

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]

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 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/143792/ze/GETTIN~2-70296463.zip 

 

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. 

 

https://help.syncfusion.com/xamarin/sfbutton/customization#imagealignment 

 

Please let us know, if you have any query, 

 

Regards, 

Bharathi. 

[Jiri Matejka]

Works perfectly, thanks for your answer!

Jiri

[Hemalatha Marikumar]

  

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]

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]

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]

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]

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]

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> 

 

 

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

 

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]

Thanks

[Geetha Rajendran]

Hi Jassim,   

  

Thanks for the update. Please let us know if you need any further assistance.  

  

Thanks,   

Geetha R. 

[Jassim Rahma]

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]

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 

UG link  - https://help.syncfusion.com/xamarin/sfbutton/customization#image-customization 

Screenshot: 

 

 

Please get back to us for further assistance. 

 

Regards,
Hemalatha M.