Создание кнопок внутри кнопок с более чем одним текстовым свойством

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>

Теперь вы можете выполнять некоторые логические операции в событии click для события click в стеке, вы можете добавить TapGestureRecognizer к StackLayout, например:

Как добавить событие Click в макете стека или в кадре

Answer 2

Возможно, в это время вы уже решили свою проблему, но если вы все еще боретесь, я с радостью поделюсь примером с основными ингредиентами, необходимыми для достижения вашей цели.

---

Сначалаиз всех, как уже упоминалось другим пользователем, вы должны знать, что в представлениях Xamarin.Forms поддерживается то, что называется GestureRecognizers.

После document :

Youможно добавить распознаватели жестов в представление ...

Добавление элементов в эту коллекцию свяжет события жеста с этим элементом.Это не обязательно для элементов, которые изначально поддерживают ввод, таких как Button.

Итак, хотя вы правы, что для запуска события вы можете использовать Button, вы должны знать, что большинство представлений допускают распознаватели жестов, так что вы можете также запускать события при нажатии StackLayout, или Image и т. Д.

---

Ниже приведен простой пример, который пытаетсячтобы имитировать одно из изображений, которыми вы поделились.

Примечание: если вы хотите скопировать и вставить следующий код, вспомните, что для Image.Source в XAML установлено значение «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 document и не забудьте прочитать приятную книгу Ч.,Petzold (всего два примера из множества ресурсов для изучения Xamarin.Forms!).

---

Надеюсь, вы сможете что-то из этого извлечь:)