Question

I have a TextBlock on my page with Text value null (“”). When I click a button I want to change the Text value for this TextBlock, pause half a second and then move the TextBlock one pixel at a time to a certain point.

I tried using Thread.Sleep(), but so far, I have a problem. I click the button, the UI thread pauses for half a second, then the TextBlock suddenly appears and starts moving. I want it to appear as soon as I click the button.

P.S.: I know Thread.Sleep() doesn’t work. I am willing to use anything that works.

Answer 1

Storyboards and animations are the preferred mechanism for moving items on the screen. For one thing, they are optimized to work with the phones threading model. For another, putting your UI thread to sleep is a bad idea as you are making a non responsive application.

Here’s a quick example of how to move a texblock with a story board.

The UI elements.

 <Grid
  x:Name="ContentPanel"
  Grid.Row="1"
  Margin="12,0,12,0">
  <TextBlock
    Margin='79,263,177,307'
    Name='textBlock1'
    Text='TextBlock'
    RenderTransformOrigin="0.5,0.5">
    <TextBlock.RenderTransform>
        <CompositeTransform />
    </TextBlock.RenderTransform>
  </TextBlock>
  <Button
    Content="Button"
    Height="80"
    Margin="116,0,188,144"
    VerticalAlignment="Bottom"
    Click='Button_Click' />
</Grid>

The storyboard, defined in the page resources section.

 <phone:PhoneApplicationPage.Resources>
<Storyboard
  x:Name="MoveTextBlockStoryboard">
  <DoubleAnimationUsingKeyFrames
    Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
    Storyboard.TargetName="textBlock1">
    <EasingDoubleKeyFrame
      KeyTime="0"
      Value="0" />
    <EasingDoubleKeyFrame
      KeyTime="0:0:1.1"
      Value="120" />
  </DoubleAnimationUsingKeyFrames>
  <DoubleAnimationUsingKeyFrames
    Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
    Storyboard.TargetName="textBlock1">
    <EasingDoubleKeyFrame
      KeyTime="0"
      Value="0" />
    <EasingDoubleKeyFrame
      KeyTime="0:0:1.1"
      Value="-105" />
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

The code that changes the text and starts the storyboard.

private void Button_Click(object sender, RoutedEventArgs e) {
  textBlock1.Text = "new text";
  MoveTextBlockStoryboard.Begin();

}