Github style chervron with icon on button

[David]

I am trying to re create githubs famous ui in xamrain forms however I dont understand how in SFButton I would get the right icon appearing is that possible also how do i pad my text out like t

[Devakumar Dhanapoosanam]

Hi David, 

 

Greetings from Syncfusion. 

 

We have analyzed your query and we can achieve your requirement using the SfButton Content property by adding image icon style as per your requirement. Please refer the below code example. 

 

XAML: 

… 

<buttons:SfButton> 

    <buttons:SfButton.Content> 

        <Grid ColumnDefinitions="Auto, *, Auto"  ColumnSpacing="16" Padding="16"> 

            <Image Grid.Column="0" HorizontalOptions="Start" WidthRequest="30" HeightRequest="30" Source="github_icon.png"/> 

            <Label Grid.Column="1" HorizontalOptions="StartAndExpand" VerticalOptions="Center" 

                   Text="Github" FontSize="20"/> 

            <Image Grid.Column="2" HorizontalOptions="End" WidthRequest="20" HeightRequest="30" Source="chevron_icon.png"/> 

        </Grid> 

    </buttons:SfButton.Content> 

</buttons:SfButton> 

 

Also, we have prepared a sample based on your requirement. Please download the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169051/ze/169051397669817.zip  

 

Output: 

 

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

KB: https://www.syncfusion.com/kb/10808/how-to-create-xamarin-forms-image-button   

 

Please let us know if you need any further assistance on this. 

 

Regards,
Devakumar D 

[David]

Wow this support is unreal for the community edition amazing ;-)

[Devakumar Dhanapoosanam]

Hi David, 

 

Thanks for the update. 

 

We are glad to know that the given solution works. Please let us know if you need any further assistance. 

 

Regards, 

Devakumar D