Question

I am trying to scroll text across the screen which is working well.

Update: I’m still stuck with problem and can now demonstrate it on my live app:

1. Go to
   http://www.pokerdiy.com/poker-blinds-timer.aspx
   and leave it non-fullscreen.
2. Click on the “Timer” tab at the top.
   Then click on “Start Tourney”. At
   the top, a scrolling message will
   appear from the right. On my monitor
   (22 inch) – this cuts off before it
   has finished the sentence.
3. Then right-click to resize to full
   screen, and restart the tourney and
   then start it again to show the same
   message. You will see that it now
   works!

This is a big problem as I want to scroll LONG messages across the top… any ideas please?

Problem Summary:

I have a Textblock off the screen to the right which has no width set and is bound to a string value. I programatically start an animation which changes the From and To value on CompositeTransform.TranslateX to move the whole textblock across the screen to give the appearance of scrolling. The width of this textblock autoadjusts to the bound string value and I set this to be the Animation To value (negative) so it takes it off the screen to the left (see code below).

So this all works fantastically… BUT not with long messages. There seems to be a width limit on something that truncates my text. At some point it cuts it off with a width limit (the last character is rendered in half, so it is not a character limit). I set up a loop to create a large string and output the ActualWidth of the Textblock and it shows as 17000 (which is correct). The Width is fine too, and the actual Text property shows the complete string… but the UI truncates it at a certain point, which I can’t figure out.

So – 1) Is this approach ok (is there an easier way?) and 2) What is causing the truncation?

Thanks!

Xaml:-

<Storyboard x:Name="StoryboardScrollText" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
<DoubleAnimation x:Name="StoryboardScrollTextAnimation" Storyboard.TargetName="txtSystemMessage" From="500" To="-740" Duration="0:0:30" />
</Storyboard>


<TextBlock x:Name="txtSystemMessage" TextWrapping="NoWrap" Text="{Binding TourneyMessage}" Foreground="White" FontSize="20" VerticalAlignment="Center" >
<TextBlock.RenderTransform>
<CompositeTransform TranslateX="0"/>
</TextBlock.RenderTransform>
</TextBlock>

Code:-

mainPage.StoryboardShowTourneyMessage.Begin();

//has to scroll the whole message off the screen (plus a bit extra as it starts off the screen)
//get the leftmost position of the logo so it starts just behind it  
mainPage.StoryboardScrollTextAnimation.From = GetPositionX(mainPage.NavigationGridLogo);
mainPage.StoryboardScrollTextAnimation.To = mainPage.txtSystemMessage.ActualWidth * -1 - 50;
mainPage.StoryboardScrollText.Begin();

MessageBox.Show(mainPage.txtSystemMessage.ActualWidth.ToString() + " " + mainPage.txtSystemMessage.Width.ToString());

Answer 1

Part 1: If you intend to do pixel based
animation, use a canvas as the
parent object. Grid will work, but see the cause of your problem in part 2 (below)

Part 2: Basically the truncation of your
text is caused by the parent
container cropping the child. This
is happening based on width of the
parent and it ignores the offset of
your text.

Solution:

• If you place the TextBlock as a child
  of a canvas, instead of a grid (or even just the TextBlock within a canvas within your grid), it will render
  full length as a canvas will never clip its children by default.

• You may need to add a clip rectangle
  to the canvas to hide any parts of
  the text that extend where you do
  not want to see it, but this will depend on what other components are onscreen to hide the overlap. If you do add a clip rectangle, make sure you animate the text position using Canvas.Left and not the TranslateX or you may get the original problem back again!