title: How to build a grid of controls in XAML?
body: <p>I am trying to build a UI in WPF to a specification. The UI is for editing a collection of items. Each item has an editable string property, and also a variable number of read-only strings which the UI needs to display. It might look something like this:</p>
  
  <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.stack.imgur.com/gn4f3.png" alt="enter image description here"></p>
  
  <p>or, depending on data, might have a different number of text label columns:</p>
  
  <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.stack.imgur.com/vUAhn.png" alt="enter image description here"></p>
  
  <p><strong>The number of text columns is completely variable and can vary from one to "lots".</strong> The specification calls for the columns to be sized to fit the longest entry (they are invariably very short), and the whole thing should look like a grid. This grid will be contained in a window, stretching the text box horizontally to fit the window.</p>
  
  <p>Importantly, the text boxes can contain multi-line text and will grow automatically to fit the text. The rows below need to be pushed out of the way if that happens.</p>
  
  <p><strong>Question</strong>: what would be a good way of doing this in WPF?</p>
  
  <p>Coming from a WinForms background, I am thinking of a <code>TableLayoutPanel</code>, which gets populated directly by code I write. However, I need to do this in WPF. While I could still just get myself a <code>Grid</code> and populate it in code, I would really rather prefer a way that's more in line with how things are done in WPF: namely, define a ViewModel, populate it, and then describe the View entirely in XAML. However, I can't think of a way of describing such a view in XAML.</p>
  
  <p>The closest I can get to this using MVVM and XAML is to use an <code>ItemsControl</code> with one item per row, and use a data template which, in turn, uses another <code>ItemsControl</code> (stacked horizontally this time) for the variable number of labels, followed by the text box. Unfortunately, this can't be made to align vertically in a grid pattern like the spec requires.</p>