.NET Maui how to scroll to specific element?

Question

I am new to .NET MAUI.

I have a calendar:

And this is my XAML:

<VerticalStackLayout HorizontalOptions="Center">
    <CollectionView
        ItemsSource="{Binding CalendarModel}"
        SelectionMode="None">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Horizontal"  />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate >
            <DataTemplate x:DataType="model:CalendarModel">
                <Border Margin="1,1,1,1" >
                    <Grid>
                        <Frame BackgroundColor="#6CA0DC" CornerRadius="0" WidthRequest="80">
                            <Frame.Triggers>
                                <DataTrigger TargetType="Frame" Binding="{Binding IsCurrentDay}" Value="true">
                                    <Setter Property="BackgroundColor" Value="#008080" />
                                </DataTrigger>
                            </Frame.Triggers>
                            
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer 
                                Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:CalendarViewModel}}, Path=HighlightSelectedDayCommand}"
                                CommandParameter="{Binding .}"/>
                            </Frame.GestureRecognizers>
                            <Grid>
                                <VerticalStackLayout>
                                    <Label Text="{Binding DayName}" TextTransform="Default" TextColor="White" FontSize="Header"></Label>
                                    <Label Text="{Binding DayNumber}" TextColor="White" FontSize="Subtitle" FontAttributes="Bold"></Label>
                                </VerticalStackLayout>
                            </Grid>
                        </Frame>
                    </Grid>
                </Border>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</VerticalStackLayout>

I want my current date to be in focused when the new month is loaded. or scroll to the current day display the day 1 of the previous and next month. something like this:

This is my ViewModel

[RelayCommand]
async Task PopulateNextMonth()
{
    currentCalendar[0] = currentCalendar[0] == 12 ? 1 : currentCalendar[0] + 1;
    currentCalendar[1] = currentCalendar[0] == 1 ? currentCalendar[1] + 1 : currentCalendar[1];
    await PopulateCalendar();
}

[RelayCommand]
async Task PopulatePreviousMonth()
{
    currentCalendar[0] = currentCalendar[0] == 1 ? 12 : currentCalendar[0] - 1;
    currentCalendar[1] = currentCalendar[0] == 12 ? currentCalendar[1] - 1 : currentCalendar[1];
    await PopulateCalendar();
}

This needs to be done from the code-behind. Please show the code-behind of your View. — Julian, Aug 09 '23 at 12:26

score 0 · Answer 1 · answered Aug 09 '23 at 08:03

I want my current date to be in focused when the new month is loaded. or scroll to the current day display the day 1 of the previous and next month.

For this ,you can check document Scroll an item into view.

Given a CollectionView object named collectionView, the following example shows how to scroll the Proboscis Monkey item into view:

MonkeysViewModel viewModel = BindingContext as MonkeysViewModel;
Monkey monkey = viewModel.Monkeys.FirstOrDefault(m => m.Name == "Proboscis Monkey");
collectionView.ScrollTo(monkey);

.NET Maui how to scroll to specific element?

1 Answers1