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