Windows Phone 8 - TextBlock in StackPanel not wrapping Text properly?

Question

I have an app that is based on the Panorama control. Clicking on an item on one of the Panorama control's pages (tabs) goes to a details page. On that details page I have the XAML below that renders the item content. As you can see there is a TextBlock hosted by a StackPanel in the phone:PanoramaItem.Header element. I want the text in that element to wrap the video title the TextBlock is bound to in the view model. I have TextWrapping set to wrap and I have assigned it a fixed width so the TextBlock doesn't grow/expand (and therefore won't wrap). The text does wrap, but some lines still appear clipped with some words appearing "cut off". What is wrong with my XAML?

I read about using a DockPanel instead:

TextBlock Wrapping in WPF Layout

But this app has a StackPanel used on a lot of different pages so if I can stick with a StackPanel I'd prefer it.

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Visibility="{Binding IsInternetAvailable}" Background="{StaticResource PhoneAccentBrush}" Height="30">
        <TextBlock Text="{Binding Path=LocalizedResources.NoConnection, Source={StaticResource LocalizedStrings}}" Margin="10, 0"/>
    </Grid>
    <phone:Panorama x:Name="PanoramaFavorites_DetailVideos" Grid.Row="2" Foreground="{StaticResource CustomApplicationTextBrush}" Background="{StaticResource CustomApplicationBackgroundImage}" SelectionChanged="panoramaFavorites_DetailVideos_SelectionChanged">
        <phone:Panorama.Title>
            <StackPanel Orientation="Horizontal" Margin="0,15,0,0">
                <Image Height="85" Width="85" Source="http://appstudiodata.blob.core.windows.net/apps/1383/db936107-bce6-41a2-9d95-1d342f66c6bb/res/Logo-b3883645-a6cd-4cc8-82be-97c87a266656.png" Stretch="Uniform" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5,0,10,5" RenderTransformOrigin="0.5,0.5" />
                <TextBlock FontSize="92" Text="Robot Videos" FontFamily="Segoe WP Light" Foreground="{StaticResource CustomTitleApplicationTextBrush}" VerticalAlignment="Stretch"/>
            </StackPanel>
        </phone:Panorama.Title>
        <phone:PanoramaItem x:Name="PanoramaFavorites_DetailVideos0" Margin="0,0,0,25">
            <phone:PanoramaItem.Header>
                <StackPanel Orientation="Horizontal" Margin="0,7,0,0">
                    <TextBlock Text="{Binding CurrentYouTubeVideo.Title, Converter={StaticResource SanitizeString}}" Foreground="{StaticResource CustomApplicationTextBrush}" FontSize="36" TextWrapping="Wrap" Width="440" Height="170"/>
                </StackPanel>
            </phone:PanoramaItem.Header>
            <ctl:FlipControl NextElementCommand="{Binding NextpanoramaFavorites_DetailVideos0}" PreviousElementCommand="{Binding PreviouspanoramaFavorites_DetailVideos0}" ShowPreviousButton="{Binding HasPreviouspanoramaFavorites_DetailVideos0}" ShowNextButton="{Binding HasNextpanoramaFavorites_DetailVideos0}">
                <ctl:FlipControl.InnerContent>
            <Grid Margin="10,5,5,5">    
                <ScrollViewer>
                        <ctl:YouTubePlayer Margin="0,10" MaxHeight="250" VerticalAlignment="Top" VideoId="{Binding CurrentYouTubeVideo.VideoId, TargetNullValue={StaticResource DefaultNoImageValue}}"/>
                </ScrollViewer>
            </Grid>
                </ctl:FlipControl.InnerContent>
            </ctl:FlipControl>
        </phone:PanoramaItem>
    </phone:Panorama>
</Grid>

You're specifying the exact size it will be, so how do you expect it to behave when you have too much text to fit in the space you give it? — steveg89
@steveg89 I expect it to wrap text to the next line using word breaks to decide where to do the wrapping when a word exceeds the specified width of the TextBlock. — Robert Oschler

steveg89 steveg89 · Accepted Answer · 2013-11-27T18:49:19

As per your comments, this works for me:

<StackPanel Orientation="Vertical" Margin="0,7,0,0">
    <TextBlock Text="{Binding CurrentYouTubeVideo.Title, Converter={StaticResource SanitizeString}}" 
               Foreground="{StaticResource CustomApplicationTextBrush}" 
               FontSize="36" 
               TextWrapping="Wrap" 
               MaxWidth="440"/>
</StackPanel>

Windows Phone 8 - TextBlock in StackPanel not wrapping Text properly?

1 Answers