How to set the Key.Value in column as a PropertyName. Xamarin C#

Issue

I'm using Xamarin.Forms.DataGrid and trying to make column dynamically in loop. Here kvp.value returns a LIST and i'm trying to set the LIST in column as a PropertyName.

How to set direct list in the column itself. I want to output like Key1,Value[1], Key2,Value[2]. Please see image.

I'm getting Console Output message Binding: 'status' property not found on

 foreach (KeyValuePair<string, string[]> kvp in myDictionary3)
            {

                for (int i = 0; i < kvp.Value.Length; i++)
                {
                    DataGridColumn dataGridColumn = new DataGridColumn()
                    {
                        Title = kvp.Key,
                        PropertyName = kvp.Value[i],
                    };
                    dataColumn.Columns.Add(dataGridColumn);

                }
            }

XAML part

<ScrollView Orientation="Both" Grid.ColumnSpan="2" Grid.RowSpan="4">
    <dg:DataGrid ItemsSource="{Binding RoomTypes}" x:Name="dataColumn" SelectionEnabled="True" SelectedItem="{Binding SelectedRoom}"
        RowHeight="70" HeaderHeight="50" BorderColor="#CCCCCC" HeaderBackground="#E0E6F8"
        PullToRefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}">
        
        <dg:DataGrid.HeaderFontSize>
            <OnIdiom  x:TypeArguments="x:Double">
                <OnIdiom.Tablet>15</OnIdiom.Tablet>
                <OnIdiom.Phone>13</OnIdiom.Phone>
            </OnIdiom>
        </dg:DataGrid.HeaderFontSize>
        <dg:DataGrid.Columns>

            <dg:DataGridColumn PropertyName="Name" Width="3*" >
                <dg:DataGridColumn.FormattedTitle>
                    <FormattedString>
                        <Span Text="Room Type" FontSize="13" TextColor="Black" FontAttributes="Bold" />
                    </FormattedString>
                </dg:DataGridColumn.FormattedTitle>
            </dg:DataGridColumn>
            
        </dg:DataGrid.Columns>
        <dg:DataGrid.RowsBackgroundColorPalette>
            <dg:PaletteCollection>
                <Color>#F2F2F2</Color>
                <Color>#FFFFFF</Color>
            </dg:PaletteCollection>
        </dg:DataGrid.RowsBackgroundColorPalette>

    </dg:DataGrid>
</ScrollView>

Solution

You can try to use the scrollview and the grid to do this.

In the xaml:

 <ContentPage.Content>
    <Grid BackgroundColor="Black">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="80" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="Empty" Grid.Row="0" Grid.Column="0" />
        <AbsoluteLayout Grid.Column="1" Grid.Row="0" VerticalOptions="FillAndExpand" >
            <ScrollView x:Name="colScrollView" Orientation="Horizontal" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" AbsoluteLayout.LayoutBounds="0,0,1,1.1" AbsoluteLayout.LayoutFlags="All">
                <Grid BackgroundColor="LightGoldenrodYellow" x:Name="timelist">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                </Grid>
            </ScrollView>
            <BoxView AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="Transparent"></BoxView>
        </AbsoluteLayout>
        <AbsoluteLayout Grid.Column="0" Grid.Row="1" VerticalOptions="FillAndExpand">
            <ScrollView x:Name="rowScrollView" Orientation="Vertical" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" AbsoluteLayout.LayoutBounds="0,0,1.1,1.1" AbsoluteLayout.LayoutFlags="All">
                <Grid BackgroundColor="LightBlue" x:Name="roomtype">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                    </Grid.ColumnDefinitions>
                </Grid>
            </ScrollView>
            <BoxView AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="Transparent"></BoxView>
        </AbsoluteLayout>
        <AbsoluteLayout Grid.Column="1" Grid.Row="1" VerticalOptions="FillAndExpand">
            <ScrollView x:Name="dataScrollView" Orientation="Both" AbsoluteLayout.LayoutBounds="0,0,1,1.1" AbsoluteLayout.LayoutFlags="All">
                <Grid BackgroundColor="LightGreen" x:Name="status">
                </Grid>
            </ScrollView>
        </AbsoluteLayout>
    </Grid>
</ContentPage.Content>

In the code behind:

 string[] times = new string[] { "11:30", "12:00", "12:30", "13:00", "13:30", "14:00" };
        string[] roomtypes = new string[] { "type1", "type2", "type3", "type4", "type5", "type6", "type7", "type8" };
        for (int i = 0; i < times.Length; i++)
        {
            timelist.ColumnDefinitions.Add(new ColumnDefinition());
            Label time = new Label() { Text = times[i], WidthRequest = 80 };
            timelist.Children.Add(time,i,0);
        }
        for (int i = 0; i < roomtypes.Length; i++)
        {
            roomtype.RowDefinitions.Add(new RowDefinition());
            Label room = new Label() { Text = roomtypes[i], WidthRequest = 80 };
            roomtype.Children.Add(room,0,i);
        }
        List<string[]> roomstatu = new List<string[]>() 
        { 
            new string[] {"1","2","3","4","5","6"}, new string[] {"1","2","3","4","5","6"},new string[] {"1","2","3","4","5","6"},new string[] {"1","2","3","4","5","6"},new string[] {"1","2","3","4","5","6"},new string[] {"1","2","3","4","5","6"},new string[] {"1","2","3","4","5","6"},new string[] {"1","2","3","4","5","6"}
        };
        int index = 0;
        foreach (var item in roomstatu)
        {
            status.RowDefinitions.Add(new RowDefinition());
            for (int i = 0; i < item.Length; i++)
            {
                status.ColumnDefinitions.Add(new ColumnDefinition());
                Label statuslabel = new Label() { Text = item[i], WidthRequest = 80 };
                status.Children.Add(statuslabel, i, index);
            }
            index++;
        }

And the scrolled event:

  dataScrollView.Scrolled += DataScrollView_Scrolled;
  private async void DataScrollView_Scrolled(object sender, ScrolledEventArgs e)
    {
        await rowScrollView.ScrollToAsync(0, e.ScrollY, false);
        await colScrollView.ScrollToAsync(e.ScrollX, 0, false);
    }

Answered By - Liyun Zhang - MSFT