WPF: VisualStateManager not working

Question

Hi,

I'm trying to figure out how the VisualStateManager works but I cannot do it.

I want to do this: I have some TextBoxes where the user can enter his name, adress, ... and I'm doing a validation and I didn't want to do that with a validationrules-binding in XAML. I'm using MVVM-pattern and some code of my viewmodel does it. So I'm binding the text of the textbox to a string that the viewmodel validated for me and I have a boolean variable there that tell if it's correct or not.

My XAML:

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Custom="http://schemas.microsoft.com/surface/2008"
mc:Ignorable="d"
x:Class="Surface_Bachelorarbeit.NeuerUser"
x:Name="UserControl"
UseLayoutRounding="True"
d:DesignWidth="640" d:DesignHeight="480" Width="800" Height="350">
<Border x:Name="Border1" BorderBrush="Black" BorderThickness="5" CornerRadius="5" DataContext="{Binding Source={StaticResource MainViewModelDataSource}}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisibilityStates">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0" To="NameValid">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="VN_valid">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="VN_invalid">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualTransition>
                <VisualTransition GeneratedDuration="0" To="NameInvalid">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="VN_invalid">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="VN_valid">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="NameValid"/>
            <VisualState x:Name="NameInvalid"/>


        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
...
        <Custom:SurfaceTextBox x:Name="vname" TextWrapping="Wrap" Grid.Column="1" Grid.Row="1" Margin="0,1,22,8" FontSize="14.667" SelectionBrush="{x:Null}" BorderBrush="{x:Null}" Foreground="Black" DataContext="{Binding Forename}" Text="{Binding Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" LostFocus="vname_LostFocus"/>
...
                <Image x:Name="VN_valid" HorizontalAlignment="Left" Margin="0,1,0,0" Width="22" Source="valid.png" Height="22" VerticalAlignment="Top" d:LayoutOverrides="Height"/>
            <Image x:Name="VN_invalid" HorizontalAlignment="Left" Margin="0,1,0,0" Width="22" Height="22" Source="invalid.png" VerticalAlignment="Top" d:LayoutOverrides="Height"/>
 ...

When the user's focus leaves the textbox, this event shall happen:

    private void vname_LostFocus(object sender, System.Windows.RoutedEventArgs e)
    {
        mvm = ((MainViewModel)FindResource("MainViewModelDataSource"));
        if (mvm.NewCreatedStoreUser.Forename.Valid)
        {
            VisualStateManager.GoToState(this, "NameValid", true);

        }
        else 
        {
            VisualStateManager.GoToState(this, "NameInvalid", true);

        }

     }

I tried it and the state is not changed, although the event happens and it goes to the right GoToState-Method. Nothing happens.

I also tried
ExtendedVisualStateManager.GoToElementState(this.Border1 as FrameworkElement, "NameValid", false);

because I read here that it would help but it's just the same with that...

What did I do wrong??

Answer 1

I think VisualStateManager UserControl does not work with, I do not know why. I used Control.