title: How to display ContentView in a CollectionView in Xamarin Forms
body: <p>I am trying to use an ObservableCollection of controls (ContentViews) in a CollectionView. The collection of ContentViews are currently being created and populated in the ctor of my ContentPage. I then set the ItemSource of the CollectionView to the property on the page that hold the ObservableCollection. My problem is that the ContentViews do not display at all. </p>
  
  <p>Here is the XAML code from the ContentPage:</p>
  
  <pre><code>    &lt;ContentPage.Content&gt;
          &lt;StackLayout&gt;
              &lt;CollectionView ItemsSource="{Binding MyPolicies}"&gt;
                  &lt;CollectionView.Header&gt;
                      &lt;StackLayout BackgroundColor="LightGray"&gt;
                          &lt;Label Margin="10,0,0,0"
                                 Text="My Policies"
                                 FontSize="Small"
                                 FontAttributes="Bold" /&gt;
                      &lt;/StackLayout&gt;
                  &lt;/CollectionView.Header&gt;
              &lt;/CollectionView&gt;
          &lt;/StackLayout&gt;
      &lt;/ContentPage.Content&gt;
  </code></pre>
  
  <p>Here is the code in the ContentPage constructor that creates ContentViews and adds them to the collection bound to the CollectionView :</p>
  
  <pre><code>    public partial class TestCollectionView : ContentPage
      {
          public ObservableCollection&lt;ThreeLineThreeColumnCardView&gt; MyPolicies { get; private set; } = null;
  
          public TestCollectionView()
          {
              IList&lt;ThreeLineThreeColumnCardView&gt; sourcePolicies = new List&lt;ThreeLineThreeColumnCardView&gt;();
              CreateMyPolicies(sourcePolicies);
  
              InitializeComponent();
          }
  
          private void CreateMyPolicies(IList&lt;ThreeLineThreeColumnCardView&gt; sourcePolicies)
          {
              //
              sourcePolicies.Add(new ThreeLineThreeColumnCardView());
  
              sourcePolicies.Add(new ThreeLineThreeColumnCardView());
  
              sourcePolicies.Add(new ThreeLineThreeColumnCardView());
  
              //
              MyPolicies = new ObservableCollection&lt;ThreeLineThreeColumnCardView&gt;(sourcePolicies);
          }
      }
  </code></pre>
  
  <p>Here is the ContentView I'm using. You will notice that it has values set as defaults:</p>
  
  <pre><code>&lt;ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:d="http://xamarin.com/schemas/2014/forms/design"
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               mc:Ignorable="d"
               x:Class="NGIC_XAML.Controls.CardViews.ThreeLineThreeColumnCardView"&gt;
      &lt;Frame WidthRequest="342"
             BackgroundColor="#FFFFFF"
             BorderColor="LightGray"
             CornerRadius="5"
             HasShadow="False"
             Padding="8"
             VerticalOptions="Center"
             HorizontalOptions="Center"&gt;
          &lt;Grid WidthRequest="311" Margin="15, 13, 16, 13"&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="20" /&gt;
                  &lt;RowDefinition Height="30" /&gt;
                  &lt;RowDefinition Height="20" /&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="*" /&gt;
                  &lt;ColumnDefinition Width="*" /&gt;
                  &lt;ColumnDefinition Width="*" /&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Label Grid.Row="0" Grid.Column="0" 
                     Text="{Binding CardTitle, FallbackValue='R0C0'}"
                     FontAttributes="None"
                     FontSize="14"
                     TextColor="{Binding CardTitleColor, FallbackValue='#333333'}"
                     VerticalTextAlignment="Center"
                     HorizontalTextAlignment="Start" /&gt;
              &lt;Label Grid.Row="0" Grid.Column="1" 
                     Text="{Binding CardAmount, FallbackValue='R0C1'}"
                     FontAttributes="Bold"
                     FontSize="16"
                     TextColor="{Binding CardAmountColor, FallbackValue='#53585B'}"
                     VerticalTextAlignment="Center"
                     HorizontalTextAlignment="End" /&gt;
              &lt;Label Grid.Row="0" Grid.Column="2" 
                     Text="{Binding CardAmount, FallbackValue='R0C2'}"
                     FontAttributes="Bold"
                     FontSize="16"
                     TextColor="{Binding CardAmountColor, FallbackValue='#53585B'}"
                     VerticalTextAlignment="Center"
                     HorizontalTextAlignment="End" /&gt;
  
              &lt;Label Grid.Row="1" Grid.Column="0"
                     Text="{Binding CardDate, FallbackValue='R1C0'}"
                     FontSize="12"
                     TextColor="{Binding CardDateColor, FallbackValue='#70777C'}"
                     VerticalTextAlignment="Center"
                     HorizontalTextAlignment="Start" /&gt;
              &lt;Label Grid.Row="1" Grid.Column="1"
                     Text="{Binding CardComment, FallbackValue='R1C1'}"
                     FontSize="12"
                     TextColor="{Binding CardCommentColor, FallbackValue='#70777C'}"
                     VerticalTextAlignment="Center"
                     HorizontalTextAlignment="End" /&gt;
              &lt;Label Grid.Row="1" Grid.Column="2"
                     Text="{Binding CardComment, FallbackValue='R1C2'}"
                     FontSize="12"
                     TextColor="{Binding CardCommentColor, FallbackValue='#70777C'}"
                     VerticalTextAlignment="Center"
                     HorizontalTextAlignment="End" /&gt;
  
              &lt;Label Grid.Row="2" Grid.Column="0"
                     Text="{Binding CardDate, FallbackValue='R2C0'}"
                     FontSize="12"
                     TextColor="{Binding CardDateColor, FallbackValue='#70777C'}"
                     VerticalTextAlignment="Center"
                     HorizontalTextAlignment="Start" /&gt;
              &lt;Label Grid.Row="2" Grid.Column="1"
                     Text="{Binding CardComment, FallbackValue='R2C1'}"
                     FontSize="12"
                     TextColor="{Binding CardCommentColor, FallbackValue='#70777C'}"
                     VerticalTextAlignment="Center"
                     HorizontalTextAlignment="End" /&gt;
              &lt;Label Grid.Row="2" Grid.Column="2"
                     Text="{Binding CardComment, FallbackValue='R2C2'}"
                     FontSize="12"
                     TextColor="{Binding CardCommentColor, FallbackValue='#70777C'}"
                     VerticalTextAlignment="Center"
                     HorizontalTextAlignment="End" /&gt;
          &lt;/Grid&gt;
      &lt;/Frame&gt;
  &lt;/ContentView&gt;
  </code></pre>
  
  <p>And this is what the ContentView looks like in its raw state:</p>
  
  <p><a href="https://i.stack.imgur.com/SY4Oa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SY4Oa.png" alt="raw card view"></a></p>
  
  <p>So, my question is how do I get the collection of "cards" to display in the CollectionView on my ContentPage?</p>
  
  <p>UPDATE
  Added to the ContentPage:</p>
  
  <pre><code>                    &lt;DataTemplate&gt;
                          &lt;Grid Padding="10"&gt;
                              &lt;Grid.RowDefinitions&gt;
                                  &lt;RowDefinition Height="Auto" /&gt;
                              &lt;/Grid.RowDefinitions&gt;
                              &lt;Grid.ColumnDefinitions&gt;
                                  &lt;ColumnDefinition Width="Auto" /&gt;
                              &lt;/Grid.ColumnDefinitions&gt;
                              &lt;cards:ThreeLineCardView /&gt;
                          &lt;/Grid&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/CollectionView.ItemTemplate&gt;
  </code></pre>
  
  <p>UPADTE Demonstrate that the pre-populated card (a ContentView) can be displayed in the Grid outside of the CollectionView</p>
  
  <pre><code>    &lt;ContentPage.Content&gt;
          &lt;StackLayout&gt;
              &lt;!--&lt;CollectionView ItemsSource="{Binding MyPolicies}"&gt;
                  &lt;CollectionView.Header&gt;
                      &lt;StackLayout BackgroundColor="LightGray"&gt;
                          &lt;Label Margin="10,0,0,0"
                                 Text="My Policies"
                                 FontSize="Small"
                                 FontAttributes="Bold" /&gt;
                      &lt;/StackLayout&gt;
                  &lt;/CollectionView.Header&gt;
                  &lt;CollectionView.ItemTemplate&gt;
                      &lt;DataTemplate&gt;
                          &lt;Grid Padding="10"&gt;
                              &lt;Grid.RowDefinitions&gt;
                                  &lt;RowDefinition Height="Auto" /&gt;
                              &lt;/Grid.RowDefinitions&gt;
                              &lt;Grid.ColumnDefinitions&gt;
                                  &lt;ColumnDefinition Width="Auto" /&gt;
                              &lt;/Grid.ColumnDefinitions&gt;
                              &lt;cards:ThreeLineCardView /&gt;
                          &lt;/Grid&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/CollectionView.ItemTemplate&gt;
              &lt;/CollectionView&gt;--&gt;
              &lt;Grid Padding="10"&gt;
                  &lt;Grid.RowDefinitions&gt;
                      &lt;RowDefinition Height="Auto" /&gt;
                  &lt;/Grid.RowDefinitions&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="Auto" /&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
                  &lt;cards:ThreeLineCardView /&gt;
              &lt;/Grid&gt;
          &lt;/StackLayout&gt;
      &lt;/ContentPage.Content&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/d21Bf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d21Bf.png" alt="enter image description here"></a></p>