Windows Phone : Text in textblock not showing fully

Question

Problem solved! Anyway, I just figured out the problem. I did a .Trim() on the values and surprisingly they can be wrapped. Thanks and sorry for all the trouble. =)

I am doing some data binding to my textblock in a grid.

However, some of the texts are not showing fully.

I tried the Text Wrapping and setting a maximum width to my textblock. But none of them worked.

EDIT : Hi again. I noticed that when I changed the text of the textblock manually via codes like

 txtDesc.Text = "This is a job for Stackers. If you like stacking, please contact me. 

The text wrapping actually works. So somehow the databind result text can't be wrap?

The XAML code for my textblock.

 <TextBlock Name="Description"  Grid.Row="4" Text="{Binding Description}" FontSize="     {StaticResource PhoneFontSizeSmall}" Height="auto" Width="220" Margin="0,0,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" MaxWidth="220"></TextBlock>

Any help here?

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <ImageBrush Stretch="Fill" ImageSource="images/SmallLogoNTitle.png"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <toolkit:ListPicker ItemsSource="{Binding}" Name="lpkTypeOfService" Margin="0,116,12,0" Height="65" VerticalAlignment="Top" HorizontalAlignment="Right" Width="210" SelectionChanged="lpkTypeOfService_SelectionChanged">

            </toolkit:ListPicker>
            <ListBox Margin="8,210,8,26" Name="listBox1" Width="450">
            <ListBox.ItemTemplate>
                    <DataTemplate>

                        <Grid ShowGridLines="True">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50"/>
                                <RowDefinition Height="50"/>
                                <RowDefinition Height="30"/>
                                <RowDefinition Height="30"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="60"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="300"/>
                                <ColumnDefinition Width="150"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" Name="Date" Text="{Binding Date}" FontSize="{StaticResource PhoneFontSizeLarge}"></TextBlock>
                            <TextBlock HorizontalAlignment= "Left" Grid.Row="1" Grid.Column="0" Name="Creator" Text="{Binding CreatorID}" FontSize="{StaticResource PhoneFontSizeLarge}"></TextBlock>
                            <TextBlock Name="Type" Grid.Row="2" Text="{Binding Type}" FontSize="{StaticResource PhoneFontSizeSmall}"></TextBlock>
                            <TextBlock Name="Amount" Grid.Row="3" Text="{Binding Amount}" FontSize="{StaticResource PhoneFontSizeSmall}"></TextBlock>
                            <TextBlock Name="Description"  Grid.Row="4" Text="{Binding Description}" FontSize="{StaticResource PhoneFontSizeSmall}" Height="auto" Width="220" Margin="0,0,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" MaxWidth="220"></TextBlock>
                            <Button Content="Apply" Height="70" Width="140" Name="btn1" Click="btn_Click" Grid.Row="5" Grid.Column="1"></Button>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
                </ListBox>
            <TextBlock Height="65" HorizontalAlignment="Left" Margin="12,116,0,0" Name="textBlock1" Text="Find Service :" VerticalAlignment="Top" Width="216" FontSize="36" />
        </Grid>
    </Grid>

Answer 1

It comes from poor / over-complicated layout architecture and the way your objects are positioning each other. Might try something like this for your DataTemplate

    <DataTemplate>

       <Grid ShowGridLines="True">
          <Grid.RowDefinitions>
             <RowDefinition Height="50"/>
             <RowDefinition Height="50"/>
             <RowDefinition Height="30"/>
             <RowDefinition Height="30"/>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="60"/>
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
<!-- Don't worry, you already had your 450 Width set on the parent -->
             <ColumnDefinition Width="*"/>
             <ColumnDefinition Width="Auto"/>
          </Grid.ColumnDefinitions>

             <TextBlock Name="Date" Text="{Binding Date}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
             <TextBlock Name="Creator" Grid.Row="1" Text="{Binding CreatorID}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
             <TextBlock Name="Type" Grid.Row="2" Text="{Binding Type}" FontSize="{StaticResource PhoneFontSizeSmall}"/>
             <TextBlock Name="Amount" Grid.Row="3" Text="{Binding Amount}" FontSize="{StaticResource PhoneFontSizeSmall}"/>
             <TextBlock Name="Description" Grid.Row="4" Text="{Binding Description}" FontSize="{StaticResource PhoneFontSizeSmall}" TextWrapping="Wrap"/>
             <Button Name="btn1" Click="btn_Click" Grid.Row="5" Grid.Column="1" Content="Apply" Height="70" Width="140" Margin="5,0"/>

          </Grid>

    </DataTemplate>

Also for the sake of cleaner xaml, remember things like Margin="0", Grid.Column="0", HorizontalAlignment="Left" etc. are default dependency properties, so no need to set them to each individual object. Even in the case you need to, you can apply them as Setters to the TargetType in the parent Object.Resources and avoid setting them to each individual object. Another tip would be, don't rely on a bunch of obfuscated random Margins etc to create your layout. It's best to do it right the first time instead of hunting down discrepancies between a bunch of inter-dependent little "fixes"

I didn't test it, but should work fine unless you got something else somewhere pushing stuff around. Hope this helps.

Answer 2

Use VerticalAlignment="Stretch" instead of VerticalAlignment="Top". This way the textblock will stretch to the height of the row.

Answer 3

Can you disable horizontal scrolling in your listbox control?

ScrollViewer.HorizontalScrollBarVisibility="Disabled"