SFButton with imageAlignment doesn'T seem to work

[Michael]

Hi I am trying to implement a button with a text, where the image is right in front of the text.

Unfortunately I'm not able to succeed. 

I tried all available settings but they all are aligned either in the front or back.

                <buttons:SfButton x:Name="appleLoginButton" IsVisible="{Binding IsAppleSignInAvailable}"

                                  Margin="15"

                                  Text="{i18N:Translate Text=LoginWithApple}" BackgroundColor="White" TextColor="Black" 

                                  ImageSource="apple_logo.png" ShowIcon="True" ImageWidth="50" ImageAlignment="Start"

                                  Command="{Binding LoginWithApple}" >

                </buttons:SfButton>

                <buttons:SfButton x:Name="appleLoginButton2" IsVisible="{Binding IsAppleSignInAvailable}"

                                  Margin="15"

                                  Text="{i18N:Translate Text=LoginWithApple}" BackgroundColor="White" TextColor="Black" 

                                  ImageSource="apple_logo.png" ShowIcon="True" ImageWidth="50" ImageAlignment="End"

                                  Command="{Binding LoginWithApple}" >

                </buttons:SfButton>

                <buttons:SfButton x:Name="appleLoginButton3" IsVisible="{Binding IsAppleSignInAvailable}"

                                  Margin="15"

                                  Text="{i18N:Translate Text=LoginWithApple}" BackgroundColor="White" TextColor="Black" 

                                  ImageSource="apple_logo.png" ShowIcon="True" ImageWidth="50" ImageAlignment="Left"

                                  Command="{Binding LoginWithApple}" >

                </buttons:SfButton>

                <buttons:SfButton x:Name="appleLoginButton4" IsVisible="{Binding IsAppleSignInAvailable}"

                                  Margin="15"

                                  Text="{i18N:Translate Text=LoginWithApple}" BackgroundColor="White" TextColor="Black" 

                                  ImageSource="apple_logo.png" ShowIcon="True" ImageWidth="50" ImageAlignment="Right"

                                  Command="{Binding LoginWithApple}" >

                </buttons:SfButton>

According to the documentation here https://help.syncfusion.com/xamarin/button/customization#image-customization it should be possible by specifying 

ImageAlignment="Left"

I know I can achieve this by manually specifying the Content, but I was wondering about the out of the box solution... 

[Hemalatha Marikumar]

Hi Michael,  

  

Greetings from Syncfusion.  

  

We would like to let you know that Enum values from the ImageAlignment property like 'Left' and 'Right' are used to align the image in the left and right positions of SfButton with the flow direction support (RTL) 

  

‘Start and ‘End values from ImageAlignment are used to align the image at left and right most of SfButton, not in text. 

  

Your requirement “To align the image at left/rightmost of text” has achieved by using the Content property as you mentioned, and another way is to change the WidthRequest property or setting ‘Center’ as HorizontalOptions as per in below code snippet.  

  

  

<StackLayout Margin="0,20,0,0">  

        <buttons:SfButton x:Name="appleLoginButton"   

                        ImageSource="apple_logo.jpg"   

                        Text="Sign In with Apple"   

                        ShowIcon="True"  

                        HorizontalOptions="Center"  

                        ImageAlignment="Start"/>  

  

        <buttons:SfButton x:Name="appleLoginButton1"   

                        ImageSource="apple_logo.jpg"   

                        Text="Sign In with Apple"   

                        ShowIcon="True"  

                        HorizontalOptions="Center"  

                        ImageAlignment="End"/>  

         

    </StackLayout>  

  

  

We have logged UG for modifying the misleading content on alignment values. These changes will be reflected in Live on or before January 20,2021.  

 

Regards,
Hemalatha M. 

[Michael]

Thank you for clarifying! 

Additionally on the example page the Code and XAML presentation use different alignment values which makes it confusing too...

[Hemalatha Marikumar]

Hi Michael, 

 

Thanks for your patience. As we promised earlier, we modify the ImageAlignment Enum values description and also add detailed information along with its code snippet and corresponding output. 

 

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

 

We modified added code snippet, please check it and let us know. 

 

Regards,
Hemalatha M. 

 

[Tim Belvin]

I have a similar issue. I want to use FillAndExpand for HorizontalOptions for the button (the button should be the width the the view. I want the Image to be aligned with the text (e.g. adjacent within 10px or so). Now, the image (whether ImageAlignment is left or right) is aligned on the far side.

[Gayathri Manickam]

Hi Belvin, 

 

We have analyzed your query and we suggest to use the HorizontalTextAlignment property of SfButton to position an image adjacent to the text as per the below code snippet.  

 

<syncfusion:SfButton x:Name="appleLoginButton"    

                        ImageSource="apple_logo.jpg"    

                        Text="Sign In with Apple"    

                        ShowIcon="True"   

                        HorizontalOptions="FillAndExpand"  

                        ImageAlignment="Start" 

                        HorizontalTextAlignment="Start"/> 

  

Regards,  

Gayathri M 

[Tim Belvin]

You suggestion works fine if I wanted the text to not be centered. I want the text to be centered on the button with the graphic close to the button. Here is my code:

<sf:SfButton

            Command="{Binding StartTicket}"

            HorizontalOptions="FillAndExpand"

            HorizontalTextAlignment="Center"

            ImageAlignment="Start"

            IsVisible="{Binding IsOpenTicket, Converter={StaticResource InvertedBoolConverter}}"

            ShowIcon="True"

            Style="{StaticResource CivicSfButton}"

            Text="Start ticket"

            TextColor="White">

            <sf:SfButton.ImageSource>

                <FontImageSource

                    FontFamily="RegularIcon"

                    Glyph="{StaticResource Clock}"

                    Color="White" />

            </sf:SfButton.ImageSource>

        </sf:SfButton>

Changing HorisontalTextAlignment to Start moves the text to the left - not centered. 

[Gayathri Manickam]

Hi Belvin, 

 

Your requirement can be achieved by using Content property of SfButton as shown in the below code snippet. 

 

<syncfusion:SfButton> 

                <syncfusion:SfButton.Content> 

                    <StackLayout Margin="4"  

                                 HorizontalOptions="CenterAndExpand" 

                                 Orientation="Horizontal"> 

                        <Image Source="apple_logo.jpg"  

                               HeightRequest="30"  

                               WidthRequest="30" 

                               HorizontalOptions="Center"  

                               VerticalOptions="Center"/> 

                        <Label Text="Start ticket"  

                                TextColor="White" 

                                HorizontalOptions="Center"  

                                VerticalOptions="Center"/> 

                    </StackLayout> 

                </syncfusion:SfButton.Content> 

            </syncfusion:SfButton> 

 

Regards,  

Gayathri M