Forum Xamarin.Forms

Best Answer

  • LandLuLandLu Member, Xamarin Team Xamurai
    Accepted Answer

    There is no need to put an extra listview in the collection view.
    Follow this doc:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/grouping#group-data
    to group your data.
    Firstly, create a group model like:

    public class SlotListData : List<string>
    {
        public string GroupTitle { set; get; }
    }
    

    Populate this data like:

    List<SlotListDataGroup> dataGroup = new List<SlotListDataGroup>();
    for (int i=0; i<3; i++)
    {
        SlotListDataGroup list = new SlotListDataGroup { GroupTitle = "Group" + i };
        for (int j = 0; j < 10; j++)
        {
            list.Add("item " + j);
        }
        dataGroup.Add(list);
    }
    SlotListView.ItemsSource = dataGroup;
    

    Finally, the xaml of the collection view:

    <CollectionView IsGrouped="True" x:Name="SlotListView">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" Span="4"/>
        </CollectionView.ItemsLayout>
        <CollectionView.GroupHeaderTemplate>
            <DataTemplate>
                <Label HeightRequest="50" Text="{Binding GroupTitle}"/>
            </DataTemplate>
        </CollectionView.GroupHeaderTemplate>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Label Text="{Binding}"/>
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
    

    Enable the group feature and set the ItemsLayout to GridItemsLayout there. Here is the effect:

