Help in creating a dynamic grid from vieModel and display it on the center of the page

Question

Help in creating a dynamic grid from vieModel and display it on the center of the page

Eduardo Gomez 3,671

int[,] a = new int[RowNum, ColumnNum];

        string testStr = asteroidInfo.De_matrix;

        char[] StrCharArray = testStr.ToCharArray();

        for (int i = 0; i < RowNum; i++) {  //0(N^2) TIME COMPLEXITY
            for (int j = 0; j < ColumnNum; j++) {
                a[i, j] = StrCharArray[i * 3 + j];
            }
        }
        //According to the value of 1 or 0, to change the  boxview's background color.
        for (int i = 0; i < RowNum; i++) {
            for (int j = 0; j < ColumnNum; j++) { // 0(N^2)
                BoxView boxView = new BoxView {
                    BackgroundColor = StrCharArray[i * 3 + j].ToString().Equals("0") ? Color.White : Color.Black
                };
                MyGrid.Children.Add(boxView, j, i);
            }
        }

Accepted answer

0 additional answers

Your answer

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

I wrote a demo code like this screenshot.

I used Listview to show the data, use Grid to show the matrix and calculated it in the background.

Here is code to calculated the matrix, the key is convert string to Two-dimensional array, then use background code to create grid dynamically.

   public partial class DetailPage : ContentPage  
       {  
            
           public DetailPage(AsteroidInfo asteroidInfo)  
           {  
               InitializeComponent();  
     
     
               //device_resolution you haveto de_matrix  
               //2019 - 02 - 22 12:01:57 ob_35634 de_10354  
               //device_resolution 3x7   
               //  de_matrix 000 000 100 100 110 110 000  
     
   //create grid dynamically  
               Grid MyGrid =    new Grid();  
               
               RowDefinitionCollection  rowDefinitions= new RowDefinitionCollection();  
               ColumnDefinitionCollection columnDefinitions = new ColumnDefinitionCollection();  
     
               string[] words =asteroidInfo.device_resolution.Split('x');  
     
               int RowNum=int.Parse( words[1]);  
               int ColumnNum = int.Parse(words[0]);  
     
               for (int i = 0; i < RowNum; i++)  
               {  
                   rowDefinitions.Add(new RowDefinition());  
               }  
               for (int i = 0; i < ColumnNum; i++)  
               {  
                   columnDefinitions.Add(new ColumnDefinition());  
               }  
               MyGrid.RowDefinitions = rowDefinitions;  
     
               MyGrid.ColumnDefinitions = columnDefinitions;  
     
   //convert string to Two-dimensional array  
               int[,] a = new int[RowNum, ColumnNum];  
     
               
               string testStr = asteroidInfo.De_matrix;  
               char[] StrCharArray=testStr.ToCharArray();  
               
     
     
               for (int i = 0; i < RowNum; i++)  
               {  
                   for (int j = 0; j < ColumnNum; j++)  
                   {  
                       a[i, j] = StrCharArray[i*3+j];  
                   }  
               }  
     
   //According to the value of 1 or 0, to change the  boxview's background color.  
               for (int i = 0; i < RowNum; i++)  
               {  
                   for (int j = 0; j < ColumnNum; j++)  
                   {  
                       BoxView boxView=    new BoxView();  
                       if (StrCharArray[i * 3 + j].ToString().Equals("0"))  
                       {  
                           boxView.BackgroundColor = Color.White;  
                       }  
                       else  
                       {  
     
                           boxView.BackgroundColor = Color.Black;  
     
                       }  
                       MyGrid.Children.Add(boxView, j, i);  
                   }  
               }  
     
     
               Content = MyGrid;  
     
     
     
           }  
       }  
   }

