title: Overlapping buttons in Xamarin.Forms grid
body: <p>I'm trying to develop a Xamarin.Forms application.</p>
  <p>I have the following grid, displayed like a piano keyboard:</p>
  <p><a href="https://i.stack.imgur.com/9I78R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9I78R.png" alt="enter image description here" /></a></p>
  <p>and, for example, this code, in xaml:</p>
  <pre><code>   &lt;Grid ColumnSpacing=&quot;2&quot;&gt;
          &lt;Grid.RowDefinitions&gt;
            &lt;RowDefinition Height=&quot;120&quot; /&gt;
            &lt;RowDefinition Height=&quot;50&quot; /&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Grid.ColumnDefinitions&gt;
            &lt;ColumnDefinition Width=&quot;auto&quot; /&gt;
            &lt;ColumnDefinition Width=&quot;auto&quot; /&gt;
            &lt;ColumnDefinition Width=&quot;auto&quot; /&gt;
            &lt;ColumnDefinition Width=&quot;auto&quot; /&gt;
            &lt;ColumnDefinition Width=&quot;auto&quot; /&gt;
            &lt;ColumnDefinition Width=&quot;auto&quot; /&gt;
            &lt;ColumnDefinition Width=&quot;auto&quot; /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Button
            Grid.RowSpan=&quot;2&quot;
            Grid.Column=&quot;0&quot;
            BackgroundColor=&quot;White&quot;
            Text=&quot;C&quot;
            TextColor=&quot;Black&quot;
            WidthRequest=&quot;45&quot; /&gt;
          &lt;Button
            Grid.RowSpan=&quot;2&quot;
            Grid.Column=&quot;1&quot;
            BackgroundColor=&quot;White&quot;
            Text=&quot;D&quot;
            TextColor=&quot;Black&quot;
            WidthRequest=&quot;45&quot; /&gt;
          &lt;Button
            Grid.RowSpan=&quot;2&quot;
            Grid.Column=&quot;2&quot;
            BackgroundColor=&quot;White&quot;
            Text=&quot;E&quot;
            TextColor=&quot;Black&quot;
            WidthRequest=&quot;45&quot; /&gt;
          &lt;Button
            Grid.RowSpan=&quot;2&quot;
            Grid.Column=&quot;3&quot;
            BackgroundColor=&quot;White&quot;
            Text=&quot;F&quot;
            TextColor=&quot;Black&quot;
            WidthRequest=&quot;45&quot; /&gt;
          &lt;Button
            Grid.RowSpan=&quot;2&quot;
            Grid.Column=&quot;4&quot;
            BackgroundColor=&quot;White&quot;
            Text=&quot;G&quot;
            TextColor=&quot;Black&quot;
            WidthRequest=&quot;45&quot; /&gt;
          &lt;Button
            Grid.RowSpan=&quot;2&quot;
            Grid.Column=&quot;5&quot;
            BackgroundColor=&quot;White&quot;
            Text=&quot;A&quot;
            TextColor=&quot;Black&quot;
            WidthRequest=&quot;45&quot; /&gt;
          &lt;Button
            Grid.RowSpan=&quot;2&quot;
            Grid.Column=&quot;6&quot;
            BackgroundColor=&quot;White&quot;
            Text=&quot;B&quot;
            TextColor=&quot;Black&quot;
            WidthRequest=&quot;45&quot; /&gt;
  
          &lt;Button
            Grid.Column=&quot;0&quot;
            Grid.ColumnSpan=&quot;2&quot;
            BackgroundColor=&quot;Black&quot;
            HorizontalOptions=&quot;Center&quot;
            Text=&quot;C#&quot;
            TextColor=&quot;White&quot;
            WidthRequest=&quot;35&quot; /&gt;
          &lt;Button
            Grid.Column=&quot;1&quot;
            Grid.ColumnSpan=&quot;2&quot;
            BackgroundColor=&quot;Black&quot;
            HorizontalOptions=&quot;Center&quot;
            Text=&quot;D#&quot;
            TextColor=&quot;White&quot;
            WidthRequest=&quot;35&quot; /&gt;
          &lt;Button
            Grid.Column=&quot;3&quot;
            Grid.ColumnSpan=&quot;2&quot;
            BackgroundColor=&quot;Black&quot;
            HorizontalOptions=&quot;Center&quot;
            Text=&quot;F#&quot;
            TextColor=&quot;White&quot;
            WidthRequest=&quot;35&quot; /&gt;
          &lt;Button
            Grid.Column=&quot;4&quot;
            Grid.ColumnSpan=&quot;2&quot;
            BackgroundColor=&quot;Black&quot;
            HorizontalOptions=&quot;Center&quot;
            Text=&quot;G#&quot;
            TextColor=&quot;White&quot;
            WidthRequest=&quot;35&quot; /&gt;
          &lt;Button
            Grid.Column=&quot;5&quot;
            Grid.ColumnSpan=&quot;2&quot;
            BackgroundColor=&quot;Black&quot;
            HorizontalOptions=&quot;Center&quot;
            Text=&quot;A#&quot;
            TextColor=&quot;White&quot;
            WidthRequest=&quot;35&quot; /&gt;
        &lt;/Grid&gt;
  </code></pre>
  <p>My issue is that when I click a white button (e.g. &quot;A&quot; button), this happens:</p>
  <p><a href="https://i.stack.imgur.com/xHxQB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xHxQB.png" alt="enter image description here" /></a></p>
  <p>Do you happen to know how I can fix the position of the buttons, in order to avoid this overlapping?</p>
  <p>I'm not sure if the grid is the best way to achieve what I want to display, but I assumed it would be a good choice. If you have a better container for this, please let me know.</p>