Windows Phone 7中文本块中文本的格式设置

Question

I am have a text which is has bold, underline and italic html characters. For example

<b> hello<b> how are <i>you</i>. I am <u>fine</u>

I have to show it in formatted form in a textblock on WP7. I have a listbox like this

<ListBox x:Name="LBayaDetail" Loaded="LBayaDetail_Loaded" Margin="6,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemTemplate>
                        <DataTemplate>
                        <Grid x:Name="ayaContent" Margin="0,6,0,0" Hold="ayaContent_Hold" Tap="ayaContent_Tap" Loaded="ayaContent_Loaded" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="6"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="80" />
                                <ColumnDefinition Width="6" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid Background="#FFC5AC88" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <TextBlock x:Name="ayaIndex" Text="{Binding aya}" FontSize="36" Margin="0" FontWeight="Bold" HorizontalAlignment="Center" />
                                <StackPanel VerticalAlignment="Bottom"  HorizontalAlignment="Center">
                                <Image Source="{Binding BookmarkImage}" HorizontalAlignment="Center" Width="48" Height="48" Margin="0,0,0,12" />
                                    <Image Source="{Binding NoteImage}" HorizontalAlignment="Center" Width="48" Height="48" Margin="0,0,0,12" />
                                    <Image Source="{Binding TagImage}" HorizontalAlignment="Center" Width="48" Height="48" Margin="0,0,0,12" />
                                </StackPanel>
                            </Grid>
                            <Grid Grid.Row="1" Background="#FFC5AC88" x:Name="Media" Tap="Media_Tap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <Image Source="/Images/Media-Play(1).png" Width="30" Height="30" HorizontalAlignment="Center" Margin="12,0,0,0" VerticalAlignment="Top" />
                            </Grid>
                            <!--ini pak dimana tempat untuk ayat dan translasi-->
                            <Grid  Grid.Column="2" Background="#FFAC9574" Margin="6,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <TextBlock x:Name="aya" TextWrapping="Wrap" Text="{Binding text}" HorizontalAlignment="Right" FontFamily="/Fonts/me_quran2.ttf#me_quran2" FontSize="{Binding FontSizeAya}" Foreground="Black" Margin="24,0,12,-12" TextAlignment="Right" Visibility="{Binding visibility1}" />
                            </Grid>
                            <Grid Grid.Column="2" Grid.Row="1" Margin="6,0,0,0" Background="#FFAC9574" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <StackPanel>

                                    <TextBlock Visibility="{Binding visibility2}" x:Name="translation" Text="{Binding translation}" TextWrapping="Wrap" HorizontalAlignment="Right" FontFamily="/Fonts/ARIALUNI.TTF#Arial Unicode MS" FontSize="{Binding FontSizeTranslation}" Foreground="#FF5D2A07" Margin="12,6,6,0" />
                                    <TextBlock Visibility="{Binding visibility3}" x:Name="translation2" Text="{Binding translation2}" TextWrapping="Wrap" HorizontalAlignment="Right" FontFamily="/Fonts/ARIALUNI.TTF#Arial Unicode MS" FontSize="{Binding FontSizeTranslation}" Foreground="DarkGreen" Margin="12,20,6,0" />
                                </StackPanel>
                            </Grid>
                            <!-- -->
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

I fetch from database like

App.Listxyz = (Application.Current as App).db.SelectList<Aya>(strSelect);

And assign it to Listbox like this

LBayaDetail.ItemsSource = App.ListAyaBySurah;

And shows the text as it is and do not format it which is obvious. I searched for it and I was able to format individual textblock by using "RUN" but I am unable to do it in listbox. I also tried to use HTMLTextBlock but it also doesn't format the text and shows it like this

Hi
How 
Are 
You

Any help will be much appreciated that how do I format a textblock with different text decorations.

Thanks

Answer 1

You should place a grid and a stackpanel inside the listbox. Something like the following

                <Grid>          
                    <StackPanel Grid.Column="1">
                        <TextBlock Padding="0,5,0,2" TextWrapping="Wrap">
                            <Run Text="{Binding test}" FontWeight="Bold" /> <Run Text="{Binding test2}" />
                            <LineBreak/>
                            <Run Text="{Binding test3}" />
                        </TextBlock>
                    </StackPanel>
                </Grid>

Answer 2

One way to do that is:

public class FormattedText
{
    public string Text { get; set; }
    public bool IsBold { get; set; }
    public bool IsItalic { get; set; }
    public bool IsUnderlined { get; set; }
}

Have a method that converts the HTML you stored in your db to a list of the class you have above

example: From this:

<b> hello<b> how are <i>you</i>. I am <u>fine</u>

to this:

1. First element:
   
   • Text = "hello"
   • IsBold = true
   • skip what not needed since bool default value is false
2. Second element
   
   • Text =" how are"
   • skip what not needed since bool default value is false
3. Third item
   • Text ="you"
   • IsItalic=true;
   • skip what not needed since bool default value is false and so on....

and then have another method that from that list creates a list of Runs to be added to your TextBlock or maybe create a custom TextBlock witch take the List<FormattedText> from DataContext and process it by adding the Run elements to self