Forum Xamarin.Forms

Get an element, inside scrolled method on collectionview

DimChrisDimChris USMember ✭✭✭✭

Is it possible to get an element example a stacklayout inside scrolled method on collectionview?
While user is scrolling, i need to create something like animation when an item is reached to center of collectionview.

Best Answer

  • YelinzhYelinzh Member, Xamarin Team Xamurai
    Accepted Answer

    Sorry for my mistake, we cannot access the controls directly inside collectionView. Instead, try using the bound data. Here is a wordaround to access the StackLayout, you could add a CheckBox inside the stackLayout and detect the CheckedChanged to get the stackLayout as below:

    private void CheckBox_CheckedChanged(object sender, CheckedChangedEventArgs e)
    {
        var checkBox = sender as CheckBox;
        var layout = checkBox.Parent as StackLayout;
    
        if (checkBox.IsChecked)
        {
            layout.BackgroundColor = Color.Red;
        }
        else
        {
            layout.BackgroundColor = Color.Default;
        }
    }
    

    Or create a custom StackLayout control. Here is the related code you could refer to it.

    public class CustomLayout : StackLayout
    {
        public event EventHandler Toggled;
    
    
        static CustomLayout layout;
        public CustomLayout()
        {
            layout = this;
        }
    
        public static readonly BindableProperty IsSelectedProperty = BindableProperty.Create(nameof(IsSelected), typeof(bool), typeof(CustomLayout), null, propertyChanged: OnEventNameChanged);
        public bool IsSelected
        {
            set => SetValue(IsSelectedProperty, value);
            get => (bool)GetValue(IsSelectedProperty);
        }
    
        private static void OnEventNameChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var value = (bool)newValue;
    
            if (value)
            {
                layout.FadeTo(0, 2000, Easing.SinOut);
            }
            else
            {
                layout.FadeTo(100, 0, Easing.SinIn);
            }
        }
    }
    

Answers

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    While user is scrolling, i need to create something like animation when an item is reached to center of collectionview.

    CollectionView defines a Scrolled event which is fired to indicate that scrolling occurred. It's available to get the index of the center item on the screen.

    void OnCollectionViewScrolled(object sender, ItemsViewScrolledEventArgs e)
    {
        var centerIndex = e.CenterItemIndex;
        //do the work with the index
    }
    

    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

  • DimChrisDimChris USMember ✭✭✭✭
    Thank you. I want to get a view. Example a stacklayout
  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited February 23

    I want to get a view. Example a stacklayout

    The item can only be get when the event of the collectionView is triggered. You could set the selectedItem for the collectionView with the index and then get the bound data from the selectedItem.

    Or try to create a custom StackLayout control to add a bool bindable property, add animiation to the custom layout according to the value of the property.

  • DimChrisDimChris USMember ✭✭✭✭
    Thank you. Are you mean in sectionchange event?
  • YelinzhYelinzh Member, Xamarin Team Xamurai

    Yes. When the value of SelectedItem property is changed, the SelectionChanged will be called.

  • DimChrisDimChris USMember ✭✭✭✭

    Thank you Yelinzh. When i am trying an element inside SelectionChanged event i am getting always null

            private async void collectionViewItems_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                var view = sender as StackLayout;
            }
    
  • YelinzhYelinzh Member, Xamarin Team Xamurai
    Accepted Answer

    Sorry for my mistake, we cannot access the controls directly inside collectionView. Instead, try using the bound data. Here is a wordaround to access the StackLayout, you could add a CheckBox inside the stackLayout and detect the CheckedChanged to get the stackLayout as below:

    private void CheckBox_CheckedChanged(object sender, CheckedChangedEventArgs e)
    {
        var checkBox = sender as CheckBox;
        var layout = checkBox.Parent as StackLayout;
    
        if (checkBox.IsChecked)
        {
            layout.BackgroundColor = Color.Red;
        }
        else
        {
            layout.BackgroundColor = Color.Default;
        }
    }
    

    Or create a custom StackLayout control. Here is the related code you could refer to it.

    public class CustomLayout : StackLayout
    {
        public event EventHandler Toggled;
    
    
        static CustomLayout layout;
        public CustomLayout()
        {
            layout = this;
        }
    
        public static readonly BindableProperty IsSelectedProperty = BindableProperty.Create(nameof(IsSelected), typeof(bool), typeof(CustomLayout), null, propertyChanged: OnEventNameChanged);
        public bool IsSelected
        {
            set => SetValue(IsSelectedProperty, value);
            get => (bool)GetValue(IsSelectedProperty);
        }
    
        private static void OnEventNameChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var value = (bool)newValue;
    
            if (value)
            {
                layout.FadeTo(0, 2000, Easing.SinOut);
            }
            else
            {
                layout.FadeTo(100, 0, Easing.SinIn);
            }
        }
    }
    
  • DimChrisDimChris USMember ✭✭✭✭

    Nice Example! thank you i will give it a try!!

Sign In or Register to comment.