Animations in the Demo - but not in my App...

[Michael]

Hi,

Im testing the SegmentedControl, but the nice animation that I see in the demo app is not happening in my app? What am I missing?

 

 

<telerikInput:RadSegmentedControl x:Name="segmentControl"
                                  HeightRequest="60"
                                  VerticalOptions="Start" AutomationId="MenuSegmentedControl">
                    <telerikInput:RadSegmentedControl.ItemsSource>
                        <x:Array Type="{x:Type x:String}">
                            <x:String>aaa</x:String>
                            <x:String>bbb</x:String>

                        </x:Array>
                    </telerikInput:RadSegmentedControl.ItemsSource>
                </telerikInput:RadSegmentedControl>

 

[Didi]

Hi Michael,

Thank you for the provided code.

The RadSegmentedControl does not provide animations. All examples with the SegmentedControl in our QSF demo app and SDK Browser app do not contain animations. In this case could you please give us more information about the example with the animation?

Looking forward to your reply.

Regards,
Didi
Progress Telerik

[Michael]

It looks like the colors are fading when clicking on the "Tabs"? 

[Lance | Manager Technical Support]

Hello Michael,

We're not able to determine exactly which demo you're referring to. I have a few additional questions so that I can better assist:

- Is this the SDK Browser demos or the QSF demos? (the QSF is the app in the app stores)
- What platform is the demo running on? (iOS, Android or UWP)
- What steps did you take to get to the example? (it could be a different control)

I look forward to your reply.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

[Michael]

Hi,

The demo app is called Telerik UI for Xamarin (R1 2019). Im running it on my iPhone 8.

Im looking at the "Segmented" demo "First Look".

When clicking on the images ("Dinner", "Drinks" or "Snacks") it looks like the colors are fading instead of changing instantly. 

Best regards,
Michael.

[Lance | Manager Technical Support]

Hello Michael,

Thanks for clarifying the specific example. There isn't any specific animation we're doing for that implementation, you can see the exact source code here.

For your convenience, here's the XAML:

<telerikInput:RadSegmentedControl HeightRequest="85"
    SegmentBackgroundColor="White"
    SelectedSegmentBackgroundColor="#0A90D0"
    ItemsSource="{Binding LargeImages}"
    SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
    views:ThemesBehavior.StyleClass="TelerikTheme"
    AutomationId="MenuSegmentedControl"/>

There aren't any custom renderers registered for the SegmentedControl as it's not a native component. The style is just the shipped BlueTheme, you can see who to switch to that here.

Other than that, the control is intentionally animating selection changes, this is why you're getting the result you see. Any animation customizations made after the fact are optional. 

This could be due to differences in Xamarin.Forms versions, the control uses Xamarin.Forms framework components and changes they've made can affect the outcome. If it's critical enough, you could try to match the exact setup as the QSF and see if it makes a difference for you.

I hope this helps!

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik