locked
Grid layout and (complex?) data binding RRS feed

  • Question

  • User284269 posted

    Hello, I'm trying to build an app which will display a week view and will populate individual cells based on date & category. I have built layout below using grid layout and managed to set dates for each columns and categories for each row (categories are static). Now I would like to retrieve data for each cell (e.g. Category 1 & 16/09, Category 2 and 16/09, etc...).

    Is there a simple way to bind data based on parameters (date and category) instead of doing something like below for each cell? Cell 1 - <Label Text="{Binding Category1Day1}" />, Cell 2 - <Label Text="{Binding Category1Day2}" />, etc...

    Maybe there is a better solution than the above Grid layout?

    Thank you, Marcin

    Tuesday, September 17, 2019 3:03 PM

Answers

  • User379860 posted

    @MarcinJ as AlessandroCaliaro's said, you can achieve it with listview, here is running screenshot.

    Here is code.

    Model.MyShedule.cs

         public class MyShedule : INotifyPropertyChanged
    {
    
        string name;
        public string Name
        {
            set
            {
                if (name != value)
                {
                    name = value;
                    OnPropertyChanged("Name");
    
                }
            }
            get
            {
                return name;
            }
        }
    
        string name1;
        public string Name1
        {
            set
            {
                if (name1 != value)
                {
                    name1 = value;
                    OnPropertyChanged("Name1");
    
                }
            }
            get
            {
                return name1;
            }
        }
        string name2;
        public string Name2
        {
            set
            {
                if (name2 != value)
                {
                    name2 = value;
                    OnPropertyChanged("Name2");
    
                }
            }
            get
            {
                return name2;
            }
        }
        string name3;
        public string Name3
        {
            set
            {
                if (name3 != value)
                {
                    name3 = value;
                    OnPropertyChanged("Name3");
    
                }
            }
            get
            {
                return name3;
            }
        }
        string name4;
        public string Name4
        {
            set
            {
                if (name4 != value)
                {
                    name4 = value;
                    OnPropertyChanged("Name4");
    
                }
            }
            get
            {
                return name4;
            }
        }
        string name5;
        public string Name5
        {
            set
            {
                if (name5 != value)
                {
                    name5 = value;
                    OnPropertyChanged("Name5");
    
                }
            }
            get
            {
                return name5;
            }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    

    ViewModel:MySheduleViewModel.cs

          public class MySheduleViewModel
    {
        public ObservableCollection<MyShedule> myShedules { get; set; }
        public MySheduleViewModel()
        {
            myShedules = new ObservableCollection<MyShedule>();
            myShedules.Add(new MyShedule() { Name = " ",Name1="16/09",Name2="17/09",Name3= "18/09", Name4 = "19/09", Name5 = "20/09" });
            myShedules.Add(new MyShedule() { Name = "Category 1", Name1 = "Item1", Name2 = "", Name3 = "", Name4 = "", Name5 = "" });
            myShedules.Add(new MyShedule() { Name = "Category 2", Name1 = "", Name2 = "Item1  Item2", Name3 = "", Name4 = "", Name5 = "Item1 Item2" });
            myShedules.Add(new MyShedule() { Name = "Category 3", Name1 = "Item1 Item2", Name2 = "", Name3 = "", Name4 = "Item1", Name5 = "" });
            myShedules.Add(new MyShedule() { Name = "Category 4", Name1 = "Item1", Name2 = "", Name3 = "", Name4 = "", Name5 = "" });
            myShedules.Add(new MyShedule() { Name = "Category 5", Name1 = "", Name2 = "", Name3 = "Item1 Item2", Name4 = "", Name5 = "" });
            myShedules.Add(new MyShedule() { Name = " ", Name1 = " ", Name2 = " ", Name3 = " ", Name4 = " ", Name5 = " " });
    
        }
    }
    

    MainPage.xaml

          <StackLayout>
        <ListView x:Name="mylistview" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
    
                            <Grid RowSpacing="1"   >
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
    
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="1.3*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="White" />
                                <Label Text="{Binding Name  ,Mode=TwoWay}" Grid.Row="0" Grid.Column="0" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                                <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="White" />
                                <Label Text="{Binding Name1 ,Mode=TwoWay}" Grid.Row="0" Grid.Column="1" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                                <BoxView Grid.Row="0" Grid.Column="2" BackgroundColor="White" />
                                <Label Text="{Binding Name2 ,Mode=TwoWay}" Grid.Row="0" Grid.Column="2" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
                                <BoxView Grid.Row="0" Grid.Column="3" BackgroundColor="White" />
                                <Label Text="{Binding Name3 ,Mode=TwoWay}" Grid.Row="0" Grid.Column="3" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
                                <BoxView Grid.Row="0" Grid.Column="4" BackgroundColor="White" />
                                <Label Text="{Binding Name4 ,Mode=TwoWay}" Grid.Row="0" Grid.Column="4" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                                <BoxView Grid.Row="0" Grid.Column="5" BackgroundColor="White" />
                                <Label Text="{Binding Name5 ,Mode=TwoWay}" Grid.Row="0" Grid.Column="5" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                            </Grid>
    
                        </StackLayout>
    
                    </ViewCell>
                </DataTemplate>
    
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
    

    MainPage.xaml.cs

         public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            var mySheduleViewModel = new MySheduleViewModel();
            mylistview.ItemsSource = mySheduleViewModel.myShedules;
        }
    }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, September 18, 2019 2:22 AM

All replies

  • User2148 posted

    I think you have to use a Listview where each row has its Model and you can use Binding to retrive values

    Tuesday, September 17, 2019 3:25 PM
  • User379860 posted

    @MarcinJ as AlessandroCaliaro's said, you can achieve it with listview, here is running screenshot.

    Here is code.

    Model.MyShedule.cs

         public class MyShedule : INotifyPropertyChanged
    {
    
        string name;
        public string Name
        {
            set
            {
                if (name != value)
                {
                    name = value;
                    OnPropertyChanged("Name");
    
                }
            }
            get
            {
                return name;
            }
        }
    
        string name1;
        public string Name1
        {
            set
            {
                if (name1 != value)
                {
                    name1 = value;
                    OnPropertyChanged("Name1");
    
                }
            }
            get
            {
                return name1;
            }
        }
        string name2;
        public string Name2
        {
            set
            {
                if (name2 != value)
                {
                    name2 = value;
                    OnPropertyChanged("Name2");
    
                }
            }
            get
            {
                return name2;
            }
        }
        string name3;
        public string Name3
        {
            set
            {
                if (name3 != value)
                {
                    name3 = value;
                    OnPropertyChanged("Name3");
    
                }
            }
            get
            {
                return name3;
            }
        }
        string name4;
        public string Name4
        {
            set
            {
                if (name4 != value)
                {
                    name4 = value;
                    OnPropertyChanged("Name4");
    
                }
            }
            get
            {
                return name4;
            }
        }
        string name5;
        public string Name5
        {
            set
            {
                if (name5 != value)
                {
                    name5 = value;
                    OnPropertyChanged("Name5");
    
                }
            }
            get
            {
                return name5;
            }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    

    ViewModel:MySheduleViewModel.cs

          public class MySheduleViewModel
    {
        public ObservableCollection<MyShedule> myShedules { get; set; }
        public MySheduleViewModel()
        {
            myShedules = new ObservableCollection<MyShedule>();
            myShedules.Add(new MyShedule() { Name = " ",Name1="16/09",Name2="17/09",Name3= "18/09", Name4 = "19/09", Name5 = "20/09" });
            myShedules.Add(new MyShedule() { Name = "Category 1", Name1 = "Item1", Name2 = "", Name3 = "", Name4 = "", Name5 = "" });
            myShedules.Add(new MyShedule() { Name = "Category 2", Name1 = "", Name2 = "Item1  Item2", Name3 = "", Name4 = "", Name5 = "Item1 Item2" });
            myShedules.Add(new MyShedule() { Name = "Category 3", Name1 = "Item1 Item2", Name2 = "", Name3 = "", Name4 = "Item1", Name5 = "" });
            myShedules.Add(new MyShedule() { Name = "Category 4", Name1 = "Item1", Name2 = "", Name3 = "", Name4 = "", Name5 = "" });
            myShedules.Add(new MyShedule() { Name = "Category 5", Name1 = "", Name2 = "", Name3 = "Item1 Item2", Name4 = "", Name5 = "" });
            myShedules.Add(new MyShedule() { Name = " ", Name1 = " ", Name2 = " ", Name3 = " ", Name4 = " ", Name5 = " " });
    
        }
    }
    

    MainPage.xaml

          <StackLayout>
        <ListView x:Name="mylistview" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
    
                            <Grid RowSpacing="1"   >
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
    
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="1.3*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="White" />
                                <Label Text="{Binding Name  ,Mode=TwoWay}" Grid.Row="0" Grid.Column="0" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                                <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="White" />
                                <Label Text="{Binding Name1 ,Mode=TwoWay}" Grid.Row="0" Grid.Column="1" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                                <BoxView Grid.Row="0" Grid.Column="2" BackgroundColor="White" />
                                <Label Text="{Binding Name2 ,Mode=TwoWay}" Grid.Row="0" Grid.Column="2" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
                                <BoxView Grid.Row="0" Grid.Column="3" BackgroundColor="White" />
                                <Label Text="{Binding Name3 ,Mode=TwoWay}" Grid.Row="0" Grid.Column="3" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
                                <BoxView Grid.Row="0" Grid.Column="4" BackgroundColor="White" />
                                <Label Text="{Binding Name4 ,Mode=TwoWay}" Grid.Row="0" Grid.Column="4" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                                <BoxView Grid.Row="0" Grid.Column="5" BackgroundColor="White" />
                                <Label Text="{Binding Name5 ,Mode=TwoWay}" Grid.Row="0" Grid.Column="5" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                            </Grid>
    
                        </StackLayout>
    
                    </ViewCell>
                </DataTemplate>
    
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
    

    MainPage.xaml.cs

         public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            var mySheduleViewModel = new MySheduleViewModel();
            mylistview.ItemsSource = mySheduleViewModel.myShedules;
        }
    }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, September 18, 2019 2:22 AM
  • User284269 posted

    Hi @AlessandroCaliaro and @LeonLu, Thank you for your help with this query.

    One more question, will it be possible to get day/category value from the list above? For example when I click on Category 5 row and 18/09 column I would like to get those values (category and date) so I can navigate users to appointment details. At the moment I can only get category value when I click on a row.

    Can this be done or do I gave to comeback to my grid view and populate each cell individually?

    Thanks, Marcin

    Thursday, September 19, 2019 7:49 AM
  • User2148 posted

    I think you should add a TapGestureRecognizer to each label so you know which "row-cols" you have tapped

    Thursday, September 19, 2019 9:10 AM