Animation in Xamarin Forms ListView

prinil1420prinil1420 Member ✭✭

I have one requirement where I need to create a vertical List with Once Box in Center. Once Users scrolls the list, the element which enters the box should show animation like growing Font while entering the box, and smaller Font while leaving the Box.

Please refer the image attached.

I am trying with a ListView for Vertical Scroll and a frame For the centre box.

How Can I achieve animation like this in Xamarin Forms. Please guide me some ways .

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Sounds like a Behavior to apply to the SelectedItem.
    When SelectedItem changes run a little loop changing the binded FontSize

    Question: Is it really always the middle item?
    How does someone else the numbers 1, 2, 3, 4? Are you adding dummy values below 1 so it can roll higher, and dummy values on the back end to scroll down past the end? Or will selection come down below middle when you hit the start of the list?

  • prinil1420prinil1420 Member ✭✭

    @ClintStLaurent So it can be any random number, Not necessary in Sequence and yes it will be always in centre...

    So the thing is here, user ha two options,

    1. User can tap on any item, Once tap we have to scroll that item to the box. And shows animation while going in.
    2. User can just scroll up and down, In that case all the items which is passing through the box has to show Font change animation
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @prinil1420 said:
    1. User can tap on any item, Once tap we have to scroll that item to the box.

    A Picker won't do that out-of-the-box. You know that, right? So are you writing the entire control yourself?

  • prinil1420prinil1420 Member ✭✭

    @ClintStLaurent Yes Picker will not do that... As I want the same view in both iOS and Android. Thats why I thought of taking ListView

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @prinil1420 said:
    @ClintStLaurent Yes Picker will not do that... As I want the same view in both iOS and Android. Thats why I thought of taking ListView

    Ok. But same question: ListView doesn't scroll to the tapped item out of the box. So you'll have to write that. And you can't scroll the first/last items into the middle because there is no item to fill the void above/below that middle slot; so you have to compensate for that. And there is no 'middle' if its an even number of items, less than fill the real estate (say there are only 2 or 4 items).

    Not saying its insurmountable. Just bringing up a couple use-cases if they aren't already on your radar.

  • prinil1420prinil1420 Member ✭✭

    @ClintStLaurent We can write code for DidSelect and we can make it.. The Problem is how to give animation effect just like iOS PickerView when the item is in Middle, its in bold

  • prinil1420prinil1420 Member ✭✭

    @ClintStLaurent Actually that Box is behaving Like a magnify strip.. While the item is going inside, Font is increasing, While its coming out, Font is decreasing

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @prinil1420 said:
    @ClintStLaurent Actually that Box is behaving Like a magnify strip.. While the item is going inside, Font is increasing, While its coming out, Font is decreasing

    I'd probably try to handle it defensively and attempt to future-proof it. In the future there may be more than just text. Instead of adjusting FontSize maybe you apply Scale to everything in the ItemTemplate. That way icons also scale if they get added 6 months from now, etc.

Sign In or Register to comment.