none
Why TextBlock doesn't wrap, even I set TextWrapping to Wrap ?

    Question

  • <UserControl x:Class="SilverlightApplication2.Page"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:Controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
      >
      <StackPanel MaxWidth="300" Orientation="Horizontal" MaxHeight="500" >
        <Grid  >
            <StackPanel Orientation="Vertical" >
                <StackPanel Orientation="Vertical" >
                    <TextBlock TextWrapping="Wrap">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</TextBlock>
                    <TextBlock TextWrapping="Wrap">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</TextBlock>
                </StackPanel>
            <TextBlock  TextWrapping="Wrap">Longasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadfffer1 </TextBlock>
            </StackPanel>
        </Grid>
      </StackPanel>
    </UserControl>

     

    I suspect the TextBlocks should wrap, but some characters disappear.

    And if I change the most outside StackPanel 's Orientation to "Vertical", everything is ok, why?

     

    Sunday, December 14, 2008 4:53 AM

Answers

  •  I believe it is a bug in the Silverlight StackPanel. Silverlight layout system works in a two pass of measure and arrange. In the measure pass, the layout manager pass to the control the available space for the control. In the case of StackPanel with Orientation set to Horizontal, the StackPanel seems to ignore the MaxWidth property and the textbox measures as if it has the full width available to it not just the 300 pixels specified in MaxWidth. When you set the Orientation to Vertical, the layout system used the MaxWidth property correctly, and the TextBlock wrapped as it should.

    Sunday, December 14, 2008 10:32 AM

All replies

  •  This is because you are setting the MaxWidth property on the top level StackPanel not on the Parent of your TextBlock, the following code wraps correctly:

     

     

    1           <StackPanel MaxWidth="300" Orientation="Horizontal" MaxHeight="500" >
    2                <Grid >
    3                    <StackPanel Orientation="Vertical" MaxWidth="300" >
    4                        <StackPanel Orientation="Vertical" MaxWidth="300" >
    5                            <TextBlock TextWrapping="Wrap">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</TextBlock>
    6                            <TextBlock TextWrapping="Wrap">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</TextBlock>
    7                        </StackPanel>
    8                        <TextBlock TextWrapping="Wrap">Longasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadfffer1</TextBlock>
    9                    </StackPanel>
    10               </Grid>
    11           </StackPanel>
    
      
    Sunday, December 14, 2008 5:19 AM
  •  Thanks.

    Another question, must I set Text_Block's directly parent's Max_Width  property?

     

    1           <StackPanel MaxWidth="300" Orientation="Vertical" MaxHeight="500" >
    2 <Grid >
    3 <StackPanel Orientation="Vertical" >
    4 <StackPanel Orientation="Vertical" >
    5 <TextBlock TextWrapping="Wrap">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</TextBlock>
    6 <TextBlock TextWrapping="Wrap">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</TextBlock>
    7 </StackPanel>
    8 <TextBlock TextWrapping="Wrap">Longasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadfffer1</TextBlock>
    9 </StackPanel>
    10 </Grid>
    11 </StackPanel>
     The above piece of xml could also work.
    I don't know the reason.
    Would you please explain it ? thanks a lot.
    Sunday, December 14, 2008 9:26 AM
  •  I believe it is a bug in the Silverlight StackPanel. Silverlight layout system works in a two pass of measure and arrange. In the measure pass, the layout manager pass to the control the available space for the control. In the case of StackPanel with Orientation set to Horizontal, the StackPanel seems to ignore the MaxWidth property and the textbox measures as if it has the full width available to it not just the 300 pixels specified in MaxWidth. When you set the Orientation to Vertical, the layout system used the MaxWidth property correctly, and the TextBlock wrapped as it should.

    Sunday, December 14, 2008 10:32 AM
  •  Thanks a lot. ~

    Monday, December 15, 2008 7:13 AM
  • It's not a bug, its just that the StackPanel sizes to whatever its content asks for, and gives free reign for the content to ask for anything. Thus, the TextBlock asks for the full width of the text with no wrapping.

    Say you are placing a thumbnail next to a title. You want the thumbnail to be of a fixed size and the text title to the right of it, and wrapped if needed.

    A StackPanel on horizontal mode sounds like a plan, but that's what you've tried to no avail. So setup a grid with the following. Auto for the left and * for the right.

     

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" Background="{StaticResource PhoneTextBoxReadOnlyBrush}" Visibility="Visible" Margin="0,0,9,0" >
                        <Image Width="50" Height="50" Source="{Binding Thumbnail}" />
                    </Border>
                    <Grid Grid.Column="1" >
                        <TextBlock Text="Eastenders on Tour Live at Wembley" TextWrapping="Wrap"
                                   FontFamily="Segoe WP Light" FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="{StaticResource PhoneInverseBackgroundBrush}" />
                    </Grid>
                </Grid>
    Sunday, April 17, 2011 8:00 AM
  • Try the below line for Text Block Wrapping ..

    TextWrapping = System.Windows.TextWrapping.Wrap

    Also, set the width of the control (text block) to set how mych lenght you want in each line.

    Shaik

    Tuesday, September 20, 2011 11:29 AM