title: Converting Grid Content to a ListView or Other for use in MVVM Pattern
body: <p>I have a 5 X 4 Grid (code below) which works as desired for the shape of my data. I recently discovered it is virtually impossible to pass a grid from the View Model to the View and bind it to another grid in XAML and still maintain the MVVM pattern - which is my goal.</p>
  
  <p>The challenge here is that my presentation requires the children to be grouped in single cells with each having, 1 image, and two textblock UI elements.</p>
  
  <p>DataTable, DataSet, GridView, List etc all seem to lack the ability to add multiple child elements to individual row/column cells for display. Unfortunately this is not just simply sticking an image in a column header.</p>
  
  <p>Has anyone found another option for doing similar?</p>
  
  <p>Thanks,</p>
  
  <p>Glenn</p>
  
  <p>Below is the sample grid and an image of the resulting view.</p>
  
  <pre><code>public void FormatGridCell()
  {
     Random random = new Random();
     List&lt;int&gt; randomNumList = new List&lt;int&gt;();
     for (int i = 0; i &lt; 50; i++)
        randomNumList.Add(random.Next(50));
  
     List&lt;string&gt; columHeader = new List&lt;string&gt;();
     columHeader.Add("Pitts");
     columHeader.Add("Vans");
     columHeader.Add("Lancair");
     columHeader.Add("Epic");
  
     List&lt;string&gt; rowHeader = new List&lt;string&gt;();
     rowHeader.Add("NORTH");
     rowHeader.Add("SOUTH");
     rowHeader.Add("EAST");
     rowHeader.Add("WEST");
     rowHeader.Add("CANADA");
  
     for (int x = 1; x &lt; 5; x++)
     {
        var engineType= new TextBlock { Text = columHeader[x - 1] };
        engineType.SetValue(Grid.RowProperty, 0);
        engineType.SetValue(Grid.ColumnProperty, x);
        engineType.HorizontalAlignment = HorizontalAlignment.Center;
        this.airplaneGrid.Children.Add(engineType);
  
        for (int r = 1; r &lt; 6; r++)
        {
           var dealerService = new TextBlock { Text = rowHeader[r - 1] };
           dealerService.SetValue(Grid.RowProperty, r);
           dealerService.SetValue(Grid.ColumnProperty, 0);
           dealerService.HorizontalAlignment = HorizontalAlignment.Center;
           this.airplaneGrid.Children.Add(dealerService);
  
           for (int i = 1; i &lt; 6; i++)
           {
              // Bitmap path will be based on Type
              var modelImage = new Image { Width = 20, Height = 20 };
              var bitmapImage = new BitmapImage(new Uri(@"c:\personal\temp\dog.jpg"));
              modelImage.Source = bitmapImage;
              modelImage.SetValue(Grid.RowProperty, r);
              modelImage.SetValue(Grid.ColumnProperty, i);
              modelImage.HorizontalAlignment = HorizontalAlignment.Left;
              modelImage.VerticalAlignment = VerticalAlignment.Top;
  
              var mfgName = new TextBlock { Text = "Lancair IV" };
              mfgName.SetValue(Grid.RowProperty, r);
              mfgName.SetValue(Grid.ColumnProperty, i);
              mfgName.HorizontalAlignment = HorizontalAlignment.Center;
  
              var price = new TextBlock { Text = "$" + randomNumList[r + i] };
              price.SetValue(Grid.RowProperty, r);
              price.SetValue(Grid.ColumnProperty, i);
              price.HorizontalAlignment = HorizontalAlignment.Left;
              price.VerticalAlignment = VerticalAlignment.Center;
              price.Margin = new Thickness(30, 0, 0, 0);
  
              this.airplaneGrid.Children.Add(modelImage);
              this.airplaneGrid.Children.Add(mfgName);
              this.airplaneGrid.Children.Add(price);
            }
         }
      }
   }
  </code></pre>
  
  <p>This function is not mine. Sorry, forgot the named credit, but a fellow stackoverflow chap provided to this forum.</p>
  
  <pre><code> public static class RandomExtensions
   {
      public static int NextDouble(
                      Random random,
                      double minValue,
                      double maxValue)
      {
         return random.Next(10, 50);
      }
   }
  </code></pre>
  
  <p>Sorry, I'm too low on the totem pole to submit an image, but run it for a full understanding of the intended layout.</p>
  
  <p>here is the XAML to support the above.</p>
  
  <pre><code> &lt;Grid x:Name="airplaneGrid" ShowGridLines="True"&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="60" /&gt;
              &lt;RowDefinition Height="60"/&gt;
              &lt;RowDefinition Height="60"/&gt;
              &lt;RowDefinition Height="60"/&gt;
              &lt;RowDefinition Height="60"/&gt;
              &lt;RowDefinition Height="60"/&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="175"/&gt;
              &lt;ColumnDefinition Width="175"/&gt;
              &lt;ColumnDefinition Width="175"/&gt;
              &lt;ColumnDefinition Width="175"/&gt;
              &lt;ColumnDefinition Width="175"/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
      &lt;/Grid&gt;
  </code></pre>