Here is Listviews code.

   <ListView x:Name="mylistview"   
                     ItemsSource="{Binding AsteroidInfoItems}"                   
                     SeparatorVisibility="None"   
                     HasUnevenRows="True"   
                     >  
               <ListView.ItemTemplate>  
                   <DataTemplate >  
                       <ViewCell>  
     
                           <Frame IsClippedToBounds="False"   
                                                  Margin="0,5"   
                                                  CornerRadius="10"   
                                                  Padding="0"   
                                                  HasShadow="False"   
                                                  BorderColor="#f0f0f0"   
                                                  BackgroundColor="Transparent" >  
                               <Frame.GestureRecognizers>  
     
                                   <TapGestureRecognizer Command="{Binding Path=BindingContext.NaviCommand, Source={x:Reference Name=mylistview}}"    
                                          CommandParameter="{Binding .}"/>  
                               </Frame.GestureRecognizers>  
     
                               <StackLayout Padding="0" Spacing="0" MinimumHeightRequest="0">  
                                   <StackLayout Orientation="Horizontal">  
                                       <Label Text="{Binding Date}" Margin="5" FontAttributes="Bold" FontSize="18" TextColor="#222222"/>  
     
                                       <Label Text="{Binding Device_code}" Margin="5"/>  
                                       <Label Text="{Binding De_matrix}" Margin="5"/>  
                                   </StackLayout>  
                                     
                               </StackLayout>  
                           </Frame>  
                       </ViewCell>  
     
                   </DataTemplate>  
     
               </ListView.ItemTemplate>  
           </ListView>

Listview's background code.

   public partial class MainPage : ContentPage  
       {  
           public MainPage()  
           {  
               InitializeComponent();  
               this.BindingContext = new AsteroidViewModel(Navigation);  
           }  
       }

Here is view Model 's code. AsteroidViewModel.cs, I use command to navigate detailsPage.

   public  class AsteroidViewModel  
       {  
           public  ObservableCollection<AsteroidInfo> AsteroidInfoItems { get; set; }  
           public ICommand NaviCommand { protected set; get; }  
           public AsteroidViewModel(INavigation navigation)  
           {  
               AsteroidInfoItems = new ObservableCollection<AsteroidInfo>();  
     
               AsteroidInfoItems.Add(new AsteroidInfo() { Date="2019-02-22", Time="12:01:57", Observatory_code="ob_35634",Device_code="de_10354", device_resolution="3x7", De_matrix= "000000100100110110000" });  
               AsteroidInfoItems.Add(new AsteroidInfo() { Date = "2019-02-25 ", Time = "03:24:21", Observatory_code = "ob_3482734", Device_code = "de_00234", device_resolution = "3x7", De_matrix = "000000010010011011000" });  
               AsteroidInfoItems.Add(new AsteroidInfo() { Date = "2019-02-25 ", Time = "03:27:00", Observatory_code = "ob_3482739", Device_code = "de_00234", device_resolution = "3x7", De_matrix = "001011101100000000000" });  
               AsteroidInfoItems.Add(new AsteroidInfo() { Date = "2019-02-26 ", Time = "03:29:00", Observatory_code = "ob_3482734", Device_code = "de_00765", device_resolution = "3x7", De_matrix = "000010011110010000000" });  
               NaviCommand = new Command<AsteroidInfo>(async (key) => {  
                   AsteroidInfo asteroidInfo = key as AsteroidInfo;  
     
                   await navigation.PushModalAsync(new DetailPage(asteroidInfo));  
     
     
               });  
           }  
     
       }  
     
     public class AsteroidInfo  
       {  
           public string Date { get; set; }  
           public string Time { get; set; }  
           public string Observatory_code { get; set; }  
     
           public string Device_code { get; set; }  
     
           public string device_resolution { get; set; }  
     
           public string De_matrix { get; set; }  
       }

Best Regards,

Leon Lu

If the response is helpful, please click "Accept Answer" and upvote it.

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.

Anonymous

2021-05-25T08:44:40.78+00:00

@Eduardo Gomez I notice you un-accept the answer, did you met some issue when you used above code?
Eduardo Gomez 3,671 Reputation points

2021-05-25T08:55:42.71+00:00

No thanks, it was a finger error hahaha, but how can I put black borders to the matrix like the exercise

Thanks for everything and I am sorry for the error
Anonymous

2021-05-25T09:07:34.05+00:00

That is fine, Gird do not have borderColor property, but you can add MyGrid.BackgroundColor = Color.Black; code in DetailPage.cs like this result.
Eduardo Gomez 3,671 Reputation points

2021-05-26T21:41:35.057+00:00

How can I put more info on the details page
Eduardo Gomez 3,671 Reputation points

