Sample for custom view with activity indicator

[Unknown]

Hello,

One of the the features listed for Sfbutton is the custom view for button that shows processing indicator within button. Is there a sample on how that can be implemented?

Thanks

Apurva

[Bharathiraja K]

Hi Apurva, 

 

Greetings from Syncfusion. We can add any kind of view as custom view inside the SfButton by below  

 

Code Snippet [XAML] 

<buttons:SfButton HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" HeightRequest="60" CornerRadius="20"> 

            <buttons:SfButton.ControlTemplate> 

                <ControlTemplate> 

                    <StackLayout Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="FillAndExpand" > 

                    <busyindicator:SfBusyIndicator HorizontalOptions="Start" x:Name="busyindicator" AnimationType="Ball" IsBusy="True" ViewBoxWidth = "50" ViewBoxHeight="50" TextColor="Maroon" /> 

                        <Label HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" VerticalOptions="Center" Text="Processing" FontSize="20" /> 

                    </StackLayout> 

                </ControlTemplate> 

            </buttons:SfButton.ControlTemplate> 

        </buttons:SfButton> 

 

We have prepared the sample based on your requirement, that can be downloaded from below location. 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomizeButton1305748886.zip  

 

Output:  

 

 

Regards, 

Bharathi. 

[Eugen Dolgi]

Button with ControlTemplate does not work under UWP! Button is not displayed completely. Not in your sample either. I tested versions 17.1.0.38 and 16.4.0.54.

[Hemalatha Marikumar]

Hi Apurva,

Sorry for the inconvenience caused.

Your requirement has been achieve by using suggested "Content" property in SfButton. We have prepared the sample based on the Content property which has been download from below link

Sample Link: http://www.syncfusion.com/downloads/support/forum/143644/ze/SimpleSampleExample-888740433

Code Example:
  

<buttons:SfButton HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" HeightRequest="60" CornerRadius="20">
         <buttons:SfButton.Content>
                      <StackLayout Orientation="Horizontal" BackgroundColor="LightBlue" VerticalOptions="Start" HorizontalOptions="FillAndExpand" >
                                <busyindicator:SfBusyIndicator HorizontalOptions="Start" x:Name="busyindicator" AnimationType="SlicedCircle" IsBusy="True" ViewBoxWidth = "30" ViewBoxHeight="30" TextColor="Maroon" />
                              <Label HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" VerticalOptions="Center" Text="Processing..." FontSize="20" />
                    </StackLayout>
        </buttons:SfButton.Content>
</buttons:SfButton>

Please let us know if you have any concern.

Regards,
Hemalatha M. 

[Unknown]

Thank you so much for the help! These code samples helped me make it work!!

[Bharathiraja K]

Hi Apurva, 

 

We are glad that the reported problem resolved at your end. 

 

Regards, 

Bharathi.