I want to have Scrollview be at the center element, after binding elements

rozek1szymonrozek1szymon Member ✭✭
edited January 16 in Xamarin.Forms

Hi, I have an issue, I loads some data to my scroll view, about 20, and I want to get this scroll view be on its middle element on load, any suggestions ?

This is my scrollview

<ScrollView HorizontalScrollBarVisibility="Never" Grid.Row="2" x:Name="calender" Orientation="Horizontal"> <StackLayout BackgroundColor="Blue" BindableLayout.ItemsSource="{Binding CalendarDates}" Orientation="Horizontal"> <BindableLayout.ItemTemplate> <DataTemplate> <Grid> <Label x:Name="date" Text="{Binding Date}"></Label> <Button x:Name="dateButton" TextColor="White" BackgroundColor="Blue" Text="{Binding DateOfMonth}" Command="{Binding BindingContext.GetMeetingFromDayCommand, Source={x:Reference Name=calendarPage}}" CommandParameter="{Binding Source={x:Reference date}, Path=Text}"> </Button> </Grid> </DataTemplate> </BindableLayout.ItemTemplate> </StackLayout> </ScrollView>

Code behind :

public CalendarPage()
{
InitializeComponent();
BindingContext = new CalendarViewModel(calender);

    }

    private void LeftButton_Clicked(object sender, EventArgs e)
    {
        if (calender.ScrollX > 150)
            calender.ScrollToAsync(calender.ScrollX - 150, 0, true);
        else
            calender.ScrollToAsync(0, 0, true);
    }

    private void RightButton_Clicked(object sender, EventArgs e)
    {
        if (calender.ScrollX < calender.ContentSize.Width - calender.Width - 150)
            calender.ScrollToAsync(calender.ScrollX + 150, 0, true);
        else
            calender.ScrollToAsync(calender.ContentSize.Width - calender.Width, 0, true);
    }
Tagged:

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai

    To achieve this, you can display specified items on the screen. Using list view as an example, when the button is clicked, update the data of listview.

    Add data to the viewModel at the beginning, then get the required items from the viewModel and populate the Model to set the binding to the ListView.

    Check the code.

    _ViewModel viewModel = new _ViewModel();
    ObservableCollection<DateTime> list = new ObservableCollection<DateTime>();
    
    _Model model = new _Model();
    model.Count = x;
    model.Dates = list;
    
    for (int i = Count; i< 7; i++)
    {
        for (int j = 0; j<viewModel.models.Count; j++)
        {
            list.Add(viewModel.models[i]);
        }
    }
    
    listview.ItemsSource = model.Dates;
    

    _ViewModel class

    public class _ViewModel
    {
        public _ViewModel()
        {
            this.models = new ObservableCollection<DateTime>();
        }
    
        public ObservableCollection<DateTime> models { get; set; }
    }
    

    _Model class

    public class _Model : INotifyPropertyChanged
    {
        private int count;
        public int Count
        {
            get
            {
                return count;
            }
            set
            {
                if (count != value)
                {
                    count = value;
                    NotifyPropertyChanged();
                }
            }
        }
    
        private ObservableCollection<DateTime> dates;
        public ObservableCollection<DateTime> Dates
        {
            get
            {
                return dates;
            }
            set
            {
                if (dates != value)
                {
                    dates = value;
                    NotifyPropertyChanged();
                }
            }
        }
    
        protected virtual void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
    }
    
Sign In or Register to comment.