Xamarin Forms custom stepper

Question

I am trying to make a custom stepper to use in my listview such as this one

Any idea how to do this? Thanks.

What do you have already? Is this screenshot yours? What is the exact problem? — Gerald Versluis
This is a custom stacklayout with 2 buttons and 1 entry in the middle the problem is that I need to get the value of this entry when changed. For example, In the regular stepper, I can easily use ValueChanged method and handle the value. — mohammad anouti
If it is a custom control, you will need to add your own events so that the page can subscribe to those... — Depechie
Where exactly are you stuck? Post your current implementation. — shanranm
My implementation is the answer of "York Shen" I have the same custom class, I'm stuck at getting the value of the entry to use it in my code. I gave an example in the comment above that in the regular stepper you can easily use the "ValueChanged", but here I don't know how I can do that. — mohammad anouti

York Shen York Shen · Accepted Answer · 2018-11-05T06:16:43

Solution 1:

A Stepper allows inputting a discrete value that is constrained to a range. You could display the value of the Stepper using data binding in a label as follows :

Define in XAML:

<StackLayout x:Name="Container">
    <Label BindingContext="{x:Reference stepper}" Text="{Binding Value}" />
    <Stepper Minimum="0" Maximum="10" x:Name="stepper" Increment="0.5" />
</StackLayout>

Solution 2:

You could create a BindableProperty to implement this function, for example:

public class CustomStepper : StackLayout
{
    Button PlusBtn;
    Button MinusBtn;
    Entry Entry;

    public static readonly BindableProperty TextProperty =
      BindableProperty.Create(
         propertyName: "Text",
          returnType: typeof(int),
          declaringType: typeof(CustomStepper),
          defaultValue: 1,
          defaultBindingMode: BindingMode.TwoWay);

    public int Text
    {
        get { return (int)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }
    public CustomStepper()
    {
        PlusBtn = new Button { Text = "+", WidthRequest = 40, FontAttributes = FontAttributes.Bold, FontSize = 15 };
        MinusBtn = new Button { Text = "-", WidthRequest = 40, FontAttributes = FontAttributes.Bold, FontSize = 15 };
        switch (Device.RuntimePlatform)
        {

            case Device.UWP:
            case Device.Android:
                {
                    PlusBtn.BackgroundColor = Color.Transparent;
                    MinusBtn.BackgroundColor = Color.Transparent;
                    break;
                }
            case Device.iOS:
                {
                    PlusBtn.BackgroundColor = Color.DarkGray;
                    MinusBtn.BackgroundColor = Color.DarkGray;
                    break;
                }
        }

        Orientation = StackOrientation.Horizontal;
        PlusBtn.Clicked += PlusBtn_Clicked;
        MinusBtn.Clicked += MinusBtn_Clicked;
        Entry = new Entry
        {
            PlaceholderColor = Color.Gray,
            Keyboard = Keyboard.Numeric,
            WidthRequest = 40, BackgroundColor = Color.FromHex("#3FFF")
        };
        Entry.SetBinding(Entry.TextProperty, new Binding(nameof(Text), BindingMode.TwoWay, source: this));
        Entry.TextChanged += Entry_TextChanged;
        Children.Add(PlusBtn);
        Children.Add(Entry);
        Children.Add(MinusBtn);
    }

    private void Entry_TextChanged(object sender, TextChangedEventArgs e)
    {
        if (!string.IsNullOrEmpty(e.NewTextValue))
            this.Text = int.Parse(e.NewTextValue);
    }

    private void MinusBtn_Clicked(object sender, EventArgs e)
    {
        if (Text > 1)
            Text--;
    }

    private void PlusBtn_Clicked(object sender, EventArgs e)
    {
        Text++;
    }

}

For more detailed information, please refer to the following documents:

Update:

In the CustomStepper class, the Entry value is binding with the Text property, so you could get the value of the entry via customStepper.Text.

For example:

<local:CustomStepper x:Name="MyCustomerStepper"/>

You could get its Entry value in your xaml.cs file via:

var yourCustomerStepperEntryValue = MyCustomerStepper.Text.ToString();

Xamarin Forms custom stepper

1 Answers

Solution 1:

Solution 2:

Update: