R – Silverlight cutting off text/ wrapping it and not displaying correctly

expression-blendlayoutsilverlightsilverlight-3.0xamlpad

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>

Best Solution

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>
Related Question