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
https://www.nullskull.com/FileUpload/-407123783_NumberPadWP8.zip
By Siva Jagan Dhulipalla Popularity (4269 Views)