Answers

  • swapnil_gaikwadswapnil_gaikwad Member ✭✭

    public class WorkTemplate
    {
    public int WorkTemplateID { get; set; }
    public string Name { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public TimeSpan SlotGranularity { get; set; }

        public bool Monday { get; set; }
        public bool Tuesday { get; set; }
        public bool Wednesday { get; set; }
        public bool Thursday { get; set; }
        public bool Friday { get; set; }
        public bool Saturday { get; set; }
        public bool Sunday { get; set; }
    } 
    

    vmModel....

    public List<string> SlotListData { get; set; } = new List<string>();
        DateTime TodayDate = DateTime.Today.AddDays(0);
    
    
        DateTime StartTime = workTemplate.StartTime;
            DateTime EndTime = workTemplate.EndTime;
    
            TimeSpan span = EndTime.Subtract(StartTime);
            int TotalMinutes = (int)span.TotalMinutes;
            int TimeSpan = (int)workTemplate.SlotGranularity.TotalMinutes;
            int count = TotalMinutes / TimeSpan;
            DateTime dateTime = StartTime;
    
            for (int i = 0; i < count; i++)
            {
                SlotListData.Add(dateTime.ToShortTimeString());
                dateTime = dateTime.AddMinutes(TimeSpan);
            }
    

    .cs.xaml.....

    private void DayButton_Clicked(object sender, EventArgs e)
    {
    SlotListView.IsVisible = false;
    SlotNOView.IsVisible = false;
    VMModel.GetSlotListData();
    Button btn = (Button)sender;
    DayList dayList=(DayList)btn.BindingContext;

            switch (dayList.dayString)
            {
                case
                    "Monday":
                    if (VMModel.workTemplate.Monday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                        SlotList.EndRefresh();
    
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
                case "Tuesday":
                    if (VMModel.workTemplate.Tuesday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                        SlotList.EndRefresh();
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
                case
                    "Wednesday":
                    if (VMModel.workTemplate.Wednesday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                            SlotList.EndRefresh();
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
                case
                    "Thursday":
                    if (VMModel.workTemplate.Thursday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                        SlotList.EndRefresh();
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
                case
                    "Friday":
                    if (VMModel.workTemplate.Friday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                        SlotList.EndRefresh();
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
                case
                    "Saturday":
                    if (VMModel.workTemplate.Saturday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                        SlotList.EndRefresh();
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
                case
                    "Sunday":
                    if (VMModel.workTemplate.Sunday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                        SlotList.EndRefresh();
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
            }
        }
    

    xaml...

    ~~

  • swapnil_gaikwadswapnil_gaikwad Member ✭✭

    xaml....

    <ContentView x:Name="SlotListView" IsVisible="False" >
                            <ListView ItemTapped="SlotTimeTappedAsync" x:Name="SlotList" HorizontalOptions="CenterAndExpand">
                            </ListView>
                </ContentView>
    

    Xaml
    .cs

    private void DayButton_Clicked(object sender, EventArgs e)
        {
            SlotListView.IsVisible = false;
            SlotNOView.IsVisible = false;
    
            VMModel.GetSlotListData();
            Button btn = (Button)sender;
             dayList=(DayList)btn.BindingContext;
    
            switch (dayList.dayString)
            {
                case
                    "Monday":
                    if (VMModel.workTemplate.Monday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                        SlotList.EndRefresh();
    
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
                case "Tuesday":
                    if (VMModel.workTemplate.Tuesday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                        SlotList.EndRefresh();
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
                case
                    "Wednesday":
                    if (VMModel.workTemplate.Wednesday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                            SlotList.EndRefresh();
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
                case
                    "Thursday":
                    if (VMModel.workTemplate.Thursday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                        SlotList.EndRefresh();
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
                case
                    "Friday":
                    if (VMModel.workTemplate.Friday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                        SlotList.EndRefresh();
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
                case
                    "Saturday":
                    if (VMModel.workTemplate.Saturday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                        SlotList.EndRefresh();
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
                case
                    "Sunday":
                    if (VMModel.workTemplate.Sunday == true)
                    {
                        SlotList.BeginRefresh();
                        SlotList.ItemsSource = VMModel.SlotListData;
                        SlotListView.IsVisible = true;
                        SlotList.EndRefresh();
                    }
                    else
                    {
                        SlotNOAvailable.Text = "Slot NOT Available...!!";
                        SlotNOView.IsVisible = true;
                    }
                    break;
    
            }
        }
    

    VMModel....

        public List<string> SlotListData { get; set; } = new List<string>();
        DateTime TodayDate = DateTime.Today.AddDays(0);
    
        public void GetSlotListData()
        {
            DateTime StartTime = workTemplate.StartTime;
            DateTime EndTime = workTemplate.EndTime;
            TimeSpan span = EndTime.Subtract(StartTime);
            int TotalMinutes = (int)span.TotalMinutes;
            int TimeSpan = (int)workTemplate.SlotGranularity.TotalMinutes;
            int count = TotalMinutes / TimeSpan;
            DateTime dateTime = StartTime;
            for (int i = 0; i < count; i++)
            {
                SlotListData.Add(dateTime.ToShortTimeString());
                dateTime = dateTime.AddMinutes(TimeSpan);
            }
        }
    

    Model.....

     public class WorkTemplate
    {
        public int WorkTemplateID { get; set; }
        public string Name { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public TimeSpan SlotGranularity { get; set; }
    
        public bool Monday { get; set; }
        public bool Tuesday { get; set; }
        public bool Wednesday { get; set; }
        public bool Thursday { get; set; }
        public bool Friday { get; set; }
        public bool Saturday { get; set; }
        public bool Sunday { get; set; }
    
    }
    
  • swapnil_gaikwadswapnil_gaikwad Member ✭✭

    I want to display "SlotListData" List In matrix format

  • LandLuLandLu Member, Xamarin Team Xamurai
    Accepted Answer

    There is no need to put an extra listview in the collection view.
    Follow this doc:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/grouping#group-data
    to group your data.
    Firstly, create a group model like:

    public class SlotListData : List<string>
    {
        public string GroupTitle { set; get; }
    }
    

    Populate this data like:

    List<SlotListDataGroup> dataGroup = new List<SlotListDataGroup>();
    for (int i=0; i<3; i++)
    {
        SlotListDataGroup list = new SlotListDataGroup { GroupTitle = "Group" + i };
        for (int j = 0; j < 10; j++)
        {
            list.Add("item " + j);
        }
        dataGroup.Add(list);
    }
    SlotListView.ItemsSource = dataGroup;
    

    Finally, the xaml of the collection view:

    <CollectionView IsGrouped="True" x:Name="SlotListView">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" Span="4"/>
        </CollectionView.ItemsLayout>
        <CollectionView.GroupHeaderTemplate>
            <DataTemplate>
                <Label HeightRequest="50" Text="{Binding GroupTitle}"/>
            </DataTemplate>
        </CollectionView.GroupHeaderTemplate>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Label Text="{Binding}"/>
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
    

    Enable the group feature and set the ItemsLayout to GridItemsLayout there. Here is the effect:

Sign In or Register to comment.