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.