CODEWITHSUNDEEP
androidxamlxamarin.androidxamarin.forms
Sebastian
Sebastian

Reputation: 4811

xamarin cross platform form for buttons with image and text layout

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

Upvotes: 0

Views: 6042

Answers (1)

Jay Patel
Jay Patel

Reputation: 628

You can use XLabs Extended Button to get desired output

Upvotes: 1

Related Questions