在具有多个文本属性的按钮中创建按钮

Question

我想要做的是在我的默认按钮中添加一个额外的 Text 属性和一些按钮，当单击该按钮时，将显示按钮中的一些额外属性。

所以我已经拥有的是默认按钮，缺少一个 Text 属性，在另一种情况下缺少按钮。

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

现在，当单击时，我想显示额外的功能，例如添加数量字段。 使用一些图片更容易理解。

请忽略此图标：

如果您认为为每种类型的按钮创建一个问题更好，请告诉我。 感谢您的关注。

Answer 1

如果你想在按钮中添加更多的按钮控件，我建议你可以使用布局来做到这一点：

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

现在，你可以在点击事件中做一些逻辑操作，对于stacklayout点击事件，你可以在StackLayout中添加一个TapGestureRecognizer，像这样：

How to Add Click event in Stack Layout or Frame

Answer 2

也许此时您已经解决了您的问题，但如果您仍然在苦苦挣扎，我很高兴在这里分享一个示例，其中包含您实现目标所需的基本成分。

---

首先，正如其他用户已经提到的，您需要知道 Xamarin.Forms 视图支持所谓的GestureRecognizers。

关注docu：

您可以将手势识别器添加到视图中...

向此集合添加项目会将手势事件与 这个元素。这对于本机的元素不是必需的 支持输入，例如按钮。

所以，虽然您可以使用Button 来触发事件是对的，但您应该知道大多数 视图都承认手势识别器，因此您也可以在点击a 时触发事件StackLayout，或Image等

---

下面是一个简单的例子，它试图模仿你分享的一张图片。

注意：如果您想复制粘贴以下代码，请记住 XAML 中的 Image.Source 设置为“pizza.jpg”，您必须将自己添加到不同平台项目中的图像。在 Android 项目中将图像添加到 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>

后面的代码

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");
        }
    }
}

---

结果

应用程序启动并显示菜单：

如果您点击该项目，价格会出现：

最后，如果您点击价格，您会看到一个确认对话框：

---

最后，但并非最不重要的

看看令人惊叹的Xamarin.Forms docu，不要忘记阅读令人愉快的book of Ch. Petzold（只是学习 Xamarin.Forms 的大量资源的两个示例！）。

---

我希望你能从中有所收获:)