Silverlight cutting off text/ wrapping it and not displaying correctly

Question

Please help me understand the issue behind this and it's fix, I'm having agood deal of trouble getting the behaviour I want with text display.

With certain lengths of strings the TextBlock wraps around, but does not update the control to show the second line, in effect making part of the text dissappear.

This works fine in XamlPad, but not in Silverlight 3 and Expression blend 3

<Grid x:Name="LayoutRoot" Background="{x:Null}">
 <Grid.RowDefinitions>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="Auto"/>
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="Auto"/>
 </Grid.ColumnDefinitions>
<Border CornerRadius="20,20,20,20" Grid.ColumnSpan="2" Grid.RowSpan="2" BorderBrush="#FF000000" BorderThickness="1,1,1,1">
 <Border.Background>
  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
   <GradientStop Color="#FF2100FF"/>
   <GradientStop Color="#FFFFFFFF" Offset="1"/>
  </LinearGradientBrush>
 </Border.Background>
</Border>

<TextBlock x:Name="eventName" Grid.Column="1" Text="Amazing Music" FontSize="24" Margin="5,5,10,5" HorizontalAlignment="Left" VerticalAlignment="Top" Padding="0,0,0,0"/>
<TextBlock x:Name="eventDescription" Grid.Column="1" Grid.Row="1" Text="Amazin music in that house" TextWrapping="Wrap" FontSize="14" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top" MaxWidth="300" />
</Grid>

Answer 1

Mmm.... maybe hte isue can be on the Grid, try to do that in a dummy stack panel, just to check whether you have to play with auto or * ...

On the ohter hand if you need to show a TextBlock inside a fix area,

http://www.tipsdotnet.com/TechBlog.aspx?PageIndex=0&BLID=7

Cheers Braulio

Answer 2

I think Braulio's onto something. I was able to get it to wrap and size correctly by wrapping the text in a stackpanel in a border. Drop this XAML onto a brand-new user control that does not have a width and height set.

<Border CornerRadius="20,20,20,20" BorderBrush="#FF000000" BorderThickness="1,1,1,1" 
    Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="192"
    Padding="5">
    <Border.Background>
     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#FF2100FF"/>
      <GradientStop Color="#FFFFFFFF" Offset="1"/>
     </LinearGradientBrush>
    </Border.Background>
    <StackPanel>
     <TextBlock x:Name="eventName" Text="Amazing Music" FontSize="24" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="0,0,0,0"/>
     <TextBlock x:Name="eventDescription" Text="Amazin music in that house" TextWrapping="Wrap" FontSize="14" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MaxWidth="300" />
    </StackPanel>
</Border>