Question

我正在尝试在WinRT XAML中创建自定义文本框。我希望文本框在输入数据出错时突出显示红色。

首先，我修改了TextBox Temple，并添加了一个新的VisualStateGroup（CustomStates - 带有HasError状态），我还更改了Focused组：

<Style TargetType="TextBox">
....
<VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="Focused">
        <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
                <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Background">
                <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimation Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Opacity" Duration="0" To="0.2" />
         </Storyboard>
     </VisualState>
 </VisualStateGroup>
    <VisualStateGroup x:Name="CustomStates">
         <VisualState x:Name="HasError">
             <Storyboard>
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                 </ObjectAnimationUsingKeyFrames>
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                 </ObjectAnimationUsingKeyFrames>
                 <ObjectAnimationUsingKeyFrames  Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Background">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                 </ObjectAnimationUsingKeyFrames>
                 <DoubleAnimation Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Opacity" Duration="0" To="0.2" />
             </Storyboard>
        </VisualState>
   </VisualStateGroup>
</Style>

所以现在我在C＃代码中创建了一个自定义的TextBox类。

我添加了一个Dependency属性调用HasError，它只是一个保持错误状态的bool。当此值更改时，将调用GoToState方法，该方法将状态设置为我的HasError状态。

我添加了一个委托和事件，我用它来验证是否发生了错误。

最后，我重写了OnLostFocus和OnGotFocus方法。 OnLostFocus调用我的委托和OnGotFocus重置错误状态

public class MyTextBox : TextBox
{
    public delegate void ValidateTextHandler(object sender, RoutedEventArgs e);

    public event ValidateTextHandler ValidateText = delegate { };

    public bool HasError
    {
        get { return (bool)GetValue(HasErrorProperty); }
        set { SetValue(HasErrorProperty, value); }
    }

    public static readonly DependencyProperty HasErrorProperty = DependencyProperty.Register("HasError", typeof(bool), typeof(MyTextBox), new  PropertyMetadata(false, HasErrorChangedCallback));

    private static void HasErrorChangedCallback(DependencyObject sender,  DependencyPropertyChangedEventArgs e)
    {
        MyTextBox textBox = sender as MyTextBox;

        textBox.GoToState(true);
    }

    void GoToState(bool useTransitions)
    {
        if (HasError)
        {                
            VisualStateManager.GoToState(this, "HasError", useTransitions);                
        }
    }

    protected override void OnGotFocus(RoutedEventArgs e)
    {
        HasError = false;
        base.OnGotFocus(e);
    }

    protected override void OnLostFocus(RoutedEventArgs e)
    {
        ValidateText(this, e);
        base.OnLostFocus(e);
    }
}

所以，这是我的文本框。

现在，在应用程序中，我向表单添加了一个文本框实例并订阅了ValidateText事件，在那个事件中只是为了测试我将HasError属性设置为true。

<MyTextBox x:Name="textTest" ValidateText="textTest_ValidateText" />

private void textTest_ValidateText(object sender, RoutedEventArgs e)
{
    textTest.HasError = true;
}

所以，现在当我运行它并且文本框中的焦点丢失时，它会突出显示为红色，这正是我想要的。但是，如果我再次选择相同的文本框并再次移开焦点，则不会应用HasError状态，textBox只会显示在其默认视图中。 HasError代码正在运行，所以我无法理解为什么红色错误颜色没有显示！??！？！

无论如何，任何人都可以帮忙吗？我希望这一切都有道理。

这是使用WinRT XAML和C＃的Windows 8应用程序。

Answer 1

您不应使用来自不同组的两个状态来为同一属性设置动画。在这种情况下，这不起作用，因为您已经第二次处于HasError状态（您永远不会离开该状态）。

解决方案是在名为“NoError”的“CustomStates”组中添加一个额外的状态。

添加视觉元素（例如只有您的州将设置动画的附加矩形或边框）。然后你必须从OnGoFocus覆盖中触发NoError状态。

自定义VisualState未在WinRT XAML中设置

1 个答案: