wp7 TextWrapping not working?

Question

In Orientation="Horizontal" TextWrapping not working below code please check the mistake tell me.

Mycode:

<StackPanel>
                        <StackPanel Orientation="Horizontal" Width="400">
                            <TextBlock Text="dfgdfdgdfgfdgdfg" Foreground="AntiqueWhite" FontSize="30" TextWrapping="Wrap"/>
                            <TextBlock Text=" vs " FontSize="30" Foreground="White" TextWrapping="Wrap"/>
                            <TextBlock Text="Indiaafda (text)" Foreground="Bisque" FontSize="30" TextWrapping="Wrap"/>
                        </StackPanel>

                </StackPanel>

I wnat like this:

South AfricaTeamPlayed vs west
Indies (test)

but output display this,

South AfricaTeamPlayed vs west
                  Indies (test)

Thanks

Answer 1

You should use a Grid instead of StackPanel.

Something like this,

    <Grid Width="400" Margin="40,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Text="dfgdfdgdfgfdgdfg" Foreground="AntiqueWhite" FontSize="30" TextWrapping="Wrap"/>
        <TextBlock Text=" vs " FontSize="30" Foreground="White" TextWrapping="Wrap" Grid.Column="1"/>
        <TextBlock Text="Indiaafda (text)" Foreground="Bisque" FontSize="30" TextWrapping="Wrap" Grid.Column="2"/>
    </Grid>

I will probably re-design the whole thing to be something like this,

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid d:LayoutOverrides="Height" Margin="40,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBlock Text="dfgdfdgdfgfdgdfg" Foreground="AntiqueWhite" FontSize="30" TextWrapping="Wrap"/>
            <TextBlock Text=" vs " FontSize="30" Foreground="White" TextWrapping="Wrap" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            <TextBlock Text="Indiaafda (text)" Foreground="Bisque" FontSize="30" TextWrapping="Wrap" Grid.Column="2"/>
        </Grid>
        <Grid Grid.Row="1">
            <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="where other stuff goes" VerticalAlignment="Center"/>
        </Grid>
    </Grid>

UPDATE

    <Grid VerticalAlignment="Top" Margin="40,0">
        <TextBlock Foreground="AntiqueWhite" FontSize="30" TextWrapping="Wrap">
            <Run Text="south africa"/>
            <Run Text="vs"/>
            <Run Text="windows phone"/>
        </TextBlock>
    </Grid>