Windows Phone 8 Number Pad as Popup example

This article describes about to open the Number Pad in Windows 8 Phone where user can enter/Delete/Clear/Cancel the required amount. For example, when user clicks on ChangeAmount button in Main Page or Parent Page, number pad will be displayed as a popup where user can enter the required Amount. When Number Pad closes, the user entered amount will be reflected in Main Page. Similarly, users can Clear/Delete/Cancel the amount entered.

This feature can be implemented in Windows Store Application with same business logic. You can use the Popup or Flyout control for Number Pad as per the requirement.

1) Create a Windows Phone project in MVVMLight and add the TextBlock Control for Amount display and ChangeAmount Button Control to open a Number Pad in MainPage.XAML

2) Define the Amount Property as Binding Property for Amount TextBlock and Command for ChangeAmount button in MainViewModel.cs and Bind them as below

public RelayCommand ChangeAmountCommand { get; set; }

        public ChangeAmountViewModel ChangeAmountViewModel
        {
            get
            {
                return this.changeAmountViewModel;
            }

            set
            {
                this.changeAmountViewModel = value;
                this.RaisePropertyChanged(() => this.ChangeAmountViewModel);
            }
        }

  <TextBlock Text="{Binding Amount}" Margin="5" Width="100"></TextBlock>
                <Button Content="Change Amount" Margin="5" Height="77" VerticalAlignment="Top" Command="{Binding  ChangeAmountCommand}"></Button>

3) Add a UserControl.XAML to project and add the TextBlock to display the Amount  and Buttons for Key pad

<!--Textbox to Enter new amount {Binding Amount}-->
            <Border Background="White"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Margin="0,15,15,10"
                    Grid.Row="2">
                <TextBlock  Style="{StaticResource StyleChangeAmountText}"
                            VerticalAlignment="Center">
                    <Run FontFamily="Segoe UI Symbol"
                         Text="$" /><Run Text="{Binding Payment,Mode=TwoWay}" />
                </TextBlock>
            </Border>

<Button Grid.Row="0"
                        Grid.Column="0"
                        Content="1"
                        x:Name="NumberOne"
                        x:Uid="NumberOne"
                        Command="{Binding NumericKeyPressCommand}"
                        CommandParameter="1"
                        >
                </Button>
                <Button Grid.Row="0"
                        Grid.Column="1"
                        Content="2"
                        x:Uid="NumberTwo"
                        Command="{Binding NumericKeyPressCommand}"
                        CommandParameter="2"
                        >
                </Button>
                <Button Grid.Row="0"
                        Grid.Column="2"
                        Content="3"
                        x:Uid="NumberThree"
                        x:Name="NumberThree"
                        Command="{Binding NumericKeyPressCommand}"
                        CommandParameter="3"
                        >
                </Button>

                <Button Grid.Row="1"
                        Grid.Column="0"
                        Content="4"
                        x:Uid="NumberFour"
                        x:Name="NumberFour"
                        Command="{Binding NumericKeyPressCommand}"
                        CommandParameter="4"
                       >
                </Button>
                <Button Grid.Row="1"
                        Grid.Column="1"
                        Content="5"
                        x:Uid="NumberFive"
                        x:Name="NumberFive"
                        Command="{Binding NumericKeyPressCommand}"
                        CommandParameter="5"
                        >
                </Button>
                <Button Grid.Row="1"
                        Grid.Column="2"
                        Content="6"
                        x:Uid="NumberSix"
                        x:Name="NumberSix"
                        Command="{Binding NumericKeyPressCommand}"
                        CommandParameter="6"
                       >
                </Button>

                <Button Grid.Row="2"
                        Grid.Column="0"
                        Content="7"
                        x:Uid="NumberSeven"
                        x:Name="NumberSeven"
                        Command="{Binding NumericKeyPressCommand}"
                        CommandParameter="7"
                        >
                </Button>
                <Button Grid.Row="2"
                        Grid.Column="1"
                        Content="8"
                        x:Uid="NumberEight"
                        x:Name="NumberEight"
                        Command="{Binding NumericKeyPressCommand}"
                        CommandParameter="8"
                        >
                </Button>
                <Button Grid.Row="2"
                        Grid.Column="2"
                        Content="9"
                        x:Uid="NumberNine"
                        x:Name="NumberNine"
                        Command="{Binding NumericKeyPressCommand}"
                        CommandParameter="9"
                        >
                </Button>

                <Button Grid.Row="3"
                        Grid.Column="0"
                        Content="Clear"
                        x:Uid="ClearKey"
                        x:Name="ClearKey"
                        Command="{Binding ClearCommand}"
                        
                        >
                </Button>
                <Button Grid.Row="3"
                        Grid.Column="1"
                        Content="0"
                        x:Uid="NumberZero"
                        x:Name="NumberZero"
                        Command="{Binding NumericKeyPressCommand}"
                        CommandParameter="0"
                        >
                </Button>
                <Button Grid.Row="3"
                        Grid.Column="2"
                      
                        Command="{Binding DeleteCommand}"
                       >
                    <TextBlock FontFamily="Segoe UI Symbol"
                               Text="⌫" />
                </Button>

            </Grid>

            <Button Content="Cancel"
                    Grid.Row="4"
                    x:Name="CancelButton"
                    VerticalAlignment="Bottom"
                    Command="{Binding CancelCommand}"
                   />

            <Button Content="OK"
                    x:Name="OKButton"
                    Grid.Row="4"
                    VerticalAlignment="Bottom"
                    HorizontalAlignment="Right"
                    Command="{Binding OkCommand}"
                     />

