title: Dynamically displaying Items using FlipView and DataTemplateSelector in WinRT
body: <p>I'm using Flipview and a DataTemplateSelector to determine at runtime which DataTemplate to apply to show items in my control.</p>
  
  <p>I have two DataTemplate's, one is static and the second can be used by a undetermined number of items.</p>
  
  <p><strong>Currently</strong></p>
  
  <p>My first view displays:
  - "This is a test - Content" </p>
  
  <p><code>Followed by 18 other views</code> that look like this:
  - "<a href="http://www.google.com/" rel="noreferrer">http://www.google.com/</a> 0" 
  - "<a href="http://www.google.com/" rel="noreferrer">http://www.google.com/</a> 1" 
  - "<a href="http://www.google.com/" rel="noreferrer">http://www.google.com/</a> 2" 
  - and so on until 17</p>
  
  <p><strong>I want</strong> </p>
  
  <p>The items "<a href="http://www.google.com/" rel="noreferrer">http://www.google.com/</a> " to be grouped as <code>3 on a view</code>. </p>
  
  <p>For example the second view will display:</p>
  
  <ul>
  <li>"<a href="http://www.google.com/" rel="noreferrer">http://www.google.com/</a> 0, <a href="http://www.google.com/" rel="noreferrer">http://www.google.com/</a> 1, <a href="http://www.google.com/" rel="noreferrer">http://www.google.com/</a> 2" </li>
  </ul>
  
  <p>The third view will display:</p>
  
  <ul>
  <li>"<a href="http://www.google.com/" rel="noreferrer">http://www.google.com/</a> 3, <a href="http://www.google.com/" rel="noreferrer">http://www.google.com/</a> 4, <a href="http://www.google.com/" rel="noreferrer">http://www.google.com/</a> 5" </li>
  </ul>
  
  <p>And so on..</p>
  
  <p>Bellow is my code:</p>
  
  <p><strong>FlipViewDemo.xaml</strong></p>
  
  <pre><code>&lt;Page.Resources&gt;
      &lt;DataTemplate x:Key="FirstDataTemplate"&gt;
          &lt;Grid&gt;
              &lt;TextBlock Text="{Binding Content}" Margin="10,0,18,18"&gt;&lt;/TextBlock&gt;
          &lt;/Grid&gt;
      &lt;/DataTemplate&gt;
      &lt;DataTemplate x:Key="SecondDataTemplate"&gt;
          &lt;TextBox Text="{Binding Url}"&gt;&lt;/TextBox&gt;
      &lt;/DataTemplate&gt;
      &lt;local:MyDataTemplateSelector x:Key="MyDataTemplateSelector"
                  FirstTextTemplate="{StaticResource FirstDataTemplate}"
                  SecondTextTemplate="{StaticResource SecondDataTemplate}"&gt;
      &lt;/local:MyDataTemplateSelector&gt;
  &lt;/Page.Resources&gt;
  &lt;Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
      &lt;FlipView x:Name="itemGridView" ItemTemplateSelector="{StaticResource MyDataTemplateSelector}" 
      Margin="265,220,284,162"&gt;
      &lt;/FlipView&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p><strong>FlipViewDemo.xaml.cs</strong></p>
  
  <pre><code>public sealed partial class FlipViewDemo : Page
  {
      public FlipViewDemo()
      {
          this.InitializeComponent();
  
          var items = new List&lt;BaseClass&gt;();
  
          items.Add(new FirstItem
          {
              Content="This is a test - Content"
          });
  
          for (int i = 0; i &lt; 18; i++)
          {
              items.Add(new SecondItem
              {
                  Url = "http://www.google.com/ " + i.ToString() 
              });
          }
          itemGridView.ItemsSource = items;
      }
  }
  public class BaseClass
  {
  }
  
  public class FirstItem : BaseClass
  {
      public string Content { get; set; }
  }
  
  public class SecondItem : BaseClass
  {
      public string Url { get; set; }
  }
  
  public class MyDataTemplateSelector : DataTemplateSelector
  {
      public DataTemplate FirstTextTemplate { get; set; }
      public DataTemplate SecondTextTemplate { get; set; }
  
      protected override DataTemplate SelectTemplateCore(object item,
                                                         DependencyObject container)
      {
          if (item is FirstItem)
              return FirstTextTemplate;
          if (item is SecondItem)
              return SecondTextTemplate;
  
          return base.SelectTemplateCore(item, container);
      }
  }
  </code></pre>
  
  <p>I'm thinking that maybe this can be achieved with groups and list view. But I'm not sure how this can be done.</p>
  
  <p>Probably it is a stupid question but, using Google, I can't find an answer. Also english is not my native language; please excuse typing errors.</p>