Silverlight scrolling text & max width issue

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!