xamarin cross platform form for buttons with image and text layout

0
votes

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

But my output needs some optimization on xaml enter image description here

The xaml i tried is like this 

    <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>

What adjustments i have to do on Vertical and Horizontal align to make my ouput looks like that on the left side

1
androidxamlxamarin.androidxamarin.forms
Try RelativeLayout in the PCL. – Mike Ma

1 Answers

1
votes

You can use XLabs Extended Button to get desired output