2016-11-20 5 views
0

J'essaie d'obtenir un ContentControl pour appliquer un ContentThemeTransition où le contenu sera une chaîne, donc quand la chaîne change via une liaison, la nouvelle chaîne s'anime. Je ne peux pas utiliser ContentThemeTransition avec un TextBlock car cela ne dérive pas de ContentControl.UWP ContentControl ne pas appliquer ContentThemeTransition

Voici un exemple de XAML qui montre le problème. Si je modifie le texte dans la zone de texte (qui représente le texte dans mon ViewModel que le ContentControl est vraiment lié), je m'attendrais à ce que le texte affiché dans le ContentControl s'anime, mais ce n'est pas le cas.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.RowDefinitions> 
     <RowDefinition/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 

    <TextBox Grid.Row="0" x:Name="text" Text="Hello" Width="100" Height="30"/> 
    <ContentControl Grid.Row="1" Width="100" Height="100" Content="{Binding ElementName=text , Path=Text}"> 
     <ContentControl.Transitions> 
      <TransitionCollection> 
       <ContentThemeTransition HorizontalOffset="40"/> 
      </TransitionCollection> 
     </ContentControl.Transitions> 
    </ContentControl> 
</Grid> 

Qu'est-ce que je fais mal?

Un grand merci d'avance pour toute aide.

MISE À JOUR:

Ok, maintenant se rendre quelque part. Si vous remplacez le ContentControl XAML à

<ContentPresenter Background="Black" Foreground="Red" Grid.Row="1" Width="100" Height="100" Content="{Binding ElementName=text , Path=Text}"> 
     <ContentPresenter.ContentTransitions> 
      <TransitionCollection> 
       <ContentThemeTransition VerticalOffset="-100"/> 
      </TransitionCollection> 
     </ContentPresenter.ContentTransitions> 
    </ContentPresenter> 

il fonctionne. Bizarrement, avec le paramètre VerticalOffset = -100 comme ci-dessus, la nouvelle valeur s'anime en dehors du ContentControl, c'est-à-dire qu'elle est visible en dehors des limites du contrôle. Quelqu'un sait comment changer les choses afin que l'animation n'apparaisse que dans les limites du ContentPresenter?

Répondre

1

Testé à mes côtés, votre premier <ContentThemeTransition HorizontalOffset="40"/> et le second <ContentThemeTransition VerticalOffset="-100"/> fonctionnent tous les deux mais seulement pour la première fois, vous pouvez agrandir le HorizontalOffset pour le tester et vérifier si cela fonctionne.

Depuis que vous attendiez que l'animation devrait fonctionner chaque fois que le texte est changé, je pense que vous devez créer une animation qui cible le Text de TextBlock directement au lieu de cibler le Content de ContentControl.

Dans ce scénario, XAML Behaviors sera une bonne aide. Vous pouvez vous référer à @Jerry Nixon - la réponse MSFT en fil: How to animate TextBlock when its value changes in WinRT XAML?

Mise à jour:

Mon erreur que je ne remarqué que vous avez changé HorizontalOffset-VerticalOffset. Vous avez également changé ContentControl en ContentPresenter.

Selon la coordonnée UI de UWP, puisque votre animation cible le ContentPresenter, alors considérez le point le plus haut de votre ContentPresent est (0, 0). Lorsque vous définissez <ContentThemeTransition VerticalOffset="-100"/>, il passera de haut (0, -100) à (0, 0) et il va certainement animer en dehors de votre ContentPresent, je pense qu'il est conçu pour être ainsi, et nous ne sommes pas en mesure de le changer . Ici, je ne peux que suggérer que modifier la transition de bas en haut comme <ContentThemeTransition VerticalOffset="100"/>, ça va aider un peu ici mais finalement ça change votre animation, donc je ne pense pas que ce soit une bonne approche.

+0

Salut @Grace Feng, s'il vous plaît voir ma mise à jour dans le message original. Si j'utilise 'ContentPresenter', je peux le faire fonctionner à chaque fois que le texte change, ce qui est génial. Le seul problème est que si j'utilise 'VerticalOffset = -100' alors le texte flotte visiblement hors des limites du' ContentPresenter' qui a l'air bizarre. – Cleve

+0

@Cleve, Mon erreur, j'ai seulement remarqué que vous avez changé 'HorizontalOffset' à' VerticalOffset', vous avez également changé votre cible d'animation.Je mettrai à jour ma réponse plus tard. –

+0

@Cleve, j'ai mis à jour ma réponse, désolé pour mon erreur. –