Create a VisualState if validation failed (UWP)

Question

I have Textbox inside a Usercontrol, I want to create a visualstate, if validation for a TextBox failed. My code looks like this

<Grid>
    <TextBox Style="{StaticResource ExtendeTextBoxStyle}" PlaceholderText="I'am Active"   HasError="{Binding IsInvalid, UpdateSourceTrigger=PropertyChanged}"  Height="80" Width="300"  x:Name="txtActive"  Text="{Binding TextValue, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" ></TextBox>
</Grid>

Code Behind

  public EditTextControl()
    {
        this.InitializeComponent();
        this.DataContext = TV;
    }

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

    /// <summary>
    /// This is a dependency property that will indicate if there's an error. 
    /// This DP can be bound to a property of the VM.
    /// </summary>
    public static readonly DependencyProperty HasErrorProperty =
        DependencyProperty.Register("HasError", typeof(bool), typeof(EditTextControl), new PropertyMetadata(false, HasErrorUpdated));


    // This method will update the Validation visual state which will be defined later in the Style
    private static void HasErrorUpdated(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        EditTextControl textBox = d as EditTextControl;

        if (textBox != null)
        {
            if (textBox.HasError)
                VisualStateManager.GoToState(textBox, "InvalidState", false);
            else
                VisualStateManager.GoToState(textBox, "ValidState", false);
        }
    }

But this gives me a compile-time error

Unknown member 'HasError' on element 'TextBox'  

What I am doing here, and how I can make sure that when validation for the textbox fails, my new VisualState get activated

Answer 1

TextBox has no HasError property, so we can't set it directly, we need make HasError attach property and detect TextBox TextChanged event, then check the text is valid or not.

For your requirement, we suggest use TextBoxRegex to approach. And use XamlBehaviors to invoke VisualState command.

For Example.

<StackPanel>
    <TextBox
        Name="PhoneNumberValidator"
        extensions:TextBoxRegex.Regex="^\s*\+?\s*([0-9][\s-]*){9,}$"
        Background="Red"
        Header="Text box with Regex extension for phone number, validation occurs on TextChanged"
        >
        <Interactivity:Interaction.Behaviors>
            <Interactions:DataTriggerBehavior Binding="{Binding (extensions:TextBoxRegex.IsValid), ElementName=PhoneNumberValidator}" Value="True">
                <Interactions:GoToStateAction StateName="BlueState" />
            </Interactions:DataTriggerBehavior>
            <Interactions:DataTriggerBehavior Binding="{Binding (extensions:TextBoxRegex.IsValid), ElementName=PhoneNumberValidator}" Value="False">
                <Interactions:GoToStateAction StateName="RedState" />
            </Interactions:DataTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </TextBox>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="AdaptiveVisualStateGroup">
            <VisualState x:Name="BlueState">

                <VisualState.Setters>
                    <Setter Target="PhoneNumberValidator.Background" Value="Blue" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="RedState">

                <VisualState.Setters>
                    <Setter Target="PhoneNumberValidator.Background" Value="Red" />
                </VisualState.Setters>
            </VisualState>

        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</StackPanel>