Handle button in listview Xamarin.Forms

Question

I'm new with xamarin.forms. I don't know how to handle buttons in listview. I want to create 2 button with + and - function. The entry will be default = 0. When i click + button, entry will be ++ and -- when i click - button. Any one please tell me what i should do. Here is my code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="QRScanner.Menu">
<ListView x:Name="MyListView"
        ItemsSource="{Binding Items}"
        ItemTapped="Handle_ItemTapped"
        CachingStrategy="RecycleElement">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell
                Height="100"
                >
                <AbsoluteLayout>
                    <StackLayout
                        AbsoluteLayout.LayoutBounds="0,0,0.65,1"
                        AbsoluteLayout.LayoutFlags="All"
                        Orientation="Horizontal">
                        <Image
                        HorizontalOptions="StartAndExpand"
                        WidthRequest="70"
                        HeightRequest="70"
                        VerticalOptions="CenterAndExpand"
                        Source="{Binding imgUrl}"
                        />
                        <Label Text="{Binding name}" 
                        VerticalOptions="CenterAndExpand"
                               HorizontalOptions="CenterAndExpand"
                           />
                        <Label
                            HorizontalOptions="EndAndExpand"
                            Text="{Binding price}"
                            VerticalOptions="CenterAndExpand"/>
                    </StackLayout>
                    <StackLayout
                        AbsoluteLayout.LayoutBounds="1,0,0.35,1"
                        AbsoluteLayout.LayoutFlags="All"
                        Orientation="Horizontal"
                        >
                        <Button
                        VerticalOptions="Center"
                        HeightRequest="30"
                        WidthRequest="30"
                        Clicked="Button_Clicked"
                        Text="-"
                        x:Name="btnMinus"
                        FontSize="12"
                        BackgroundColor="White"
                        TextColor="Green"
                        BorderColor="Green"/>
                        <Entry
                            Keyboard="Numberic"
                        x:Name="edt_quantity"
                            Text="{Binding quantity}"
                            FontSize="12"/>
                        <Button
                            x:Name="btnAdd"
                            VerticalOptions="Center"
                        WidthRequest="30"
                        HeightRequest="30"
                        Clicked="Button_Clicked_1"
                        Text="+"
                            FontSize="12"
                        BackgroundColor="White"
                        TextColor="Green"
                        BorderColor="Green"
                        />
                    </StackLayout>
                </AbsoluteLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Here is image of my listview

I want to get data from api, customers can select number from menu, after that send it to the server. Like booking app.

Sorry sir, i got some new problem, so i have'nt tried, when i try, i will tell you the result, thank for your help so much. — Đạt Nguyễn

Lucas Zhang - MSFT Lucas Zhang - MSFT · Accepted Answer · 2019-03-04T08:39:10

Refer the following code

in xaml

<StackLayout
           Orientation="Horizontal"
           HorizontalOptions="EndAndExpand"
           VerticalOptions="Center">
    <Button
          HeightRequest="40"
          WidthRequest="40"
          Clicked="ClickMinus"
          Text="-"
          BackgroundColor="White"
          TextColor="Green"
          BorderColor="Green"/>
    <Entry
         x:Name="edt_quantity"
         Text="0"/>
    <Button
         WidthRequest="40"
         HeightRequest="40"
         Clicked="ClickPlus"
         Text="+"
         BackgroundColor="White"
         TextColor="Green"
         BorderColor="Green"/>
</StackLayout>

in xaml.cs

private void ClickPlus(object sender, EventArgs e)
{
  int num = int.Parse(edt_quantity.Text)+1;
  edt_quantity.Text = num.ToString();
}

private void ClickMinus(object sender, EventArgs e)
{
  int num = int.Parse(edt_quantity.Text)-1;
  edt_quantity.Text = num.ToString();
}

If you want to implement it in viewcell.You can create a subclass of viewcell.

<ListView x:Name="MyListView"
    CachingStrategy="RecycleElement">
    <ListView.ItemTemplate>
        <DataTemplate>
            <local:MyViewCell Height="100" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

And in the Custom viewcell

in xaml

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="App6.ViewCell1">
 <ViewCell.View>
    <AbsoluteLayout>
        //...
        <StackLayout
                    AbsoluteLayout.LayoutBounds="1,0,0.35,1"
                    AbsoluteLayout.LayoutFlags="All"
                    Orientation="Horizontal"
                    >
            <Button
                    VerticalOptions="Center"
                    HeightRequest="30"
                    WidthRequest="30"
                    Clicked="BtnMinus_Clicked"
                    Text="-"
                    x:Name="btnMinus"
                    FontSize="12"
                    BackgroundColor="White"
                    TextColor="Green"
                    BorderColor="Green"/>
            <Entry
                        Keyboard="Numberic"
                        x:Name="myEntry"
                        Text="0"
                        FontSize="12"/>
            <Button
                        x:Name="btnAdd"
                        VerticalOptions="Center"
                    WidthRequest="30"
                    HeightRequest="30"
                    Clicked="BtnAdd_Clicked"
                    Text="+"
                        FontSize="12"
                    BackgroundColor="White"
                    TextColor="Green"
                    BorderColor="Green"
                    />
        </StackLayout>
    </AbsoluteLayout>
  </ViewCell.View>
</ViewCell>

in xaml.cs

public partial class MyViewCell: ViewCell
{
    public MyViewCell()
    {
        InitializeComponent ();
    }


    private void BtnMinus_Clicked(object sender, EventArgs e)
    {
        int num = int.Parse(myEntry.Text) - 1;
        myEntry.Text = num.ToString();
    }

    private void BtnAdd_Clicked(object sender, EventArgs e)
    {
        int num = int.Parse(myEntry.Text) + 1;
        myEntry.Text = num.ToString();
    }
}

Handle button in listview Xamarin.Forms

1 Answers