4) Add UserControlViewModel.cs with required Properties and commands

     public RelayCommand<string> NumericKeyPressCommand { get; set; }
      public RelayCommand CancelCommand { get; set; }
      public RelayCommand ClearCommand { get; set; }

       public RelayCommand DeleteCommand { get; set; }
        public RelayCommand OkCommand { get; set; }

        public string Payment
        {
            get
            {
                return this.payment;
            }

            set
            {
                this.payment = value;
                this.RaisePropertyChanged(() => this.Payment);
            }
        }

5) When Number Key is Pressed, add the below logic in respective command Action method which is common for all Number Keys

public void ExecuteNumericKeyPressCommand(string digitPressed)
        {
            double calculatedAmount;
            if (double.TryParse(digitPressed, out this.amount) && double.TryParse(this.Payment, out calculatedAmount)
                && calculatedAmount < 100000)
            {
                this.Payment = ((calculatedAmount * 10) + (0.01 * this.amount)).ToString(
                    "N2",
                    CultureInfo.InvariantCulture);
            }
        }

6) When Clear Key is pressed, add the below logic in Clear Command Action method

  public void ExecuteClearCommand()
        {
            this.Payment = default(float).ToString("N2", CultureInfo.InvariantCulture);
        }

7) When Delete Key is pressed, add the below logic in Delete Command Action method

public void ExecuteDeleteCommand()
        {
            if (double.TryParse(this.Payment, out this.amount))
            {
                this.Payment = (Math.Truncate((this.amount / 10) * 100) / 100).ToString(
                    "N2",
                    CultureInfo.InvariantCulture);
            }
        }

8) Add Popup control and register  with UserControl.Xaml  in MainPage.Xaml

<Popup x:Name="Popup" IsOpen="{Binding IsPopUpOpen}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                <views:ChangeAmountUserControl x:Name="AmountUserControl"  Width="{Binding ElementName=ContentPanel,Path=ActualWidth}" Height="{Binding ElementName=ContentPanel,Path=ActualHeight}"> </views:ChangeAmountUserControl>
            </Popup>
9) Add below logic in MainPage.Xaml.cs to close the Number Pad and set the user entered amount in Main Page when Cancel/Ok keys are clicked on Number pad

public MainPage()
        {
            InitializeComponent();

            viewModel = this.DataContext as MainViewModel;
            changeAmountViewModel = this.AmountUserControl.DataContext as ChangeAmountViewModel;
            if (changeAmountViewModel != null)
            {
                changeAmountViewModel.CancelCommand = new RelayCommand(this.OnCancel);
                changeAmountViewModel.OkCommand = new RelayCommand(this.ClosePopup);
             }
         
        }

        private void OnCancel()
        {
            if (viewModel != null)
            {
                viewModel.IsPopUpOpen = false;
            }
        }

        private void ClosePopup()
        {

            if (viewModel != null)
            {
                viewModel.Amount = Convert.ToDouble(changeAmountViewModel.Payment);
                viewModel.IsPopUpOpen = false;
            }
        }
In real time scenario, we are not supposed to write the logic in any xaml.cs files, so we need to use the EventAggregator mechanism to pass data back to the Parent Page from Popup.

Please refer the below URL to to know about the EventAggregator .
http://code.msdn.microsoft.com/Event-Aggregation-Code-44302c57

That’s it . we are done. Press F5 to run the app.

System Specifications: You should have Windows 8 with VS 2013 installed in your machine to run this app

Please download the app from below link
http://nullskull.com/FileUpload/-407123783_NumberPadWP8.zip

By Siva Jagan Dhulipalla   Popularity  (4118 Views)