CODEWITHSUNDEEP
c#xamlxamarinxamarin.forms
G L
G L

Reputation: 870

How can I make a button with children in it in Xamarin?

I am very new to Xamarin for mobile. How can I make a box with percentage dimensions such that it contains a square picture on its left, text on its right, and the entire entity is subject to touch like a button? Even better, with the children on the right side to be vertically stacked. The specific configuration as asked is entirely arbitrary, simply a reference example.

Upvotes: 1

Views: 93

Answers (1)

SushiHangover
SushiHangover

Reputation: 74184

There are many ways this could be done, here is one via a Grid that I added a TapGestureRecognizer to it:

Example:

<Grid BackgroundColor="Gray">
    <Grid.GestureRecognizers>
        <TapGestureRecognizer Tapped="Handle_Tapped" />
    </Grid.GestureRecognizers>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Image Source="deli.jpg" Margin="5,5,5,5" Aspect="AspectFill" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" />
    <StackLayout BackgroundColor="Black" Orientation="Vertical" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" VerticalOptions="CenterAndExpand">
        <Label Text="Cured" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalTextAlignment="Center"  />
        <Label Text="Meat" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalTextAlignment="Center" />
        <Label Text="(View More)" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalTextAlignment="Center" />
    </StackLayout>
</Grid>

Output:

enter image description here

Upvotes: 1

Related Questions