Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to auto resize control out srollview when scrolling

XFVTINRIXFVTINRI Member ✭✭
edited May 7 in Xamarin.Forms

Hi guy, how to auto resize control out srollview when scrolling like contact detail in ios?
i design 2 stacklayout, one contain control need resize and the other contain scrollview

like this:

any ideas and solutions

Answers

  • XFVTINRIXFVTINRI Member ✭✭

    Please help me! Thanks

  • Saraswati_ChandraSaraswati_Chandra USMember ✭✭✭

    Place both the Layouts in a Grid.

  • Saraswati_ChandraSaraswati_Chandra USMember ✭✭✭

    @XFVTINRI said:
    Please help me! Thanks

    Your need to have a Parent view. Create a Grid, and place both the controls in the Grid rows. Make Row height as per your requirement. Hope it helps

  • XFVTINRIXFVTINRI Member ✭✭
    edited May 8

    @Saraswati_Chandra said:

    @XFVTINRI said:
    Please help me! Thanks

    Your need to have a Parent view. Create a Grid, and place both the controls in the Grid rows. Make Row height as per your requirement. Hope it helps

    I created a Grid and place both the controls in the Grid rows but It does not work as intended. this my code

    Xaml:
    <ContentPage.Content>

    <Grid.RowDefinitions>


    </Grid.RowDefinitions>







            if (Device.RuntimePlatform == Device.iOS)
            {
                NavigationPage.SetHasNavigationBar(this, true);
            }
            else if (Device.RuntimePlatform == Device.Android)
            {
                NavigationPage.SetHasNavigationBar(this, false);
            }
        }
        private void Handle_ScrollChanged(object sender, ScrolledEventArgs e)
        {
            var y = e.ScrollY;
            if (y > 0)
            {
                home.Height = 150 - y;
                home.Width = 150 - y;
            }
            else if (y < 0)
            {
                home.Height = 150 - y;
                home.Width = 150 - y;
            }
        }
    }
    

    I was doing something wrong?

  • XFVTINRIXFVTINRI Member ✭✭

    @Saraswati_Chandra said:

    @XFVTINRI said:
    Please help me! Thanks

    Your need to have a Parent view. Create a Grid, and place both the controls in the Grid rows. Make Row height as per your requirement. Hope it helps

    I did but it didn't work as expected
    this my code

    XAML:
    <ContentPage.Content>

    <Grid.RowDefinitions>


    </Grid.RowDefinitions>







    Code-behind:
    public partial class HomeSetting : ContentPage
    {
    private HomeSettingViewModel home = new HomeSettingViewModel();
    public HomeSetting()
    {
    InitializeComponent();
    BindingContext = home;
    home.Height = 150;
    home.Width = 150;

            if (Device.RuntimePlatform == Device.iOS)
            {
                NavigationPage.SetHasNavigationBar(this, true);
            }
            else if (Device.RuntimePlatform == Device.Android)
            {
                NavigationPage.SetHasNavigationBar(this, false);
            }
        }
        private void Handle_ScrollChanged(object sender, ScrolledEventArgs e)
        {
            var y = e.ScrollY;
            if (y > 0)
            {
                home.Height = 150 - y;
                home.Width = 150 - y;
            }
            else if (y < 0)
            {
                home.Height = 150 - y;
                home.Width = 150 - y;
            }
        }
    }
    
  • XFVTINRIXFVTINRI Member ✭✭

    Can you give me an example, thanks!

  • JarvanJarvan Member, Xamarin Team Xamurai

    Try to detect Scrolled event of ScrollView. You could reset the size of the layout outside the scrollView by judging the value of e.ScrollY. Such as:

    private async void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
    {
        if (e.ScrollY > 250)
        {
            //set layout's size
        }
        else
        {
            //set layout's size
        }
    }
    
  • Saraswati_ChandraSaraswati_Chandra USMember ✭✭✭

    @XFVTINRI said:

    Can you give me an example, thanks!

    I am not clear about your requirement.
    Do you want to have a fixed sized header part and scrollable content part? My suggestion was based on that.

    Please explain your issue/requirement in simple words :)

  • Saraswati_ChandraSaraswati_Chandra USMember ✭✭✭

    If you are aware of your Y-Axis condition based on which you want to resize then you should use, Scrolled event.
    @Jarvan has pointed correctly.

  • XFVTINRIXFVTINRI Member ✭✭
    edited May 11

    @Saraswati_Chandra said:
    If you are aware of your Y-Axis condition based on which you want to resize then you should use, Scrolled event.
    @Jarvan has pointed correctly.

    I want behavior like the picture I provide. If done as @Jarvan , then whenever the top scroll bar will resize according to the scroll ratio. I want detect position scroll in bottom or top, then the new size changes. thanks

  • JarvanJarvan Member, Xamarin Team Xamurai

    I want detect position scroll in bottom or top, then the new size changes.

    Try the following code.

    private async void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
    {
        var scrollView = sender as ScrollView;
    
        if (e.ScrollY == 0)
        {
            //reset the control size
        }
    
        if (scrollView.ContentSize.Height - scrollView.Height < e.ScrollY)
        {
            //reset the control size
        }
    }
    

    Refer to:
    https://stackoverflow.com/questions/57558547/is-there-a-way-to-detect-when-scrollview-reach-bottom-in-xamarin

Sign In or Register to comment.