[Solved] VisualStateManager in RadWindow

[bohebolo]

I'm using RadWindow as UserControl, and I can't get VisualStateManager to work.
No exception raised, but all the animations never executed.

<telerik:RadWindow x:Class="BestPro.Presentation.Views.ChangePasswordView"
                   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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
                   xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                   xmlns:prism="http://www.codeplex.com/prism"
                   xmlns:captions="clr-namespace:BestPro.Presentation.Resources.Captions"
                   ModalBackground="#64000000"
                   ResizeMode="NoResize"
                   WindowStartupLocation="CenterScreen"
                   mc:Ignorable="d"
                   d:DesignHeight="300" d:DesignWidth="400">

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="StatusStates">
            <VisualState x:Name="Normal" />
            <VisualState x:Name="Changing">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="lblStatus" Storyboard.TargetProperty="Text">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding labelStatusChanging, Source={StaticResource captions}}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="txtOldPassword" Storyboard.TargetProperty="IsEnabled">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="txtNewPassword" Storyboard.TargetProperty="IsEnabled">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="txtConfirmPassword" Storyboard.TargetProperty="IsEnabled">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="btnChange" Storyboard.TargetProperty="IsEnabled">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Error">
                <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="lblStatus"
                                                      Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
                        <SplineColorKeyFrame KeyTime="00:00:00" Value="Red"/>
                    </ColorAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="lblStatus" Storyboard.TargetProperty="Text">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding error, Source={StaticResource captions}}" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Success">
                <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="lblStatus"
                                                      Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
                        <SplineColorKeyFrame KeyTime="00:00:00" Value="Blue"/>
                    </ColorAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="lblStatus" Storyboard.TargetProperty="Text">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding labelStatusPasswordChanged, Source={StaticResource captions}}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="txtOldPassword" Storyboard.TargetProperty="IsEnabled">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="txtNewPassword" Storyboard.TargetProperty="IsEnabled">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="txtConfirmPassword" Storyboard.TargetProperty="IsEnabled">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="btnChange" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="btnClose" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <telerik:RadWindow.Resources>
        <captions:ChangePasswordCaption x:Key="captions" />
    </telerik:RadWindow.Resources>

    <telerik:RadWindow.Icon>
        <Image Stretch="None" Source="/BestPro.Presentation;component/Resources/Images/changepasswordicon.png" />
    </telerik:RadWindow.Icon>

    <telerik:RadWindow.Header>
        <TextBlock Text="{Binding windowHeaderChangePassword, Source={StaticResource captions}}" />
    </telerik:RadWindow.Header>

    <Grid>
        <Grid Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Image Grid.Column="0" Grid.Row="0" Margin="-10,0,0,0"
               HorizontalAlignment="Center" VerticalAlignment="Top" Stretch="None"
               Source="/BestPro.Presentation;component/Resources/Images/keys.png" />

            <Grid Grid.Column="1" Grid.Row="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <!-- Old Password -->
                <sdk:Label Grid.Row="0" Margin="0,0,0,-1" HorizontalAlignment="Left" VerticalAlignment="Bottom" Target="{Binding ElementName=txtOldPassword}" />
                <StackPanel Grid.Row="1" Margin="0" Orientation="Horizontal">
                    <PasswordBox x:Name="txtOldPassword" Width="150" MaxLength="25" HorizontalAlignment="Left" VerticalAlignment="Center"
                                 Password="{Binding Passwords.OldPassword, Mode=TwoWay, ValidatesOnExceptions=True,
                        ValidatesOnNotifyDataErrors=True, NotifyOnValidationError=True />
                    <sdk:DescriptionViewer Margin="2,0,0,0" VerticalAlignment="Top" Target="{Binding ElementName=txtOldPassword}" />
                </StackPanel>

                <!-- New Password -->
                <sdk:Label Grid.Row="2" Margin="0,7,0,-1" HorizontalAlignment="Left" VerticalAlignment="Bottom" Target="{Binding ElementName=txtNewPassword}" />
                <StackPanel Grid.Row="3" Margin="0" Orientation="Horizontal">
                    <PasswordBox x:Name="txtNewPassword" Width="150" MaxLength="25" HorizontalAlignment="Left" VerticalAlignment="Center"
                                 Password="{Binding Passwords.NewPassword, Mode=TwoWay, ValidatesOnExceptions=True,
                        ValidatesOnNotifyDataErrors=True, NotifyOnValidationError=True />
                    <sdk:DescriptionViewer Margin="2,0,0,0" VerticalAlignment="Top" Target="{Binding ElementName=txtNewPassword}" />
                </StackPanel>

                <!-- Confirm Password -->
                <sdk:Label Grid.Row="4" Margin="0,7,0,-1" HorizontalAlignment="Left" VerticalAlignment="Bottom" Target="{Binding ElementName=txtConfirmPassword}" />
                <StackPanel Grid.Row="5" Margin="0" Orientation="Horizontal">
                    <PasswordBox x:Name="txtConfirmPassword" Width="150" MaxLength="25" HorizontalAlignment="Left" VerticalAlignment="Center"
                                 Password="{Binding Passwords.ConfirmPassword, Mode=TwoWay, ValidatesOnExceptions=True,
                        ValidatesOnNotifyDataErrors=True, NotifyOnValidationError=True />
                    <sdk:DescriptionViewer Margin="2,0,0,0" VerticalAlignment="Top" Target="{Binding ElementName=txtConfirmPassword}" />
                </StackPanel>

                <telerik:RadButton x:Name="btnChange" Grid.Row="6" Margin="0,10,0,0" HorizontalAlignment="Left" Width="75"
                                   Content="{Binding buttonChange, Source={StaticResource captions}}"
                                   prism:Click.Command="{Binding ChangeCommand}"
                                   prism:Click.CommandParameter="{Binding Passwords}" />

                <telerik:RadButton x:Name="btnClose" Grid.Row="6" Margin="0,10,0,0" HorizontalAlignment="Left" Width="75"
                               Visibility="Collapsed"
                               Command="telerik:WindowCommands.Close"
                               Content="{Binding buttonClose, Source={StaticResource captions}}" />
            </Grid>

            <TextBlock x:Name="lblStatus" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="1" Margin="0,10,0,0"
                       HorizontalAlignment="Left" VerticalAlignment="Center"
                       FontFamily="Verdana" FontSize="11" FontWeight="Bold" />
        </Grid>
    </Grid>
</telerik:RadWindow>

[Dani]

Hello Bohe,

RadWindow does not have visual states such as Changing, Success, etc. I believe you must have your own logic to create AnimateStates and manage the visual states. Please, share the approach you are using to manage the swaping of visual states.


Greetings,
Dani
the Telerik team

[bohebolo]

Hi Dani,

To reproduce the issue, please find the sample project here.
However if I wrap the content of MyWindow into a UserControl, the visual states manager will work fine.

Thanks

[Yana]

Hi Bohe,

Thank you for providing the project.

RadWindow is a ContentControl, that's why it's expected that VisualStateManager will not work correctly.  You should either place the VisualStateManager in the ControlTemplate of RadWindow ( we do not recommend this approach) or wrap the content of the window in a user control (as you've already tried).

Best wishes,
Yana
the Telerik team