Xamarin跨平臺窗體的圖像和文本佈局按鈕

Question

我期待創建一個按鈕的Xamarin跨平臺儀表板頁面。每個按鈕都有一個圖標圖像和一個文本。我嘗試了兩種方法1.用按鈕控制的圖標的內在屬性，另一個獨立的StackLayout

但我的輸出需要在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來獲得所需的outp ut