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

Button with busyindicator and text centered


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

3 Replies

HM Hemalatha Marikumar Syncfusion Team 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.  



MO mobileguy January 14, 2020 06:25 PM UTC

Thanks a lot for your sample.
It worked!



LA Lavanya Anaimuthu Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon