How to Create a User Control for Numerical Up–Down in Windows Phone?

In the most scenarios, we might have looked out for a spinner/numerical up–down control to increment or decrement a value on our Windows phone app and we would have been left out with no such control. So the absolute choice for most developers will be going for a third party control.  Here with, I have demonstrated an alternate option for this scenario.  The advantages of this new implementation are as follows.

1) Easy-to-use as no code behind stuff needed on the pages where the control is used.
2)      Different maximum values can be set on each page for the control as per the requirement so that the value cannot be changed beyond the given value.

Create a user control:

Create a user control in your solution and label it as UCNumericUpDown.xaml. Copy the below codes and paste it to the page that you have just created.

<Grid Background="White" Height="67" Width="150">
 <Grid.RowDefinitions>
 <RowDefinition Height="*"></RowDefinition>
 <RowDefinition Height="1"></RowDefinition>
 <RowDefinition Height="*"></RowDefinition>
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="*"></ColumnDefinition>
 <ColumnDefinition Width="50"></ColumnDefinition>
 </Grid.ColumnDefinitions>
 <TextBlock Grid.RowSpan="3" Name="tbCount" Text="1" Foreground="Coral" FontSize="41" TextAlignment="Center" Margin="0,0,1,0" ></TextBlock>
 <Border BorderBrush="Black" BorderThickness="0.5" Width="1" HorizontalAlignment="Right" Grid.RowSpan="3"></Border>
 <Border BorderThickness="0.5" BorderBrush="Black" Grid.Row="1" Grid.Column="1"></Border>
 <Grid Grid.Column="1" Tap="imgUp_Tap">
 <Image VerticalAlignment="Top" Height="33" Name="imgUp" Hold="imgUp_Hold" Source="/FEMS;component/Images/UpArrow.png"></Image>
 </Grid>
 <Grid Grid.Column="1" Grid.Row="2" Tap="imgDown_Tap">
 <Image VerticalAlignment="Bottom" Height="33" Name="imgDown" Source="/FEMS;component/Images/DownArrow.png"></Image>
 </Grid>
 </Grid>

 Copy the code and paste it to UCNumericUpDown.xaml.cs page.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Threading; 

namespace FEMS.Assets.UserControls
{
    public partial class UCNumericUpDown : UserControl
    {
        private int _maxValue;
        public int MaxValue
        {
            get { return _maxValue; }
            set { _maxValue = value; }
        }
        private int _count;
        public int Count
        {
            get { return _count; }
            set
            {
                if (value < 0)
                {
                    _count = 1;
                }
                else if (value <= _maxValue)
                {
                    _count = value;
                }
            }
       }
        public UCNumericUpDown()
        {
            MaxValue = 10;
            Count = 1;
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(UCNumericUpDown_Loaded);
        } 

        void UCNumericUpDown_Loaded(object sender, RoutedEventArgs e)
        {
            tbCount.Text = Count.ToString();
        }

        private void imgDown_Tap(object sender, GestureEventArgs e)
        {
            Count = Count - 1;
            tbCount.Text = Count.ToString();
        } 

        private void imgUp_Tap(object sender, GestureEventArgs e)
        {
            Count = Count + 1;
            tbCount.Text = Count.ToString();
        }
        }
    }
}

Build the solution and register the control on the page where you want to use it like MainPage.cs.xaml.
xmlns:uc=”clr-namespace:UserControls. NumericUpDownSample”

Finally, use the below code to use the control we have created.

<uc:UCNumericUpDown BorderThickness=”1″  MaxValue=”10″  x:Name=”ucNumber”   </uc:UCNumericUpDown>

For instance the MaxValue has been set to 10 here; so the value cannot be increased beyond 10.

I hope the solution provided in this post is useful to all Windows Phone 8 app developers across the world and it helps in setting up a numerical up-down solution. If you’ve any other easy solution besides this, input via comments.