Silverlight: Utiliser TransitioningContentControl pour animer une grille du mode lecture seule au mode édition

Question

J'utilise Silverlight 4.0 et j'ai une grille simple dans laquelle certains détails liés à l'utilisateur sont affichés, comme le nom, le numéro de téléphone. adresse, etc. Initialement, les zones de texte sont en mode lecture seule. Les zones de texte deviennent modifiables lorsqu'un utilisateur clique sur le lien "Mettre à jour les informations" (dans la même grille). Maintenant, je suis en train un simple effet de transition du mode "lecture seule" à "modifiable" ..

est ici le code XAML

<layoutToolkit:TransitioningContentControl x:Name="tcc" 
               Grid.Row="1" 
               BorderThickness="1"> 
     <layoutToolkit:TransitioningContentControl.Content> 
      <Grid x:Name="grd1" Background="White"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto" /> 
        <ColumnDefinition Width="Auto" /> 

       </Grid.ColumnDefinitions> 

       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="Auto" /> 
       </Grid.RowDefinitions> 

       <TextBlock Text="Name" Grid.Row="0" Grid.Column="0"/> 

       <TextBox x:Name="txtName" Grid.Column="1" Grid.Row="0" IsReadOnly="True"></TextBox> 

       <TextBlock Text="Email" Grid.Row="1" Grid.Column="0"/> 

       <TextBox x:Name="txtEmail" Grid.Column="1" Grid.Row="1" IsReadOnly="True"></TextBox> 
       <Button x:Name="ChangeContent" Content="Updatee Info" Click="ChangeContent_Click" Grid.Column="1" Grid.Row="2"></Button> 
      </Grid> 
     </layoutToolkit:TransitioningContentControl.Content> 
    </layoutToolkit:TransitioningContentControl> 

et le bouton clic événement

private void ChangeContent_Click(object sender, System.Windows.RoutedEventArgs e) 
    { 
     //tcc.Content = DateTime.Now.ToString(); 
     txtName.IsReadOnly = false; 
     txtEmail.IsReadOnly = false;   
    } 

Comment puis-je obtenir un effet de transition dans ce scénario?

Answer 1

Je ne suis pas familier avec beaucoup TransitioningContentControl, mais je pense que pour que le contrôle au travail, vous avez besoin de changer lui-même le Content et non pas seulement une propriété d'un Control à l'intérieur. Pour réaliser la transition nécessaire, vous pouvez créer une custom (ou modifier existante) ControlTemplate pour la zone de texte avec un VisualState personnalisé nommé 'ReadOnly' et un Storyboard dedans pour l'effet nécessaire. Ou vous pouvez créer deux contrôles Grid différents, l'un avec l'interface ReadOnly et l'autre avec l'interface Editable et dans votre code, basculez simplement entre eux.

Le lien suivant présente un exemple de travail sur l'utilisation TransitioningContentControl: http://firstfloorsoftware.com/blog/animated-page-navigation-in-sl3/