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

ケース用に 2 つのストーリー ボードを作成し、テキスト変更ハンドラーで条件を指定し、ストーリー ボードを選択的に再生する必要があります。

于 2013-03-23T16:01:51.400 に答える