如何使文本在UWP中从下至上移动动画

Question

How to animate the text from bottom to top in UWP. Is there any better way to trigger style properties in UWP.

Answer 1

How to make text moving Animation from bottom to top in UWP

You could use DoubleAnimation to approach, Please refer the following code.

<Grid>
    <Grid.Resources>
        <Storyboard x:Name="MoveStoryboard">
            <DoubleAnimation Storyboard.TargetName="Tbk"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                             From="0" Windows10version1903:To="{x:Bind TbkY, Mode=TwoWay}" Duration="0:0:2">

            </DoubleAnimation>
        </Storyboard>
    </Grid.Resources>
    <TextBlock Loaded="Tbk_Loaded" 
               Name="Tbk" 
               Text="hello Nico"
               VerticalAlignment="Bottom" 
               Visibility="Visible" 
               HorizontalAlignment="Center" 
               FontSize="22" 
               TextLineBounds="Full"  >
        <TextBlock.RenderTransform>
            <CompositeTransform/>
        </TextBlock.RenderTransform>
    </TextBlock>
    <Button Content="Move" Click="Button_Click"/>
</Grid>

Code Behind

private void Button_Click(object sender, RoutedEventArgs e)
{
    MoveStoryboard.Begin();        
}
public double TbkY { get; set; }

private void Tbk_Loaded(object sender, RoutedEventArgs e)
{
    TbkY = -Tbk.ActualOffset.Y;
}

Answer 2

MVVM aproach to trigger story bord on datachange

We can also trigger the story board on Data change. I tried the below code its works for me. Use the below namespace before going to start . The nuget package will be availble on the link Microsoft.Xaml.Behaviors.Uwp.Managed

 xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
 xmlns:Media ="using:Microsoft.Xaml.Interactions.Media"
<Page.Resources>
    <Storyboard x:Name="MoveStoryboard">
        <DoubleAnimation Storyboard.TargetName="txttext1"
                         Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                         From="0" To="-200" Duration="0:0:2">

        </DoubleAnimation>
    </Storyboard>
 </Page.Resources>
<Grid>
  <TextBlock Text="Sample text to Animate">
     <interactivity:Interaction.Behaviors>
         <core:DataTriggerBehavior Binding ={Binding AnimateText} Value = true>
             <Media:ControlStoryboardAction Storyboard="{StaticResource MoveStoryboard}"/>
         </core:DataTriggerBehavior>
       </interactivity:Interaction.Behaviors>
   <TextBlock.RenderTransform>
       <CompositeTransform/>
    </TextBlock.RenderTransform>
   </TextBlock>
</Grid>

I have changed the AnimateText property in ViewModel. Whenever the property value is changed .The textblock will move bottom to top based on(- Y value that is To="-200").