4

我做了文本框验证。

但我想在各个阶段的文本框上制作一些样式。

当我的页面第一次加载时,文本框看起来像以下样式。 在此处输入图像描述

当用户开始输入值并且如果值错误,整个文本框背景将是红色的。 在此处输入图像描述

当用户输入正确的值时,文本框有 2PX 的绿色边框。
在此处输入图像描述

我正在使用以下样式:

  <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 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>
4

1 回答 1

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!
}

您应该为您的案例创建两个故事板,并在文本更改处理程序中,说明什么条件,并有选择地播放故事板。

于 2013-03-23T16:01:51.400 回答