Creating a buttons within buttons with more than one text property

Question

What I want to do is add an extra Text property and some buttons in my default button and when the button is clicked some extra properties in the button will be displayed.

So what I already have is the default button, missing one Text property and in the other case missing the buttons.

<Button Text="button1"                          
                Image="carne.png"
                Clicked="Button_Clicked"
                TextColor="White"                            
                ContentLayout="Top"
                BackgroundColor="#40000000"
                BorderColor="#FFFFFF"
                BorderWidth="2"
                CornerRadius="6"
                Grid.Row="1"
                Grid.Column="1"/>

private void Button_Clicked(object sender, EventArgs e)
{
     //add quantity field.   
}

Now, when clicked, I want to display extra functionalities like for example adding the quantity field. Its easier to understand with some images.

The button that I have

First default button

First clicked button

Second default button

Please ignore this icon: Icon

If you think its better to create a question for each type of button let me know. Thank you for your attention.

Why do you want them to be buttons inside buttons, shouldn't this be a layout!? — FreakyAli, May 10 '19 at 11:37
@G.hakim It's a button cause people need to choose the pizza that they want and the other buttons (P_ 8.20€) to choose the size of the pizza. — LOL Jovem, May 10 '19 at 11:40
@G.hakim Could you please show me a simple example please? To understand how it works, I searched for something but didnt find anything. — LOL Jovem, May 10 '19 at 14:12

score 2 · Answer 1 · answered May 13 '19 at 08:56

If you want to add more button controls in button, I suggest you can use layout to do this:

 <StackLayout>
        <Frame
            Margin="20"
            BorderColor="White"
            VerticalOptions="CenterAndExpand">

            <Grid
                ColumnSpacing="0"
                HeightRequest="180"
                RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="60" />
                    <RowDefinition Height="40" />
                    <RowDefinition Height="40" />
                    <RowDefinition Height="40" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Grid.ColumnSpan="3" Source="a1.jpg" />
                <Label
                    Grid.Row="1"
                    Grid.ColumnSpan="3"
                    Text="this is test!!!!!!!" />
                <Button
                    Grid.Row="2"
                    Grid.Column="0"
                    Text="-" />
                <Label Grid.Row="2" Grid.Column="1" />
                <Button
                    Grid.Row="2"
                    Grid.Column="2"
                    Text="+" />
                <Button
                    Grid.Row="3"
                    Grid.Column="0"
                    Text="A" />
                <Button
                    Grid.Row="3"
                    Grid.Column="1"
                    Text="B" />
                <Button
                    Grid.Row="3"
                    Grid.Column="2"
                    Text="C" />
            </Grid>

        </Frame>
    </StackLayout>

Now, you can do some logical operations in the click event, for stacklayout click event, you can add a TapGestureRecognizer to the StackLayout, like this:

How to Add Click event in Stack Layout or Frame

The problem was already solved but I didnt closed the issue but thank you for your attention and help. — LOL Jovem, May 13 '19 at 09:22

score 1 · Accepted Answer · answered May 10 '19 at 22:47

Maybe at this time you already solved your problem, but in case you are still struggling, i am happy to share a sample here with the basic ingredients you need to achieve your goal.

First of all, as already other user mentioned, you need to know that in Xamarin.Forms views support what is called GestureRecognizers.

Following the docu:

You can add gesture recognizers to a view...

Adding items to this collection will associate gesture events with this element. This is not nessesary for elements which natively support input, such as a Button.

So, although you are right that in order to fire an event you can use a Button, you should know that most views admit gesture recognizers, so you can fire also events on tapping a StackLayout, or an Image, etc.

The following is a simple example that tries to mimic one of the pictures you shared.

Note: if you want to copy-paste the following code, recall that Image.Source in XAML is set to "pizza.jpg", an image that you have to add yourself to the different platforms projects. In Android project add the image to Resources.drawable

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.Page1"
             BackgroundColor="Black">

    <Frame BorderColor="White"
           BackgroundColor="Transparent"
           CornerRadius="10"
           Margin="20"
           Padding="10"
           HorizontalOptions="CenterAndExpand"
           VerticalOptions="CenterAndExpand">
        <StackLayout BackgroundColor="Transparent"
                     Spacing="10">

            <Image Source="pizza.jpg"
                   WidthRequest="200"
                   HeightRequest="200"/>

            <Label Text="Bambini"
                   TextColor="White"
                   FontAttributes="Bold"
                   BackgroundColor="Transparent"
                   FontSize="Medium"
                   HorizontalOptions="CenterAndExpand"/>

            <!--The following stack is not visible by default-->
            <StackLayout x:Name="priceStack"
                         BackgroundColor="Transparent"
                         Orientation="Horizontal"
                         IsVisible="False"
                         Spacing="5">
                <StackLayout BackgroundColor="White"
                             HorizontalOptions="FillAndExpand">
                    <Label Text="P"
                           FontSize="Medium"
                           HorizontalTextAlignment="Center"
                           FontAttributes="Bold"/>
                    <Label Text="$8.20"
                           FontSize="Medium"
                           HorizontalTextAlignment="Center"/>

                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"/>
                    </StackLayout.GestureRecognizers>
                </StackLayout>

                <StackLayout BackgroundColor="White"
                             HorizontalOptions="FillAndExpand">
                    <Label Text="M"
                           FontSize="Medium"
                           HorizontalTextAlignment="Center"
                           FontAttributes="Bold"/>
                    <Label Text="$9.90"
                           FontSize="Medium"
                           HorizontalTextAlignment="Center"/>

                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"/>
                    </StackLayout.GestureRecognizers>
                </StackLayout>

                <StackLayout BackgroundColor="White"
                             HorizontalOptions="FillAndExpand">
                    <Label Text="G"
                           FontSize="Medium"
                           HorizontalTextAlignment="Center"
                           FontAttributes="Bold"/>
                    <Label Text="$18.20"
                           FontSize="Medium"
                           HorizontalTextAlignment="Center"/>

                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"/>
                    </StackLayout.GestureRecognizers>
                </StackLayout>
            </StackLayout>

        </StackLayout>

        <Frame.GestureRecognizers>
            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
        </Frame.GestureRecognizers>

    </Frame>

</ContentPage>

Code behind

using System;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MyApp
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Page1 : ContentPage
    {
        public Page1 ()
        {
            InitializeComponent ();
        }

        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
            priceStack.IsVisible = !priceStack.IsVisible;
        }

        private async void TapGestureRecognizer_Tapped_1(object sender, EventArgs e)
        {
            await App.Current.MainPage.DisplayAlert("Confirmation", "Should we send the order?", "Yes", "Cancel");
        }
    }
}

Result

The app starts and you are displayed the menu:

If you tap on the item, the prices appear:

Finally, if you tap on a price, you get a confirmation dialog:

Last, but not least

Take a look at the amazing Xamarin.Forms docu, and do not forget to read the enjoyable book of Ch. Petzold (just two examples of the plenty of resources to learn Xamarin.Forms!).

I hope you can take something out of this :)

The problem was already solved but I didnt closed the issue but thank you for your attention and help, your `TapGestureRecognizer_Tapped` method will help me in a lot of things. — LOL Jovem, May 13 '19 at 09:21

Creating a buttons within buttons with more than one text property

2 Answers2

XAML

Code behind

Result

Last, but not least