2013-03-18 61 views
4

我做了文本框驗證。WPF文本框驗證客戶端

但我想在各個階段的文本框上做一些風格。

當我的頁面第一次加載文本框看起來像下面的樣式。 enter image description here

當用戶開始輸入值時,如果值錯誤,整個文本框背景將爲紅色。 enter image description here

當用戶輸入正確的值時,文本框的綠色邊框與2PX。
enter image description here

我使用以下樣式:

<Style x:Key="TxtEmailStyle" TargetType="{x:Type TextBox}"> 
     <Setter Property="Background" Value="#2d2f34"></Setter> 
     <Setter Property="Foreground" Value="White"></Setter> 
     <Setter Property="TextBlock.FontSize" Value="14" /> 
     <Setter Property="Padding" Value="5" /> 
     <Setter Property="BorderBrush" Value="Green"></Setter> 
     <Setter Property="BorderThickness" Value="2"></Setter> 
     <Setter Property="Validation.ErrorTemplate"> 
      <Setter.Value> 
       <ControlTemplate> 
        <DockPanel LastChildFill="True"> 
         <TextBlock DockPanel.Dock="Right" 
         Foreground="Orange" 
         FontSize="12pt"> 
         !!!! 
         </TextBlock> 
         <Border BorderBrush="Green" BorderThickness="1"> 
          <AdornedElementPlaceholder /> 
         </Border> 
        </DockPanel> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <Trigger Property="IsFocused" Value="true"> 
       <Setter Property="Background" Value="#56585e" /> 
      </Trigger> 
      <Trigger Property="IsMouseOver" Value="true"> 
       <Setter Property="Background" Value="#07839a" /> 
      </Trigger> 
      <Trigger Property="Validation.HasError" Value="true"> 
       <Setter Property="ToolTip" 
     Value="{Binding RelativeSource={x:Static RelativeSource.Self}, 
         Path=(Validation.Errors)[0].ErrorContent}"/> 
       <Setter Property="Background" Value="#cb0b38"></Setter> 
      </Trigger> 
      <!--<Trigger Property="Validation.HasError" Value="false"> 
       <Setter Property="BorderBrush" Value="Green"></Setter> 
       <Setter Property="BorderThickness" Value="2"></Setter> 
       <Setter Property="Background" Value="#2d2f34"></Setter> 
      </Trigger>--> 

     </Style.Triggers> 
    </Style> 

以下是我的TextBox

<TextBox x:Name="txtPlayerID" HorizontalAlignment="Left" Height="30" TextWrapping="Wrap" 
            VerticalContentAlignment="Center" 
        Style="{StaticResource TxtEmailStyle}" VerticalAlignment="Top" Width="228" FontFamily="Arial Regular" 
        RenderTransformOrigin="0.408,-2.455" FontSize="14" 
            Margin="27,0,0,0"> 

           <TextBox.Text> 

            <Binding Path="playerID" Source="{StaticResource Register}" 
          ValidatesOnDataErrors="True"  NotifyOnValidationError="True" 
         UpdateSourceTrigger="PropertyChanged"> 
             <Binding.ValidationRules> 

              <ExceptionValidationRule/> 
             </Binding.ValidationRules> 
            </Binding> 
           </TextBox.Text> 
          </TextBox> 
+2

你做了什麼或者你想要做什麼? – Shrivallabh 2013-03-18 04:54:04

+0

@ Shrivallabh:我想在用戶輸入的基礎上更改文本框邊框樣式: - 如果正確輸入使其爲綠色,如果輸入錯誤背景紅色,並且如果沒有輸入,則默認文本框樣式 – ujjaval 2013-03-18 04:58:32

+0

您可以顯示「依賴屬性」有'playerID'? – 2013-03-18 11:19:48

回答

0

一個棘手/醜的方法是使用一個故事板(可能會非常棘手,因爲你不想動畫,但是你可以將動畫時間改爲無限)下面是代碼片段:

<Storyboard x:Key="ChangeBkColor" Storyboard.TargetProperty="(TextBox.Background)"> 
    <ColorAnimation Storyboard.TargetProperty="Background.Color" 
      From="Red" To="Red" Duration="0:0:10"/> <!--Change 10 secs to yours--> 
</Storyboard> 

而某處,例如在文本改變事件處理程序

Storyboard sb = this.FindResource("ChangeBkColor") as Storyboard; 
if (sb != null && SomeCondition1) <!--SomeCondition1: for red background--> 
{ 
    Storyboard.SetTarget(sb, this.txtPlayerID); 
    sb.Begin(); // Here comes the effect! 
} 

你應該創建兩個故事板爲您的情況,並在文本改變處理程序,告訴什麼樣的條件,並有選擇地播放故事板。