State-based Navigation

2 posts, 0 answers
  1. Andrea Rapuzzi
    Andrea Rapuzzi avatar
    28 posts
    Member since:
    Apr 2010

    Posted 19 Jan 2011 Link to this post

    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:x="http://schemas.microsoft.com/winfx/2006/xaml" 
               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
  2. Pana
    Admin
    Pana avatar
    748 posts

    Posted 25 Jan 2011 Link to this post

    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>>
  3. DevCraft banner
Back to Top