title: Xamarin Forms Custom Control binding issue
body: <p>I have a custom control that I supply a <code>List&lt;string&gt;</code> parameter and it draws a box for each string as a label.  </p>
  
  <p>Here is a version that is working.  Clicking 'Add Tab' adds one tab at a time for each click.</p>
  
  <p>I want to change the code so the List is converted into a different type of object and that is what the control displays.</p>
  
  <p><a href="https://i.stack.imgur.com/FZy19.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FZy19.gif" alt="enter image description here"></a></p>
  
  <p>First I show the code that is working for the image above.  Then I show a changed version of the code that I am unable to get working.  Hopefully for anyone answering this question, seeing the before code that works and the after code that doesn't work, you can easily spot the issue.</p>
  
  <p><strong>MainPage.xaml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
  &lt;ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:local="clr-namespace:App7"
               x:Class="App7.MainPage"&gt;
  
      &lt;StackLayout&gt;
          &lt;BoxView HeightRequest="100" /&gt;
  
          &lt;local:CustomControl 
              SideTabs="{Binding MainNavigationTabs}" 
          /&gt;
  
          &lt;Button Text="Add Tab" Command="{Binding AddTab}" /&gt;
  
      &lt;/StackLayout&gt;
  
  &lt;/ContentPage&gt;
  </code></pre>
  
  <p><strong>MainPageModel.cs</strong></p>
  
  <pre><code>public class MainPageModel : FreshBasePageModel
  {
      public MainPageModel() { }
  
      public List&lt;string&gt; MainNavigationTabs { get; set; }
  
      private int _index = 0;
  
      public Command AddTab
      {
          get
          {
              return new Command(() =&gt;
              {
                  _index++;
  
                  var tabs = new List&lt;string&gt;();
  
                  for (var index = 1; index &lt;= _index; index++)
                  {
                      tabs.Add($"Tab {index}");
                  }
  
                  MainNavigationTabs = tabs;
              });
          }
      }
  }
  </code></pre>
  
  <p><strong>CustomControl.xaml</strong></p>
  
  <pre><code>&lt;ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                   x:Class="App7.CustomControl"
                   BackgroundColor="Beige"
                   x:Name="this"&gt;
      &lt;ContentView.Content&gt;
          &lt;StackLayout&gt;
              &lt;StackLayout Orientation="Vertical"
                               BindableLayout.ItemsSource="{Binding Source={x:Reference this}, Path=SideTabs}"&gt;
  
                  &lt;BindableLayout.ItemTemplate&gt;
                      &lt;DataTemplate&gt;
                          &lt;ContentView WidthRequest="237"
                                           Margin="0"
                                           BackgroundColor="Blue"
                                           Padding="10"&gt;
                              &lt;Label Text="{Binding .}" TextColor="White" /&gt;
                          &lt;/ContentView&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/BindableLayout.ItemTemplate&gt;
              &lt;/StackLayout&gt;
          &lt;/StackLayout&gt;
      &lt;/ContentView.Content&gt;
  &lt;/ContentView&gt;
  </code></pre>
  
  <p><strong>CustomControl.xaml.cs</strong></p>
  
  <pre><code>[XamlCompilation(XamlCompilationOptions.Compile)]
  public partial class CustomControl : ContentView
  {
      public CustomControl()
      {
          InitializeComponent();
      }
  
      public static readonly BindableProperty SideTabsProperty = BindableProperty.Create(
                                         propertyName: "SideTabs",
                                         returnType: typeof(List&lt;string&gt;),
                                         declaringType: typeof(CustomControl),
                                         defaultBindingMode: BindingMode.OneWay,
                                         defaultValue: new List&lt;string&gt;());
  
      public List&lt;string&gt; SideTabs
      {
          get { return base.GetValue(SideTabsProperty) as List&lt;string&gt;; }
          set { base.SetValue(SideTabsProperty, value); }
      }
  }
  </code></pre>
  
  <p>I changed the CustomControl to transform the <code>List&lt;string&gt;</code> to a <code>List&lt;SideTab&gt;</code> object and have the control bind to that.  Here's the code...</p>
  
  <p><strong>CustomControl.xaml.cs</strong></p>
  
  <pre><code>[XamlCompilation(XamlCompilationOptions.Compile)]
  public partial class CustomControl : ContentView
  {
      public CustomControl()
      {
          InitializeComponent();
      }
  
      public static readonly BindableProperty SideTabsProperty = BindableProperty.Create(
                                         propertyName: "SideTabs",
                                         returnType: typeof(List&lt;string&gt;),
                                         declaringType: typeof(CustomControl),
                                         defaultBindingMode: BindingMode.OneWay,
                                         defaultValue: new List&lt;string&gt;());
  
      public List&lt;string&gt; SideTabs
      {
          get
          {
              var tabs = new List&lt;string&gt;();
  
              foreach (var tab in _SideTabs)
              {
                  tabs.Add(tab.Text);
              }
  
              return tabs;
          }
          set
          {
              var tabs = new List&lt;SideTab&gt;();
  
              foreach (var tab in value)
              {
                  tabs.Add(new SideTab() { Text = tab });
              }
  
              _SideTabs = tabs;
          }
      }
  
      public List&lt;SideTab&gt; _SideTabs
      {
          get { return base.GetValue(SideTabsProperty) as List&lt;SideTab&gt;; }
          set { base.SetValue(SideTabsProperty, value); }
      }
  }
  
  public class SideTab
  {
      public string Text { get; set; }
  }
  </code></pre>
  
  <p><strong>CustomControl.xaml</strong></p>
  
  <pre><code>&lt;ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
                      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                      x:Class="App7.CustomControl"
                      BackgroundColor="Beige"
                      x:Name="this"&gt;
      &lt;ContentView.Content&gt;
          &lt;StackLayout&gt;
              &lt;StackLayout Orientation="Vertical"
                                  BindableLayout.ItemsSource="{Binding Source={x:Reference this}, Path=_SideTabs}"&gt;
  
                  &lt;BindableLayout.ItemTemplate&gt;
                      &lt;DataTemplate&gt;
                          &lt;ContentView WidthRequest="237"
                                              Margin="0"
                                              BackgroundColor="Blue"
                                              Padding="10"&gt;
                              &lt;Label Text="{Binding Text}" TextColor="White" /&gt;
                          &lt;/ContentView&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/BindableLayout.ItemTemplate&gt;
              &lt;/StackLayout&gt;
          &lt;/StackLayout&gt;
      &lt;/ContentView.Content&gt;
  &lt;/ContentView&gt;
  </code></pre>
  
  <p>Notice the addition of a property _SideTabs.  When SideTabs is set, it transforms the <code>List&lt;string&gt;</code> into a <code>List&lt;SideTab&gt;</code>.</p>
  
  <p>How can I make this work?  Here is the result from the above code changes...</p>
  
  <p><a href="https://i.stack.imgur.com/wkY6x.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wkY6x.gif" alt="enter image description here"></a></p>