WPF編遊戲系列 之八 銀行界面及金額校驗

原文: WPF編遊戲系列 之八 銀行界面及金額校驗        在前面 《WPF編遊戲系列 之四 使用者控件》

一文中通過使用者控件建立了“My Shop”中物品清單框。本篇繼續使用使用者控件建立銀行界面，并在使用者進行存錢操作時對其輸入金額的有效性進行校驗。

1. 在建立好控件BankElement.xaml後，将XAML代碼填入其中：

<Grid>
  <Border BorderThickness="3" CornerRadius="5"    
          Background="#CEE4E5" BorderBrush="#0C7D42">
    <StackPanel Orientation="Vertical" Margin="5"
HorizontalAlignment="Center">
        <Image Height="80" Width="80" Margin="5" 
Source="{Binding BankImage}"></Image>
        <TextBlock Name="bankCash" Margin="5" 
Text="{Binding BankCash}"></TextBlock>
        <TextBlock Name="bankInterest" Margin="5" 
Text="{Binding BankInterest}"></TextBlock>
        <TextBlock Name="transferInfo" Margin="5"></TextBlock>
        <StackPanel Orientation="Horizontal">
           <TextBox Name="cashTransfer" Margin="5" Width="100"></TextBox>
           <Image Name="transImage" Source="image/trans.png" 
                  Cursor="Hand" Width="20" Height="20"></Image>
        </StackPanel>
    </StackPanel>
  </Border>
</Grid>      

樣式及效果圖如下：

2. 當使用者在TextBox中輸入金額後，首先需要對該資料進行兩方面校驗：a. 錄入金額是否為數字，b. 錄入金額是否超出目前總金額，之後再對相應結果進行處理。

private void saveCashImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
   Image transferImage = sender as Image;
   //查找輸入金額的TextBox
   object findCashTextBox = queryGrid.FindName("saveCash");
   TextBox saveCashInput = findCashTextBox as TextBox;
   //查找回報結果的TextBlock
   object findCashTextBlock = queryGrid.FindName("saveCashInfo");
   TextBlock saveCashInfo = findCashTextBlock as TextBlock;
   //目前總金額（$750）            
   int remainAmount = Convert.ToInt32(transferImage.Tag.ToString());
//存入金額
   int transAmount;
//判斷saveCashInput是否為數字，否則transAmout為0
   int.TryParse(saveCashInput.Text, out transAmount);
   //如果transAmout為0，則說明輸入的資料有誤，當然也包括本身輸入的就是0
   if (transAmount == 0)
   {
      saveCashInfo.Text = "Not vaild number";
   }
   else
   {
      
if (transAmount > remainAmount)
     {
        saveCashInfo.Text = "No enough cash";
     }
     else 
     { 
        //可以将Money存入銀行了
      }
   }
}      

3. 錯誤提示效果圖：

待續 … …