VisualStateManager in RadWindow

4 posts, 1 answers
  1. bohebolo
    bohebolo avatar
    31 posts
    Member since:
    Aug 2010

    Posted 05 Aug 2011 Link to this post

    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>
  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 09 Aug 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
  3. DevCraft banner
  4. bohebolo
    bohebolo avatar
    31 posts
    Member since:
    Aug 2010

    Posted 10 Aug 2011 Link to this post

    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
  5. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 10 Aug 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

Back to Top