title: Xamarin dynamic grid layout
body: <p>I have a collection of objects that has a property like "ValueType", based on this property I invoke a DataTemplateSelector class that would return type of control to be displayed for that object. </p>
  
  <pre><code>&lt;control:ControlDataTemplateSelector x:Key="personDataTemplateSelector"
                  RangeTemplate="{StaticResource rangeControl}"
                  EnumTemplate="{StaticResource pickControl}"
                  DateTemplate="{StaticResource dateControl}"/&gt;
  
  &lt;DataTemplate x:Key="rangeControl"&gt;
                  &lt;ViewCell&gt;
                      &lt;Grid&gt;
                          &lt;Grid.RowDefinitions&gt;
                              &lt;RowDefinition Height="Auto"/&gt;
                              &lt;RowDefinition Height="Auto" /&gt;
                          &lt;/Grid.RowDefinitions&gt;
                          &lt;control:ScreenLabel   Grid.Row="0" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}"  Text="{Binding Path=TraitDescription}" /&gt;
                          &lt;Entry Grid.Row="1" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}"   /&gt;
                      &lt;/Grid&gt;
                  &lt;/ViewCell&gt;
              &lt;/DataTemplate&gt;
              &lt;DataTemplate x:Key="dateControl"&gt;
                  &lt;ViewCell&gt;
                      &lt;Grid&gt;
                          &lt;Grid.RowDefinitions&gt;
                              &lt;RowDefinition Height="Auto"/&gt;
                              &lt;RowDefinition Height="Auto" /&gt;
                          &lt;/Grid.RowDefinitions&gt;
                          &lt;control:ScreenLabel   Grid.Row="0" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" Text="{Binding Path=TraitDescription}" /&gt;
                          &lt;DatePicker Grid.Row="1" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}"&gt;&lt;/DatePicker&gt;
                      &lt;/Grid&gt;
                  &lt;/ViewCell&gt;
              &lt;/DataTemplate&gt;
              &lt;DataTemplate x:Key="pickControl"&gt;
                  &lt;ViewCell&gt;
                      &lt;Grid&gt;
                          &lt;Grid.RowDefinitions&gt;
                              &lt;RowDefinition Height="Auto"/&gt;
                              &lt;RowDefinition Height="Auto" /&gt;
                          &lt;/Grid.RowDefinitions&gt;
                          &lt;control:ScreenLabel   Grid.Row="0" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}"  Text="{Binding Path=TraitDescription}" /&gt;
                          &lt;Picker Grid.Row="1" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}"  /&gt;
                      &lt;/Grid&gt;
                  &lt;/ViewCell&gt;
              &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>I am having issue displaying these in grid with two column format, for example if there are 9 objects in the collection need to display a tabular view with 4 rows of 2 columns each and a 5th row that has one column.</p>
  
  <p>With my current code, i get a zig zag kind of layout. But I need <a href="https://i.stack.imgur.com/3WlKI.png" rel="nofollow noreferrer">Like this</a>Need some suggestions</p>
  
  <p>Am looking for solution that would need to work in iOS and Droid</p>