画像とテキストレイアウトのボタンのxamarinクロスプラットフォームフォーム

Question

いくつかのボタンを備えたxamarinクロスプラットフォームのダッシュボードページを作成したいと考えています。各ボタンには、アイコンイメージとテキストがあります。私は別のStackLayout

で作り付けのButtonコントロールのアイコンのプロパティと別のものを使用して二つのアプローチ1.を試してみました。しかし、私の出力は、XAML上で、いくつかの最適化を必要とする

私が試したXAMLは、この

<Grid Padding="10"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="150" ></RowDefinition> 
       <RowDefinition Height="150"></RowDefinition> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition></ColumnDefinition> 
       <ColumnDefinition></ColumnDefinition> 
      </Grid.ColumnDefinitions>   
      <StackLayout Grid.Row="0" Grid.Column="0" BackgroundColor="#3094d2" > 
       <StackLayout VerticalOptions="Center" HorizontalOptions="Center"> 
        <Image Source="@drawable/announcement.png" VerticalOptions="Center" HorizontalOptions="Center" /> 
       </StackLayout> 
       <StackLayout VerticalOptions="Center" HorizontalOptions="Center"> 
        <Button Text="Announcement" TextColor="White" VerticalOptions="Center" HorizontalOptions="Center" /> 
       </StackLayout> 
      </StackLayout> 

      <Button Text="News &amp; Events" Grid.Row="0" Grid.Column="1" BackgroundColor="#287cbe" Image="@drawable/announcement.png" TextColor="White" Clicked="Button_NewsHome_Clicked" /> 
      <Button Text="Messages" Grid.Row="1" Grid.Column="0" BackgroundColor="#5153a9" Image="@drawable/announcement.png" TextColor="White" Clicked="Button_SMSHome_Clicked" /> 



      <Button Text="SMS Alers" Grid.Row="1" Grid.Column="1" Image="@drawable/announcement.png" BackgroundColor="#a434a6" TextColor="White" Clicked="Button_SMSHome_Clicked" /> 

    </Grid> 

のようなものです

出力調整を行うために垂直調整と水平調整で行う調整

Answer 1

XLabs Extended Buttonを使用すると、希望する出力を得ることができますut