Button with busyindicator and text centered

[mobileguy]

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]

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]

Thanks a lot for your sample.

It worked!

[Lavanya Anaimuthu]

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.