Net Maui calender view how to make visible current date on collectionview scroll position ?

Question

Net Maui calender view how to make visible current date on collectionview scroll position ?

Sami 966

  It is not working like that  

private void ListDates_BindingContextChanged(object sender, EventArgs e) {
        var lst = (ObservableCollection<DateItem>)((CollectionView)sender).ItemsSource;
        lblMonth.Text = lst.First().Year + " " + lst.First().Month;
        MyBindingList = lst;
        //var items = newValue as ObservableCollection<DateItem>;
        //var control = (CalendarView)bindable;
        var index = lst.ToList().FindIndex(p => p.Selected);
        if (index > -1)
            listDates.ScrollTo(index, -1, ScrollToPosition.MakeVisible, true);
    }

Anonymous

2023-04-28T08:06:22.9333333+00:00

Could you share your calendar view that I can reproduce this issue?

Which platform is not working when running code?

Sami 966

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppMaui.Views.EventViews.CalendarView">
    <ContentView.Content>
        <Grid RowDefinitions="auto, *" Margin="10,0,10,0" RowSpacing="6">
            <Grid Grid.Row="0" HorizontalOptions="FillAndExpand">
                <BoxView
                        Color="{DynamicResource BorderColor}"
                        CornerRadius="3"
                                HeightRequest="28"/>
                <Label x:Name="lblMonth" TextColor="{DynamicResource MainTextColor}" Margin="8,4" />
            </Grid>
            <CollectionView
            x:Name="listDates"
             Grid.Row="1"
            Grid.Column="1"
            HeightRequest="60"
              
            ItemsSource="{Binding Dates}"
            SelectionMode="Single" SelectionChanged="ListDates_SelectionChanged" HorizontalScrollBarVisibility="Never">
                <CollectionView.ItemsLayout>
                    <LinearItemsLayout ItemSpacing="5" Orientation="Horizontal" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid 
                            BackgroundColor="{DynamicResource BackColor}"
                            HorizontalOptions="Center"
                            RowDefinitions="*,*"
                              WidthRequest="37"
                            VerticalOptions="CenterAndExpand">
                            <BoxView
                        Grid.Row="0"
                        Color="{DynamicResource BorderColor}"
                        CornerRadius="3,3,0,0"
                        HeightRequest="30"
                        WidthRequest="38"/>
                            <BoxView
                        Grid.Row="0"
                        Color="{Binding BackgroundTop}"
                        CornerRadius="3,3,0,0"
                                HeightRequest="30"
                        WidthRequest="38"/>
                            <Label
                                Grid.Row="0"
                                FontSize="13"
                                VerticalTextAlignment="Center"
                                HorizontalTextAlignment="Center"
                                Text="{Binding Day}"
                                TextColor="{Binding TextColor}"/>
                            <BoxView
                        Grid.Row="1"
                        Color="{DynamicResource BackColor}"
                        CornerRadius="0,0,3,3"
                                HeightRequest="30"
                        WidthRequest="38"/>
                            <BoxView
                        Grid.Row="1"
                        Color="{Binding Background}"
                        CornerRadius="0,0,3,3"
                                HeightRequest="30"
                        WidthRequest="38"/>
                            <Label
                                Grid.Row="1"
                                FontSize="11"
                                HorizontalTextAlignment="Center"
                                Text="{Binding DayWeek}" 
                                TextColor="{Binding TextColor}"/>

                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </Grid>
    </ContentView.Content>
</ContentView>

Sami 966 Reputation points

2023-04-28T08:09:12.4166667+00:00

Android and ios
Anonymous

2023-04-28T08:59:54.3133333+00:00

Do you have some bindable property in this contentView? if so, please share it, I test your code with static data, CollectionView could be scrolled.
Sami 966 Reputation points

2023-04-28T09:03:28.5466667+00:00

can u do it example for me that my codes is not important how can i do it current date visible on collectionview ? Thanks.

Accepted answer

0 additional answers

Your answer

Anonymous

2023-04-28T08:06:22.9333333+00:00

Could you share your calendar view that I can reproduce this issue?

Which platform is not working when running code?
Sami 966 Reputation points

2023-04-28T08:08:46.55+00:00

<?xml version="1.0" encoding="utf-8" ?> <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AppMaui.Views.EventViews.CalendarView"> <ContentView.Content> <Grid RowDefinitions="auto, *" Margin="10,0,10,0" RowSpacing="6"> <Grid Grid.Row="0" HorizontalOptions="FillAndExpand"> <BoxView Color="{DynamicResource BorderColor}" CornerRadius="3" HeightRequest="28"/> <Label x:Name="lblMonth" TextColor="{DynamicResource MainTextColor}" Margin="8,4" /> </Grid> <CollectionView x:Name="listDates" Grid.Row="1" Grid.Column="1" HeightRequest="60" ItemsSource="{Binding Dates}" SelectionMode="Single" SelectionChanged="ListDates_SelectionChanged" HorizontalScrollBarVisibility="Never"> <CollectionView.ItemsLayout> <LinearItemsLayout ItemSpacing="5" Orientation="Horizontal" /> </CollectionView.ItemsLayout> <CollectionView.ItemTemplate> <DataTemplate> <Grid BackgroundColor="{DynamicResource BackColor}" HorizontalOptions="Center" RowDefinitions="*,*" WidthRequest="37" VerticalOptions="CenterAndExpand"> <BoxView Grid.Row="0" Color="{DynamicResource BorderColor}" CornerRadius="3,3,0,0" HeightRequest="30" WidthRequest="38"/> <BoxView Grid.Row="0" Color="{Binding BackgroundTop}" CornerRadius="3,3,0,0" HeightRequest="30" WidthRequest="38"/> <Label Grid.Row="0" FontSize="13" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="{Binding Day}" TextColor="{Binding TextColor}"/> <BoxView Grid.Row="1" Color="{DynamicResource BackColor}" CornerRadius="0,0,3,3" HeightRequest="30" WidthRequest="38"/> <BoxView Grid.Row="1" Color="{Binding Background}" CornerRadius="0,0,3,3" HeightRequest="30" WidthRequest="38"/> <Label Grid.Row="1" FontSize="11" HorizontalTextAlignment="Center" Text="{Binding DayWeek}" TextColor="{Binding TextColor}"/> </Grid> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </Grid> </ContentView.Content> </ContentView>
Sami 966 Reputation points

2023-04-28T08:09:12.4166667+00:00

Android and ios
Anonymous

2023-04-28T08:59:54.3133333+00:00

Do you have some bindable property in this contentView? if so, please share it, I test your code with static data, CollectionView could be scrolled.
Sami 966 Reputation points

2023-04-28T09:03:28.5466667+00:00

can u do it example for me that my codes is not important how can i do it current date visible on collectionview ? Thanks.

Answer 1

Hello,

You can add a Task.Delay before executing the scroll event in the ListDates_BindingContextChanged method, here is my edited code.

private async void ListDates_BindingContextChanged(object sender, EventArgs e) {
        var lst = (ObservableCollection<DateItem>)((CollectionView)sender).ItemsSource;
        lblMonth.Text = lst.First().Year + " " + lst.First().Month;
        MyBindingList = lst;
        //var items = newValue as ObservableCollection<DateItem>;
        //var control = (CalendarView)bindable;
        var index = lst.ToList().FindIndex(p => p.Selected);
       if (index > -1)
        {
            await Task.Delay(500);
            listDates.ScrollTo(index, -1, ScrollToPosition.MakeVisible, true);
        }
    }

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Net Maui calender view how to make visible current date on collectionview scroll position ?

0 additional answers

Your answer