This is a migrated thread and some comments may be shown as answers.

[Solved] State-based Navigation

1 Answer 172 Views

TransitionControl

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Andrea Rapuzzi asked on 19 Jan 2011, 09:58 AM

I have a usercontrol with two state like the one below

<UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="HumanResources.HumanResourcesView"

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:i="http://schemas.microsoft.com/expression/2010/interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

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 />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<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

1 Answer, 1 is accepted

answered on 25 Jan 2011, 07:42 AM

Hi Andrea Rapuzzi,

It looks like you have a Master-Details scenario. The control has one ShowData state to display all items and once an item is selected the control shows the ShowDetails for that item.

With RadTransitionControl you can create 2 user controls like DataView and DetailsView, put a RadTransitionControl on your main page and than set its content from code behind to "new DataView()" when the user selects an item in the DataView you can set the content of the RadTransitionControl to "new DetailsView()". When the content changes the RadTransitionControl will perform an animation. I guess you will also have to set the DataContext of the views you create (all data for DataView and the selected item for DetailsView).

Does this makes sense? We are currently working on a ComboBox example that will enter in our QSF and will work in a similar way.

Regards,
Pana
the Telerik team

Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>