What I am having trouble figuring out:
– How to capture 4 button clicks and check if they match the correct sequence similar to entering a 4 digit ATM debit card PIN number
I have a WPF Application and added a new Window that has a PIN pad, numbers 0-9, a question mark button (used as a help button), a backspace button (in case you clicked the wrong number), a TextBox at the top which displays a dot instead of the number (Wingdings – letter ‘l’), and a hidden TextBlock which would show an Incorrect PIN message if the numbers were not entered in the correct order. For the time being, I am just going to hard code the 4 digit PIN (7410 for example) since my main goal is learning how to capture and validate the button click sequence. Since I will not be using an Enter key button, I want to continue to the next page as soon as the last number is clicked and the sequence was correct, else display the notification message that the PIN is incorrect. I will also put code in to not allow anything except mouse clicks work and limit the TextBox to only allow a max of 4 digits.
I’m guessing I need a method that is called on each button click which keeps track of the sequence and loops back through each time until all 4 numbers are clicked in the correct sequence then moves on to the next page. Sorry if I’m not explaining well, still learning, so if you need more details I’ll do my best to give more.
Thank you in advance.
Below is the xaml code for the PIN pad.
<Border BorderThickness="1" BorderBrush="Black">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Background="Black" Height="50" Grid.ColumnSpan="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TextBlock x:Name="PINTextBlock" Foreground="White" FontSize="18" FontFamily="Wingdings" VerticalAlignment="Center" HorizontalAlignment="Center" MaxWidth="4" />
</Border>
<TextBlock x:Name="ErrorMessageTextBlock" Foreground="Red" Visibility="Collapsed" Grid.ColumnSpan="3" Grid.Row="1" />
<StackPanel Orientation="Horizontal" Grid.Row="2">
<Button x:Name="SevenButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="SevenButton_Click" TabIndex="9">
<TextBlock Text="7" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="EightButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="EightButton_Click" TabIndex="10">
<TextBlock Text="8" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="NineButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="NineButton_Click" TabIndex="11">
<TextBlock Text="9" FontSize="24" FontWeight="Bold" />
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="3">
<Button x:Name="FourButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="FourButton_Click" TabIndex="6">
<TextBlock Text="4" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="FiveButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="FiveButton_Click" TabIndex="7">
<TextBlock Text="5" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="SixButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="SixButton_Click" TabIndex="8">
<TextBlock Text="6" FontSize="24" FontWeight="Bold" />
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="4">
<Button x:Name="OneButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="OneButton_Click" TabIndex="3">
<TextBlock Text="1" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="TwoButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="TwoButton_Click" TabIndex="4">
<TextBlock Text="2" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="ThreeButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="ThreeButton_Click" TabIndex="5">
<TextBlock Text="3" FontSize="24" FontWeight="Bold" />
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="5">
<Button x:Name="QuestionMarkButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="QuestionMarkButton_Click" TabIndex="0">
<TextBlock Text="?" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="ZeroButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="ZeroButton_Click" TabIndex="1">
<TextBlock Text="0" FontSize="24" FontWeight="Bold" />
</Button>
<Button x:Name="BackspaceButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Click="BackspaceButton_Click" TabIndex="2">
<TextBlock Text="Õ" FontFamily="Wingdings" FontSize="24" FontWeight="Bold" />
</Button>
</StackPanel>
</Grid>
</Border>
You can do the validation using Xaml and converters. All you have to do is;
This way the validation logic will be seperated nicely and will be reusable. There are other WPF inbuilt validation ways and you can google about them. (IDataErrorInfo and ValidationRules). This would be the “WPF” way.
But the learning curve is little steep. If you just wanna finish this thing, then yes, add this to StackPanel: Button.Click=”buttonClickHandler”, and in code-behind you will be recieve every button you click in single place. And do your calculations there.