I have a usercontrol with two state like the one below
Is it possible to use the TransitionControl instead of the custom storyboard ?
How ?
Thanks !
Andrea
<
UserControl
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
x:Class
=
"HumanResources.HumanResourcesView"
xmlns:behaviors
=
"clr-namespace:ATHENA.Framework.Behaviors;assembly=ATHENA.Framework"
xmlns:epb
=
"clr-namespace:EvalPasswordBox;assembly=EvalPasswordBox"
xmlns:vm
=
"clr-namespace:HumanResources"
mc:Ignorable
=
"d"
d:DesignWidth
=
"640"
d:DesignHeight
=
"480"
>
<
UserControl.Resources
>
<
ResourceDictionary
>
<
ResourceDictionary.MergedDictionaries
>
<
ResourceDictionary
Source
=
"/ATHENA.Framework;component/Images.xaml"
/>
</
ResourceDictionary.MergedDictionaries
>
</
ResourceDictionary
>
</
UserControl.Resources
>
<
UserControl.DataContext
>
<
vm:HumanResourcesViewModel
/>
</
UserControl.DataContext
>
<
Grid
x:Name
=
"layoutRoot"
>
<
i:Interaction.Behaviors
>
<
ei:DataStateBehavior
Binding
=
"{Binding ShowDetails}"
Value
=
"True"
TrueState
=
"showDetails"
FalseState
=
"showData"
/>
</
i:Interaction.Behaviors
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
>
<
VisualStateGroup.Transitions
>
<
VisualTransition
From
=
"showData"
To
=
"showDetails"
>
<
Storyboard
SpeedRatio
=
"2"
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(UIElement.Projection).(PlaneProjection.RotationY)"
Storyboard.TargetName
=
"containerPane"
>
<
EasingDoubleKeyFrame
KeyTime
=
"0:0:0"
Value
=
"360"
/>
<
EasingDoubleKeyFrame
KeyTime
=
"0:0:0.5"
Value
=
"270"
/>
<
EasingDoubleKeyFrame
KeyTime
=
"0:0:0.5"
Value
=
"90"
/>
<
EasingDoubleKeyFrame
KeyTime
=
"0:0:1"
Value
=
"0"
/>
</
DoubleAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(FrameworkElement.Visibility)"
Storyboard.TargetName
=
"dataView"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0.5"
Value
=
"Collapsed"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(FrameworkElement.Visibility)"
Storyboard.TargetName
=
"detailsView"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0.5"
Value
=
"Visible"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualTransition
>
<
VisualTransition
From
=
"showDetails"
To
=
"showData"
>
<
Storyboard
SpeedRatio
=
"2"
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(UIElement.Projection).(PlaneProjection.RotationY)"
Storyboard.TargetName
=
"containerPane"
>
<
EasingDoubleKeyFrame
KeyTime
=
"0:0:0"
Value
=
"360"
/>
<
EasingDoubleKeyFrame
KeyTime
=
"0:0:0.5"
Value
=
"270"
/>
<
EasingDoubleKeyFrame
KeyTime
=
"0:0:0.5"
Value
=
"90"
/>
<
EasingDoubleKeyFrame
KeyTime
=
"0:0:1"
Value
=
"0"
/>
</
DoubleAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(FrameworkElement.Visibility)"
Storyboard.TargetName
=
"dataView"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0.5"
Value
=
"Visible"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(FrameworkElement.Visibility)"
Storyboard.TargetName
=
"detailsView"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0.5"
Value
=
"Collapsed"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualTransition
>
</
VisualStateGroup.Transitions
>
<
VisualState
x:Name
=
"showData"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(FrameworkElement.Visibility)"
Storyboard.TargetName
=
"dataView"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0"
Value
=
"Visible"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"showDetails"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"(FrameworkElement.Visibility)"
Storyboard.TargetName
=
"detailsView"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0"
Value
=
"Visible"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
Border
x:Name
=
"containerPane"
BorderThickness
=
"0"
>
<
Border.Projection
>
<
PlaneProjection
/>
</
Border.Projection
>
<
Grid
HorizontalAlignment
=
"Center"
>
<
Grid
x:Name
=
"detailsView"
Visibility
=
"Collapsed"
VerticalAlignment
=
"Center"
>
<
Grid.RowDefinitions
>
<
RowDefinition
/>
<
RowDefinition
/>
<
RowDefinition
/>
<
RowDefinition
/>
<
RowDefinition
/>
<
RowDefinition
/>
<
RowDefinition
/>
</
Grid.RowDefinitions
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"220"
/>
<
ColumnDefinition
Width
=
"220"
/>
<
ColumnDefinition
Width
=
"220"
/>
<
ColumnDefinition
Width
=
"220"
/>
</
Grid.ColumnDefinitions
>
<
TextBlock
Text
=
"Username"
Margin
=
"0,0,0,3"
Grid.Row
=
"0"
Grid.Column
=
"0"
/>
<
TextBlock
Text
=
"Password"
Margin
=
"0,0,0,3"
Grid.Row
=
"0"
Grid.Column
=
"1"
/>
<
TextBlock
Text
=
"Confirm Password"
Margin
=
"0,0,0,3"
Grid.Row
=
"0"
Grid.Column
=
"2"
/>
<
TextBlock
Text
=
"Profiles"
Margin
=
"0,0,0,3"
Grid.Row
=
"0"
Grid.Column
=
"3"
/>
<
TextBlock
Text
=
"Name"
Margin
=
"0,10,0,3"
Grid.Row
=
"2"
Grid.Column
=
"0"
/>
<
TextBlock
Text
=
"Surname"
Margin
=
"0,10,0,3"
Grid.Row
=
"2"
Grid.Column
=
"1"
/>
<
TextBlock
Text
=
"Organization"
Margin
=
"0,10,0,3"
Grid.Row
=
"4"
Grid.Column
=
"0"
/>
<
TextBlock
Text
=
"Phone Number"
Margin
=
"0,10,0,3"
Grid.Row
=
"4"
Grid.Column
=
"1"
/>
<
TextBlock
Text
=
"Email"
Margin
=
"0,10,0,3"
Grid.Row
=
"4"
Grid.Column
=
"2"
/>
<
CheckBox
Content
=
"Free Access"
Grid.Row
=
"4"
Grid.Column
=
"3"
/>
<
TextBox
Width
=
"200"
Height
=
"30"
IsTabStop
=
"True"
TabIndex
=
"0"
Padding
=
"3,6,3,0"
Grid.Row
=
"1"
Grid.Column
=
"0"
Text
=
"{Binding Path=UserCode}"
>
<
i:Interaction.Behaviors
>
<
behaviors:TextChangedBehavior
/>
</
i:Interaction.Behaviors
>
</
TextBox
>
<
epb:EvalPasswordBox
Stroke
=
"Gray"
HighTooltip
=
"Strong"
MediumTooltip
=
"Fair"
LowTooltip
=
"Weak"
Width
=
"200"
Grid.Row
=
"1"
Grid.Column
=
"1"
Password
=
"{Binding Path=Password}"
>
<
i:Interaction.Behaviors
>
<
behaviors:TextChangedBehavior
/>
</
i:Interaction.Behaviors
>
</
epb:EvalPasswordBox
>
<
PasswordBox
Width
=
"200"
Height
=
"30"
Padding
=
"3,6,3,0"
Grid.Row
=
"1"
Grid.Column
=
"2"
Password
=
"{Binding Path=ConfirmedPassword}"
>
<
i:Interaction.Behaviors
>
<
behaviors:TextChangedBehavior
/>
</
i:Interaction.Behaviors
>
</
PasswordBox
>
<
TextBox
Width
=
"200"
Height
=
"30"
Padding
=
"3,6,3,0"
Grid.Row
=
"3"
Grid.Column
=
"0"
Text
=
"{Binding Path=Name}"
>
<
i:Interaction.Behaviors
>
<
behaviors:TextChangedBehavior
/>
</
i:Interaction.Behaviors
>
</
TextBox
>
<
TextBox
Width
=
"200"
Height
=
"30"
Padding
=
"3,6,3,0"
Grid.Row
=
"3"
Grid.Column
=
"1"
Text
=
"{Binding Path=Surname}"
>
<
i:Interaction.Behaviors
>
<
behaviors:TextChangedBehavior
/>
</
i:Interaction.Behaviors
>
</
TextBox
>
<
ListBox
Grid.Row
=
"1"
Grid.Column
=
"3"
Grid.RowSpan
=
"5"
>
<
ListBoxItem
Content
=
"Administrator"
/>
<
ListBoxItem
Content
=
"Instructor"
/>
<
ListBoxItem
Content
=
"Student"
/>
</
ListBox
>
<
ComboBox
Width
=
"200"
Height
=
"30"
Grid.Row
=
"5"
Grid.Column
=
"0"
>
<
ComboBoxItem
Content
=
"[No Organization]"
IsSelected
=
"True"
/>
<
ComboBoxItem
Content
=
"AgustaWestland"
/>
</
ComboBox
>
<
TextBox
Width
=
"200"
Height
=
"30"
Padding
=
"3,6,3,0"
Grid.Row
=
"5"
Grid.Column
=
"1"
Text
=
"{Binding Path=PhoneNumber}"
/>
<
TextBox
Width
=
"200"
Height
=
"30"
Padding
=
"3,6,3,0"
Grid.Row
=
"5"
Grid.Column
=
"2"
Text
=
"{Binding Path=Email}"
/>
<
telerik:RadButton
Command
=
"{Binding CancelAddEdit}"
Content
=
"Cancel"
Height
=
"25"
Margin
=
"0,20,0,0"
Grid.Row
=
"6"
Grid.Column
=
"0"
/>
<
telerik:RadButton
Command
=
"{Binding ConfirmAddEdit}"
Content
=
"Confirm"
Height
=
"25"
Margin
=
"0,20,0,0"
Grid.Row
=
"6"
Grid.Column
=
"3"
/>
</
Grid
>
<
StackPanel
x:Name
=
"dataView"
Visibility
=
"Collapsed"
>
<
telerik:RadToolBar
VerticalAlignment
=
"Top"
GripVisibility
=
"Collapsed"
>
<
telerik:RadButton
Command
=
"{Binding AddUser}"
>
<
telerik:RadButton.Content
>
<
StackPanel
Orientation
=
"Horizontal"
Margin
=
"4 0"
>
<
Image
Source
=
"{StaticResource AddElement}"
></
Image
>
<
TextBlock
Text
=
"Add New User"
Margin
=
"9 0 0 0"
></
TextBlock
>
</
StackPanel
>
</
telerik:RadButton.Content
>
</
telerik:RadButton
>
<
telerik:RadToolBarSeparator
/>
<
telerik:RadButton
Command
=
"{Binding EditUser}"
CommandTarget
=
"{Binding ElementName=radGridUsers}"
>
<
telerik:RadButton.Content
>
<
StackPanel
Orientation
=
"Horizontal"
Margin
=
"4 0"
>
<
Image
Source
=
"{StaticResource EditElement}"
></
Image
>
<
TextBlock
Text
=
"Edit User"
Margin
=
"9 0 0 0"
></
TextBlock
>
</
StackPanel
>
</
telerik:RadButton.Content
>
</
telerik:RadButton
>
<
telerik:RadToolBarSeparator
/>
<
telerik:RadButton
>
<
telerik:RadButton.Content
>
<
StackPanel
Orientation
=
"Horizontal"
Margin
=
"4 0"
>
<
Image
Source
=
"{StaticResource DeleteElement}"
></
Image
>
<
TextBlock
Text
=
"Delete User"
Margin
=
"9 0 0 0"
></
TextBlock
>
</
StackPanel
>
</
telerik:RadButton.Content
>
</
telerik:RadButton
>
<
telerik:RadToolBarSeparator
/>
</
telerik:RadToolBar
>
<
telerik:RadGridView
x:Name
=
"radGridUsers"
VerticalAlignment
=
"Stretch"
HorizontalAlignment
=
"Stretch"
ItemsSource
=
"{Binding UsersView}"
SelectedItem
=
"{Binding CurrentUser, Mode=TwoWay}"
/>
</
StackPanel
>
</
Grid
>
</
Border
>
</
Grid
>
</
UserControl
>
Is it possible to use the TransitionControl instead of the custom storyboard ?
How ?
Thanks !
Andrea