title: xamarin cross platform form for buttons with image and text layout
body: <p>I am looking to create a xamarin cross platform dashboard page with some buttons. Each button have an icon image and a text. I tried two approaches 1. with using inbuilt property of Icon of Button control and another with separate StackLayout </p>
  
  <p>But my output needs some optimization on xaml 
  <a href="https://i.stack.imgur.com/YHKbV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YHKbV.png" alt="enter image description here"></a></p>
  
  <p>The xaml i tried is like this </p>
  
  <pre><code>    &lt;Grid Padding="10"&gt;
              &lt;Grid.RowDefinitions&gt;
                &lt;RowDefinition  Height="150" &gt;&lt;/RowDefinition&gt;
                &lt;RowDefinition Height="150"&gt;&lt;/RowDefinition&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Grid.ColumnDefinitions&gt;
                &lt;ColumnDefinition&gt;&lt;/ColumnDefinition&gt;
                &lt;ColumnDefinition&gt;&lt;/ColumnDefinition&gt;
              &lt;/Grid.ColumnDefinitions&gt;        
             &lt;StackLayout Grid.Row="0" Grid.Column="0" BackgroundColor="#3094d2"  &gt;
                  &lt;StackLayout VerticalOptions="Center" HorizontalOptions="Center"&gt;
                      &lt;Image   Source="@drawable/announcement.png" VerticalOptions="Center" HorizontalOptions="Center" /&gt;
                  &lt;/StackLayout&gt;
                  &lt;StackLayout VerticalOptions="Center" HorizontalOptions="Center"&gt;
                       &lt;Button Text="Announcement"   TextColor="White" VerticalOptions="Center" HorizontalOptions="Center" /&gt;
                  &lt;/StackLayout&gt;
              &lt;/StackLayout&gt;
  
              &lt;Button Text="News &amp;amp; Events"   Grid.Row="0" Grid.Column="1"  BackgroundColor="#287cbe" Image="@drawable/announcement.png" TextColor="White" Clicked="Button_NewsHome_Clicked"  /&gt;
              &lt;Button Text="Messages" Grid.Row="1" Grid.Column="0"  BackgroundColor="#5153a9" Image="@drawable/announcement.png" TextColor="White" Clicked="Button_SMSHome_Clicked" /&gt;
  
  
  
              &lt;Button Text="SMS Alers" Grid.Row="1" Grid.Column="1"  Image="@drawable/announcement.png" BackgroundColor="#a434a6" TextColor="White" Clicked="Button_SMSHome_Clicked" /&gt;
  
      &lt;/Grid&gt;
  </code></pre>
  
  <p>What adjustments i have to do on Vertical and Horizontal align to make my ouput looks like that on the left side</p>