Part of text is not shown after animation changes StackPanel location

I have a windows phone 7 project with a page that has the following structure:

• I have scrollviewer and a stackpanel inside called main stackpanel
• in the main stackpanel I have couple of stackpanels with horizontal orientation
• the horizontal stackpanels has several textblocks each containing a single letter

sometimes the horizontal stackpanel contains more letters than it fits to the phone screen. From time to time I need to show a group of letters that are outside of the screen. To be able to show these letters, I need to move the stackpanel, so the letters are becoming visible on screen. When I am finished the animation, the letters that are moved in to the screen are not visible at all.

What should I do to make it visible?

I added a screenshot and a pseudo xaml of my page to demonstrate the structure. I hope this will help!

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <ScrollViewer VerticalScrollBarVisibility="Disabled">
        <StackPanel x:Name="MainStackPanel" Margin="12,0,12,-177" Grid.RowSpan="2" RenderTransformOrigin="0.5,0.5" >
            <StackPanel x:Name="stackPanel" Orientation="Horizontal" Width="580" RenderTransformOrigin="0.5,0.5">
             <StackPanel.RenderTransform>
              <CompositeTransform/>开发者_C百科
             </StackPanel.RenderTransform>
                <TextBlock Style="{StaticResource LetterStyle1}" VerticalAlignment="Stretch"><Run Text="e"/></TextBlock>
                <TextBlock Style="{StaticResource LetterStyle1}" VerticalAlignment="Stretch"><Run Text="u"/></TextBlock>
                ... many more textblock each containing a letter 
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Style="{StaticResource LetterStyle1}" VerticalAlignment="Stretch"><Run Text="e"/></TextBlock>
                <TextBlock Style="{StaticResource LetterStyle1}" VerticalAlignment="Stretch"><Run Text="u"/></TextBlock>
                ... many more textblock each containing a letter 
            </StackPanel>

Fortunately, I managed to find the solution. The problem is that some of the horizontal stackpanel were wider then MainStackPanel.

Changing the MainStackPanel and the ScrollViewer to be as wide as the widest horizontal solves the problem.

 <ScrollViewer VerticalScrollBarVisibility="Disabled" Margin="0,0,-106,0">
        <StackPanel x:Name="MainStackPanel" Margin="12,0,12,-177" Grid.RowSpan="2" RenderTransformOrigin="0.5,0.5" >