How to implement a listView "quick filtering" like week calendar view?

Question

I've created a customer specific task management app with tasks placed on specific dates (and sometime hours), but here the date is important.

I'm using a listView and have a DatePicker setting for selected other dates than today. So far so good.

I would like to implement a week quick-filter option so that e.g., the dates of the current week is displayed at the top of the list view and a click on a certain date would filter the listView accordingly. Kind of a standard outlook-like week view.

How would I do this in the best way? CustomControl that I put above the listView? ViewPager control?

Any ideas or suggestions much appreciated.

P.S. I need to be able to target both Android and iOS.

Answer 1

Set two Properties in the ViewModel one for containing all the Items EntireCollection and another to store the Filtered Items FilteredCollection. On button click derive the Filtered item from entire list using Where.

ViewModel

    public class ViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<ListItem> filteredCollection;

        public ObservableCollection<ListItem> FilteredCollection
        {
            get
            {
                return filteredCollection;
            }
            set
            {
                filteredCollection = value;
                OnPropertyChanged();
            }
        }

        private ObservableCollection<ListItem> entireCollection;

        public ObservableCollection<ListItem> EntireCollection
        {
            get
            {
                return entireCollection;
            }
            set
            {
                entireCollection = value;
                OnPropertyChanged();
            }
        }
        public ViewModel()
        { ...
            this.FilterCollection = this.EntireCollection;
          ...
        }
    }

Button clicked

        void Button_Clicked(System.Object sender, System.EventArgs e)
        {
            DateTime selectedDate = ((DateTime)((sender as VisualElement).BindingContext)).Date;

            viewModel.FilteredCollection = new ObservableCollection<ListItem>(viewModel.EntireCollection.Where(x =>
                {
                    if (DateTime.Equals(x.DateAdded, selectedDate))
                    {
                        var asd = x.DateAdded.Day;
                        return true;
                    }

                    return false;
                }));
        }

XAML

<StackLayout>
    <ScrollView
        x:Name="calender"
        Orientation="Horizontal">
        <StackLayout
            BackgroundColor="Blue"
            BindableLayout.ItemsSource="{Binding Dates}"
            Orientation="Horizontal">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Button
                        TextColor="White"
                        BackgroundColor="Blue"
                        Clicked="Button_Clicked"
                        Text="{Binding Day}"/>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </ScrollView>
    <ListView
        ItemsSource="{Binding FilteredCollection}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout>
                        <Label Text="{Binding Name}"/>
                        <Label Text="{Binding DateAdded}"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Hope it helps!!