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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Button with busyindicator and text centered

Thread ID:

Created:

Updated:

Platform:

Replies:

150562 Jan 11,2020 09:29 AM UTC Jan 16,2020 04:15 AM UTC Xamarin.Forms 3
loading
Tags: SfButton
mobileguy
Asked On January 11, 2020 09:29 AM UTC


Hi I would like to have a  button with a busy indicator where the text is centered 
I have tried few things but I cannot get the text centered when the busyindicator is not visible.


<buttons:SfButton HeightRequest="40" CornerRadius="20" HorizontalOptions="Center" VerticalOptions="Center" Margin="90">
            <buttons:SfButton.Content>
                <StackLayout Orientation="Horizontal">
                    <xForms:SfBusyIndicator AnimationType="SingleCircle" 
                                            IsBusy="{Binding IsBusy}" 
                                            TextColor="White" 
                                            WidthRequest="50" />
                    <Label Text="Save" FontSize="20" 
                           HorizontalTextAlignment="Center" 
                           VerticalTextAlignment="Center" 
                           TextColor="White" />
                </StackLayout>
            </buttons:SfButton.Content>
        </buttons:SfButton>

               

Am i missing something basic here?
thanks

Hemalatha Marikumar [Syncfusion]
Replied On January 13, 2020 12:21 PM UTC

Hi Mobileguy, 
 
Greetings from Syncfusion.  
 
We have checked the reported query and you can resolve this by changing the content of Button’s layout as Grid as per in below code snippet 
 
Code Snippet [XAML]: 
 
<buttons:SfButton HeightRequest="40" CornerRadius="20" HorizontalOptions="Center" VerticalOptions="Center" Margin="90"> 
            <buttons:SfButton.Content> 
                <Grid> 
                    <Grid.ColumnDefinitions> 
                        <ColumnDefinition Width="*"/> 
                        <ColumnDefinition Width="*"/> 
                    </Grid.ColumnDefinitions> 
                    <xForms:SfBusyIndicator AnimationType="SingleCircle" WidthRequest="50" 
                                            TextColor="Green" /> 
                    <Label Text="Save" FontSize="20" Grid.Column="1" 
                           HorizontalTextAlignment="Start"  
                           VerticalTextAlignment="Center"  
                           TextColor="White" /> 
 
                </Grid> 
                  
            </buttons:SfButton.Content> 
        </buttons:SfButton> 
 
Since provided second view takes only its available space while adding inside the StackLayout. Please try and let us know if you have any other concern. 
 
Regards, 
Hemalatha M.  


mobileguy
Replied On January 14, 2020 06:25 PM UTC

Thanks a lot for your sample.
It worked!


Lavanya Anaimuthu [Syncfusion]
Replied On January 16, 2020 04:15 AM UTC

Hi Mobileguy, 
 
Thanks for your update.  
  
We are glad to hear that given solution works.  
  
Please let us know if you need any further assistance. 
 
Thanks, 
Lavanya A. 


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