title: Xamarin.Forms: Skip Source in a Binding on custom ContentView
body: <p>I'm trying to create a ContentView containing a <code>CheckBox</code> and <code>Label</code>. When you click the label the Checkbox should be toggled.</p>
  <p>Now the problem I have with my code, is that each time you want to use the checkbox, you have to rebase the BindingContext, or else it won't work.</p>
  <p>You have to specify the source (= MainPage.BindingContext):</p>
  <pre><code>&lt;controls:CheckBox
      Text=&quot;Hello world&quot;
      IsChecked=&quot;{Binding BindingContext.PanelsVisible,
                     Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type app:MainPage}},
                     Mode=TwoWay}&quot; /&gt;
  </code></pre>
  <p>And cannot simply write:</p>
  <pre><code>&lt;controls:CheckBox
      Text=&quot;Hello world&quot;
      IsChecked=&quot;{Binding PanelsVisible, Mode=TwoWay}&quot; /&gt;
  </code></pre>
  <p>You'd get the following error:</p>
  <pre><code>[0:] Binding: 'PanelsVisible' property not found on 'Example.Xamarin.Forms.Controls.CheckBox', target property: 'Example.Xamarin.Forms.Controls.CheckBox.IsChecked'
  </code></pre>
  <p>So he's looking for the <code>PanelsVisible</code> property on my checkbox instead of my viewmodel (why?).</p>
  <p>How can I rewrite this so that I don't have to specify the Source each time I'm using my checkbox?</p>
  <p>I created a <a href="https://github.com/MintPlayer/MintPlayer.Xamarin.Forms.Controls" rel="nofollow noreferrer">repository here</a></p>
  <h2>Code</h2>
  <p>Code behind:</p>
  <pre><code>[XamlCompilation(XamlCompilationOptions.Compile)]
  public partial class CheckBox : ContentView
  {
      public CheckBox()
      {
          InitializeComponent();
          BindingContext = this;
      }
  
      #region IsChecked
      public static readonly BindableProperty IsCheckedProperty = BindableProperty.Create(&quot;IsChecked&quot;, typeof(bool), typeof(CheckBox), false, BindingMode.TwoWay, propertyChanged: (bindable, oldValue, newValue) =&gt;
      {
          var control = (CheckBox)bindable;
          control.IsChecked = (bool)newValue;
      });
  
      public bool IsChecked
      {
          get =&gt; (bool)GetValue(IsCheckedProperty);
          set
          {
              SetValue(IsCheckedProperty, value);
          }
      }
      #endregion
  
      #region Text
      public static readonly BindableProperty TextProperty = BindableProperty.Create(&quot;Text&quot;, typeof(string), typeof(CheckBox), &quot;&quot;, BindingMode.OneWay, propertyChanged: (bindable, oldValue, newValue) =&gt;
      {
          var control = (CheckBox)bindable;
          control.Text = (string)newValue;
      });
  
      public string Text
      {
          get =&gt; (string)GetValue(TextProperty);
          set =&gt; SetValue(TextProperty, value);
      }
      #endregion
  
      private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
      {
          IsChecked = !IsChecked;
      }
  }
  </code></pre>
  <p>Xaml:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
  &lt;ContentView xmlns=&quot;http://xamarin.com/schemas/2014/forms&quot; 
               xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot;
               xmlns:d=&quot;http://xamarin.com/schemas/2014/forms/design&quot;
               xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
               xmlns:controls=&quot;clr-namespace:MintPlayer.Xamarin.Forms.Controls&quot;
           
               mc:Ignorable=&quot;d&quot;
               d:BindingContext=&quot;{x:Static controls:CheckBox}&quot;
           
               x:Class=&quot;MintPlayer.Xamarin.Forms.Controls.CheckBox&quot;&gt;
      &lt;ContentView.Content&gt;
          &lt;StackLayout Orientation=&quot;Horizontal&quot;&gt;
              &lt;CheckBox IsChecked=&quot;{Binding IsChecked, Mode=TwoWay, UpdateSourceEventName=CheckedChanged}&quot; HorizontalOptions=&quot;Start&quot; VerticalOptions=&quot;Start&quot; /&gt;
              &lt;Label Text=&quot;{Binding Text}&quot; Padding=&quot;0,5,0,0&quot; HorizontalOptions=&quot;StartAndExpand&quot; VerticalOptions=&quot;Start&quot;&gt;
                  &lt;Label.GestureRecognizers&gt;
                      &lt;TapGestureRecognizer Tapped=&quot;TapGestureRecognizer_Tapped&quot; /&gt;
                  &lt;/Label.GestureRecognizers&gt;
              &lt;/Label&gt;
          &lt;/StackLayout&gt;
      &lt;/ContentView.Content&gt;
  &lt;/ContentView&gt;
  </code></pre>
  <p>And so I can use my custom checkbox like this:</p>
  <p>Xaml:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
  &lt;ContentPage xmlns=&quot;http://xamarin.com/schemas/2014/forms&quot;
               xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot;
               xmlns:app=&quot;clr-namespace:MintPlayer.Xamarin.Forms.Controls.Demo&quot;
               xmlns:controls=&quot;clr-namespace:MintPlayer.Xamarin.Forms.Controls;assembly=MintPlayer.Xamarin.Forms.Controls&quot;
               x:Class=&quot;MintPlayer.Xamarin.Forms.Controls.Demo.MainPage&quot;&gt;
      &lt;ContentPage.BindingContext&gt;
          &lt;app:MainVM /&gt;
      &lt;/ContentPage.BindingContext&gt;
      &lt;StackLayout&gt;
          &lt;controls:CheckBox Text=&quot;Hello world&quot; IsChecked=&quot;{Binding BindingContext.PanelsVisible, Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type app:MainPage}}, Mode=TwoWay}&quot; /&gt;
          &lt;!-- I want to write this --&gt;
          &lt;!-- &lt;controls:CheckBox Text=&quot;Hello world&quot; IsChecked=&quot;{Binding PanelsVisible, Mode=TwoWay}&quot; /&gt; --&gt;
          &lt;Switch IsToggled=&quot;{Binding PanelsVisible, Mode=TwoWay}&quot; /&gt;
          &lt;Frame IsVisible=&quot;{Binding PanelsVisible}&quot; BackgroundColor=&quot;#2196F3&quot; Padding=&quot;24&quot; CornerRadius=&quot;0&quot;&gt;
              &lt;Label Text=&quot;Welcome to Xamarin.Forms!&quot; HorizontalTextAlignment=&quot;Center&quot; TextColor=&quot;White&quot; FontSize=&quot;36&quot;/&gt;
          &lt;/Frame&gt;
      &lt;/StackLayout&gt;
  &lt;/ContentPage&gt;
  </code></pre>
  <p>ViewModel:</p>
  <pre><code>public class MainVM : BaseModel
  {
      private bool panelsVisible;
      public bool PanelsVisible
      {
          get =&gt; panelsVisible;
          set =&gt; SetProperty(ref panelsVisible, value);
      }
  }
  </code></pre>