Silverlight: Commutation VisualStates de CustomVisualStateManager dans code-behind

Question

J'ai essayé de résoudre le problème suivant: Lors de la création d'animations personnalisées pour différents états visuels dans Expression Blend 3, qui modifient la taille/l'opacité de plusieurs éléments sur le grid, il crée les groupes d'états visuels dans la grille plutôt que dans le style de contrôle et le définit comme CustomVisualStateManager.

<Grid x:Name="LayoutRoot" Background="White" Height="500" HorizontalAlignment="Left" VerticalAlignment="Top" Width="500">  
<VisualStateManager.VisualStateGroups> 
<VisualStateGroup x:Name="MyVisualStateGroup"> 
    <VisualStateGroup.Transitions> 
    <VisualTransition GeneratedDuration="00:00:00.3000000"> 
     <VisualTransition.GeneratedEasingFunction> 
      <CircleEase EasingMode="EaseIn"/> 
    </VisualTransition.GeneratedEasingFunction> 
    </VisualTransition> 
    </VisualStateGroup.Transitions> 
    <VisualState x:Name="State1"/> 
    <VisualState x:Name="State2"> 
     <Storyboard> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="myBox" Storyboard.TargetProperty="(FrameworkElement.Height)"> 
      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="360"/> 
<!-- omitting other storyboard animations here for clarity -->      
       </Storyboard> 
    </VisualState> 
    </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
<VisualStateManager.CustomVisualStateManager> 
    <ic:ExtendedVisualStateManager/> 
</VisualStateManager.CustomVisualStateManager> 

<!-- omitting other grid elements here for clarity --> 

</Grid> 

Il est ok avec moi, mais le problème est, je ne peux pas changer d'état, dans le code-behind lorsque je tente

VisualStateManager.GoToState(this, "State1", true); 

rien ne se passe, parce que le contrôle lui-même n'a pas ces visualstates défini, comme le montre

VisualStateManager.GetVisualStateGroups(this); 

Si je tente

VisualStateManager.GetVisualStateGroups(LayoutRoot); 

il montre exactement ce dont j'ai besoin. Mais je ne peux pas passer LayoutRoot à VisualStateManager car il a besoin d'un argument de type Control, ce qui n'est pas le cas de Grid. Ma question est - comment puis-je accéder/modifier les états de ce CustomVisualStateManager dans code-behind?

Answer 1

Le CustomVisualStateManager est juste là quand vous activez FluidLayout. À moins que vous n'ayez impliqué le morphing de mise en page dans votre projet (c'est-à-dire que vous essayez d'utiliser des états pour animer facilement d'une mise en page à une autre), vous pouvez le désactiver. La présence du VSM personnalisé ne devrait faire aucune différence dans l'utilisation de VSM.

Le balisage d'état visuel est toujours à l'intérieur du conteneur de niveau supérieur, ce qui est parfaitement normal. BTW, ceci pourrait être juste une faute de frappe dans votre échantillon, mais le code que vous montrez essaye réellement de placer un état qui n'a rien dedans, ainsi ce n'est peut-être pas le résultat désiré.

Sinon, l'appel de VisualStateManager.GoToState sur UserControl devrait fonctionner. Voici un exemple que je viens de faire qui fonctionne:

Il s'agit d'un simple exemple d'application Silverlight, avec une page principale et un contrôle utilisateur que j'ai ajouté à la page principale. La page principale est vraiment simple:

<UserControl 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="clr-namespace:SLStateTest" 
x:Class="SLStateTest.MainPage" 
Width="640" Height="480"> 

<Grid x:Name="LayoutRoot" Background="White"> 
    <local:UserControl1 x:Name="TestControl" Height="100" HorizontalAlignment="Left" Margin="24,32,0,0" VerticalAlignment="Top" Width="100"/> 
    <Button Height="40" HorizontalAlignment="Left" Margin="192,32,0,0" VerticalAlignment="Top" Width="104" Content="State 1" Click="OnClick"/> 
    <Button Height="40" HorizontalAlignment="Left" Margin="192,76,0,0" VerticalAlignment="Top" Width="104" Content="State 2" Click="OnClickState2"/> 
</Grid></UserControl> 

Il existe une instance de mon contrôle utilisateur et deux boutons. Nous verrons ce que les boutons font en une seconde. Tout d'abord, regardons la UserControl (UserControl1):

<UserControl 
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" 
mc:Ignorable="d" 
xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
x:Class="SLStateTest.UserControl1" 
d:DesignWidth="280" d:DesignHeight="264"> 

<Grid x:Name="LayoutRoot" Background="#FF6FFE22"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="Test" ic:ExtendedVisualStateManager.UseFluidLayout="True"> 
      <VisualState x:Name="State1"> 
       <Storyboard> 
        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
         <EasingColorKeyFrame KeyTime="00:00:00" Value="#FF003AFF"/> 
        </ColorAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="State2"> 
       <Storyboard> 
        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
         <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFFF0202"/> 
        </ColorAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <VisualStateManager.CustomVisualStateManager> 
     <ic:ExtendedVisualStateManager/> 
    </VisualStateManager.CustomVisualStateManager> 
</Grid></UserControl> 

Comme vous pouvez le voir, il y a deux états visuels définis dans un groupe d'état visuel qui vient de mettre une couleur sur la racine de mise en page du contrôle de l'utilisateur.

Les deux boutons sur la page principale sont câblés aux gestionnaires d'événements qui se présentera comme suit:

private void OnClick(object sender, System.Windows.RoutedEventArgs e) 
    { 
     // TODO: Add event handler implementation here. 
     VisualStateManager.GoToState(TestControl, "State1", true); 
    } 

    private void OnClickState2(object sender, System.Windows.RoutedEventArgs e) 
    { 
     // TODO: Add event handler implementation here. 
     TestControl.SetState(); 
    } 

Le premier appelle simplement VisualStateManager.GoToState sur la UserControl sur la page. Le second appelle une fonction iside du contrôle utilisateur qui fait la même chose. Je viens d'utiliser les deux méthodes pour montrer que les deux options sont disponibles - vous pouvez appeler VSM.GoToState de l'extérieur ou de l'intérieur d'une UC. La méthode SetState() du contrôle de l'utilisateur se présente comme suit:

public void SetState() 
    { 
     VisualStateManager.GoToState(this, "State2", true); 
    } 

Lorsque vous exécutez l'application, le contrôle de l'utilisateur d'abord apparaître dans son état de base, ce qui est vert.Lorsque vous appuyez sur le bouton État 1, il va à State1, qui fixe l'UC bleu en appelant VSM.GoToState() de l'extérieur. Lorsque vous appuyez sur le bouton State 2, il passe au rouge en appelant VSM de l'intérieur.

A partir des extraits où vous avez posté, je ne vois pas ce qui va mal, loin de la seule question que je l'ai mentionné au début. Cependant, mon petit échantillon pourrait vous aider à voir ce qui est différent dans votre cas.

espoir qui aide ...