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

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

也许这时您已经解决了问题，但是如果您仍在挣扎，我很高兴在这里与您分享实现目标所需的基本成分的示例。

---

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

在docu之后：

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

  

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

因此，尽管您正确地说，为了触发事件可以使用Button，但您应该知道 most 视图允许手势识别器，因此您还可以触发事件点击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的大量资源中的两个例子！）。

---

我希望你能从中得到一些东西：）

Answer 2

如果要在按钮中添加更多按钮控件，建议您使用布局来完成此操作：

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

现在，您可以在click事件中执行一些逻辑操作，对于stacklayout click事件，可以将 TapGestureRecognizer 添加到StackLayout中，如下所示：

How to Add Click event in Stack Layout or Frame