title: Xamarin custom controls
body: <p>I am new to Xamarin.I decided my first project to be a fitness app.I wanted to have a custom control , an image with a button and a label inside of it , so I did this in a content view file:</p>
  <pre><code>&lt;ContentView xmlns=&quot;http://xamarin.com/schemas/2014/forms&quot; 
               xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot;
               x:Class=&quot;Fitness_App.TabWorkout&quot;&gt;
      &lt;RelativeLayout &gt;
          &lt;Image x:Name=&quot;img&quot; Source=&quot;workout&quot;/&gt;
          &lt;Button BackgroundColor= &quot;Wheat&quot;
                  CornerRadius=&quot;30&quot;
                  WidthRequest=&quot;50&quot;
                  HeightRequest=&quot;50&quot;
                  RelativeLayout.XConstraint=&quot;{ConstraintExpression Type=RelativeToView, ElementName=img, Property=Width, Factor=0.68}&quot;
                  RelativeLayout.YConstraint=&quot;{ConstraintExpression Type=RelativeToView, ElementName=img, Property=Height, Factor=0.45}&quot;/&gt;
           &lt;Label x:Name=&quot;workout_name&quot;
                  FontFamily=&quot;BebasNeue&quot;
                  TextColor =&quot;ForestGreen&quot;
                  FontSize=&quot;37&quot;
                  RelativeLayout.XConstraint=&quot;{ConstraintExpression Type=RelativeToView, ElementName=img, Property=Width, Factor=0.18}&quot;
                  RelativeLayout.YConstraint=&quot;{ConstraintExpression Type=RelativeToView, ElementName=img, Property=Height, Factor=0.2}&quot;/&gt;
                  
      &lt;/RelativeLayout&gt;
  
  &lt;/ContentView&gt;
  </code></pre>
  <p>And since I want 5 workouts(for 5 muscle groups) , I put this inside my page:</p>
  <pre><code>&lt;ContentPage.Content&gt;
              &lt;ScrollView&gt;
                  &lt;StackLayout&gt;
                      &lt;local:TabWorkout/&gt;
                      &lt;local:TabWorkout/&gt;
                      &lt;local:TabWorkout/&gt;
                      &lt;local:TabWorkout/&gt;
                      &lt;local:TabWorkout/&gt;
                  &lt;/StackLayout&gt;
              &lt;/ScrollView&gt;
          &lt;/ContentPage.Content&gt;
  </code></pre>
  <p>and this is how it looks:
  <a href="https://i.stack.imgur.com/HiHWr.png" rel="nofollow noreferrer">android simulator</a>
  I have read about bindable properties but I don't know how they would help me in this case.I don't know why the width of my image is not full.When I have just placed images in my stacklayout , it seemed to work.Maybe you guys have another idea for this?thanks.</p>