SilverLight之路（十四）

在我们的项目中，经常会遗漏一些看似简单，但实现开发中会遇到很多的问题的地方，比如HTML格式的显示，比如图片等文件的上传，比如下拉列表的自动完成等，接下来我们就来看看这几个功能的实现。

“投资策略”模块，会以一些类似新闻系统中的文章列表与内容显示的功能来实现，在web中这太简单不过了，Repeater或DataList形成列表，内容直接读取数据库数据，只要是HTML格式的数据完全可以正常呈现（包含特殊代码效果的除外），这里涉及两个知识点，一是列表，二是HTML。

列表的实现，前面我们已经介绍过了ItemsControl，用它来实现类似ASP.net中的Repeater或DataList的功能很好办，因为之前介绍过，这里我直接上代码了

由于列表会次使用，这里把它形成一个UserControl

View Code

<Grid x:Name="LayoutRoot">

                   <Border BorderBrush="White" BorderThickness="1" CornerRadius="10,10,0,0">

                            <Grid>

                                     <Grid.RowDefinitions>

                                               <RowDefinition Height="Auto"/>

                                               <RowDefinition Height="Auto"/>

                                     </Grid.RowDefinitions>

                                     <TextBlock HorizontalAlignment="Left" Margin="8,8,0,8" TextWrapping="Wrap" Text="{Binding Title}" Foreground="#FFF90404" VerticalAlignment="Center"/>

                                     <ItemsControl x:Name="ic1" Grid.Row="1" Foreground="#FFFFFDFD" ItemsSource="{Binding ArticleInfoList}">

                                               <ItemsControl.Resources>

                                                        <DataTemplate x:Key="DataTemplate1">

                                                                 <Grid>

                                                                           <Grid.ColumnDefinitions>

                                                                                    <ColumnDefinition Width="0.473*"/>

                                                                                    <ColumnDefinition Width="0.527*"/>

                                                                           </Grid.ColumnDefinitions>

                                                                           <HyperlinkButton Content="{Binding Title}" HorizontalAlignment="Left" VerticalAlignment="Center" Click="HyperlinkButton_Click" Tag="{Binding}"/>

                                                                           <TextBlock TextWrapping="Wrap" Text="{Binding zhxgrq}" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White"/>

                                                                 </Grid>

                                                        </DataTemplate>

                                              </ItemsControl.Resources>

                                               <ItemsControl.ItemTemplate>

                                                        <StaticResource ResourceKey="DataTemplate1"/>

                                               </ItemsControl.ItemTemplate>

                                     </ItemsControl>

                            </Grid>

                   </Border>

         </Grid>

控件以一个Border实现半圆角边框，并提供一个Title属性设置标题，其中的ItemsControl有两列，一个标题，一个时间，具体格式可以在里面的样式中自行调节，以上代码效果如

当点击某一文章标题时，显示文章内容，内容页简单的绑定，一个标题，一个内容，如果需要还可以加上对应的来源，发布时间，作者姓名等，但问题来了！我们项目是在原web项目基础上进行的，数据库也是使用原来的，而原来是web的站点项目，所以后台维护的文章内容中包含了大量的html代码，这在网页中是没问题的，但如果不做任何处理就直接绑定到sl的控件中的话，就会出现如下效果

内容中充斥着大量html格式代码，这很头痛，我期望RickTextBox可以支持html，但失望了，毕竟sl中的流文本不同与传统的html，那我们怎么处理呢？

Search好一阵子，三种解决办法

1、使用WebBrower控件。但很可惜，只能运行在OOB模式中，SL4.0中也是如此，据说ms也没打算5.0里支持非OOB下的WebBrower，于是我直接放弃了。

2、使用一个名叫HTMLHoster的插件，并设置SL在宿主页面的windowless属性为true，如<param name="windowless" value="true" />，这样在使用这个插件的时候，就可以给它指定一个url，或者设置它的innerhtml了。网上好多种类似的插件，但实现原理都是一样的，设置windowless属性使sl的object不在最顶层显示，这样再设置一个html元素（如div等）浮动到sl上面对应的位置，以此来显示html。但这个解决办法问题更多，先是设置windowless后sl中不能输入中文了，然后在滚动窗口时屏幕会闪烁，再有切换目标时焦点的控制等，总之，效果很不理想。这个方案也被我放弃了。

3、解析html，然后转换成相应的sl中的流文本。这个方案貌似工作量很大啊，但好像也没有更好的办法了，那就找找网上有没有牛人写的现成的，呵呵。找到一个，虽然只支持少数几个标记（如空格，回车），但对于一般的文章来说也差不多了，而且它的代码你可以根据需要自己再修改修改。

HtmlTextBlock。有需要的朋友可以网上自己下载一个，也可以给我留言。这里我说一下其中我修改时遇到的两个问题。

默认情况下，它会分别以xml与Dom两种形式进行解析，在xml解析过程中，如果遇到类似空格（ ）这样的代码时就会出错，因为在xml中&算是特殊符号，如果想进行处理，就要指定xml中的实体定义，如下代码，在创建xml之前进行定义

这样运行起来会有一个错误，它会提示要先设置XmlReaderSettings，照做就行了，如

这样运行起来后，会发现行间距很大，而且除第一行外，其它行前面的空格都被忽略了，于是我们继续在代码中跟踪，在ParseAndSetSpecifiedText函数中下面的case分支中会有处理的地方，进行相应的修改就可以了

保留空格

减少行距

最终对比效果如下

如果在使用中遇到具体问题，还需要具体分析修改。