Search code examples
silverlightwindows-phone-7gridstackpanel

Text in StackPanel doesn't wrap (wp7)


I have problem with text wrapping. Without StackPanel this TextBlock works, but i need to put small picture before text. Also I don't have two columns for this (i need only one column for first three rows)

<ListBox.ItemTemplate>
    <DataTemplate>  
        <Grid>
             <Grid.RowDefinitions >
                 <RowDefinition Height="60"/>
                 <RowDefinition Height="170"/>
                 <RowDefinition Height="50"/>
                 <RowDefinition Height="Auto"/>
                 <RowDefinition Height="Auto"/>
                 <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

             <TextBlock Grid.Row="0"></TextBlock>                                   
             <TextBlock Grid.Row="1"></TextBlock>                                   
             <TextBlock Grid.Row="2"></TextBlock>                                   
             <StackPanel Grid.Row="3" Orientation="Horizontal">
                  <Image  Source="Picture.png" MaxHeight="20" MaxWidth="40" HorizontalAlignment="Center" Margin="0,20,0,0" />
                  <TextBlock Text="Long long long text from Binding" FontSize="25" HorizontalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Bottom" Padding="20,10,0,0"  />
             </StackPanel>
         </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

Solution

  • A StackPanel will give its components infinite height or width depending on the Orientation.

    If I look at your XAML I would suggest to use two columns in the grid, and put the image on the left side:

    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions >
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="170"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
    
                <TextBlock Grid.Row="0" Grid.ColumnSpan="2"></TextBlock>
                <TextBlock Grid.Row="1" Grid.ColumnSpan="2"></TextBlock>
                <TextBlock Grid.Row="2" Grid.ColumnSpan="2"></TextBlock>
                <Image Grid.Row="3" Source="Picture.png" MaxHeight="20" HorizontalAlignment="Center" Margin="0,20,0,0" />
                <TextBlock Grid.Column="1" Grid.Row="3" Text="Long long long text from Binding" FontSize="25" 
                            HorizontalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" 
                            VerticalAlignment="Bottom" Padding="20,10,0,0"  />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
    

    Notice Grid.ColumnSpan on the first textboxes, this will span them over the entire width of the grid, not just the first column.