2021-05-27T00:13:58.563+00:00

Excuse me can you explain a little more the code for the matrix, I m not very good at 2d arrays
Anonymous

2021-05-27T00:41:22.017+00:00

explain a little more the code for the matrix

For example, we can see this De_matrix "000 000 100 100 110 110 000", you can put every three digits are one line like following

000 000 100 100 110 110 000

If the number is 0, BoxView 's background color is white. If the number is 1, BoxView 's background color is black. Is that clear?
Anonymous

2021-05-27T00:48:06.527+00:00

Then we use string to contains De_matrix, how can we convert string to 2D data-structure, we can use 2D array to store it. we used this part of code to convert string to 2D array.

for (int i = 0; i < RowNum; i++) { for (int j = 0; j < ColumnNum; j++) { a[i, j] = StrCharArray[i*3+j]; } }

After converted to 2D array, we should judge the value in 2D array, if the value is 0, set the boxview's background color to white, if the value is 1, set boxview's background color to black.
Anonymous

2021-05-27T01:02:06.537+00:00

If you want to put more information on the details page. You can add StackLayout in the detailspage.xaml like following screenshot.

Then, you can add gird in the background code with mysl.Children.Add(MyGrid);, do not use Content = MyGrid;.

Then for your other questions, it would be best if you try to open up a new thread for it. In this way, it will make answer searching in the forum easier and be beneficial to other community members as well.
Eduardo Gomez 3,671 Reputation points

2021-05-27T01:14:14.853+00:00

Do you mean opening a thread to explain to me the code?

I want to understand this

char[] StrCharArray = testStr.ToCharArray();
for (int i = 0; i < RowNum; i++) { //0(N^2) TIME COMPLEXITY
for (int j = 0; j < ColumnNum; j++) {
a[i, j] = StrCharArray[i * 3 + j];
}
}
//According to the value of 1 or 0, to change the boxview's background color.
for (int i = 0; i < RowNum; i++) {
for (int j = 0; j < ColumnNum; j++) { // 0(N^2)
BoxView boxView = new BoxView {
BackgroundColor = StrCharArray[i * 3 + j].ToString().Equals("0") ? Color.White : Color.Black
};
Eduardo Gomez 3,671 Reputation points

2021-05-27T01:35:39.737+00:00

I mean data like the device_code. Time. etc
Anonymous

2021-05-27T02:24:28.317+00:00

//convert string to char array, it will help me find the character in the following two `for` Traverse char[] StrCharArray = testStr.ToCharArray(); for (int i = 0; i < RowNum; i++) { //0(N^2) TIME COMPLEXITY for (int j = 0; j < ColumnNum; j++) { // Here I convert string to 2D array, put every character to 2D arrary, we can use Colum index (j), Row index(i) to locate 1D array's index by (i *3 + j) a[i, j] = StrCharArray[i *3 + j]; } }

Please see the new annotation above code, is that clear?
Anonymous

2021-05-27T02:31:01.797+00:00

Do you want to add new data in the detailsPage? If so, you can open a new thread about this issue. you can @ me in the new thread and add dotnet-xamarinforms tag
Eduardo Gomez 3,671 Reputation points

2021-05-27T02:43:33.963+00:00

But why do you multiply by 3. Why is i*3+y
Anonymous

2021-05-27T02:59:45.187+00:00

Because the gird is 3 Column, if the grid column is 4, you can change it as well.
Eduardo Gomez 3,671 Reputation points

2021-05-27T03:09:41.297+00:00

And the +y
Eduardo Gomez 3,671 Reputation points

2021-05-27T03:18:08.037+00:00

Yes is clear but I still do no get why you do the +y, do you happen to know any video on youtube that elustrate this
Anonymous

2021-05-27T03:20:05.267+00:00

i mean current row index, y means current column index, for example. we want to get the index of first 1 in 000 000 100 100 110 110 000, it in the 3rd row(row starts with 0, row index is 2 ), 1st column(column start with 0, column index is 0), we can use 3*2+0=6 to cacluate index in the StrCharArray
Anonymous

2021-05-28T07:45:02.59+00:00

I cannot find the video to explain this.

Share via

Help in creating a dynamic grid from vieModel and display it on the center of the page

0 additional answers

Your answer