SilverLight之路(十四)

来源:转载

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

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

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

由于列表会次使用,这里把它形成一个UserControlView 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,如,这样在使用这个插件的时候,就可以给它指定一个url,或者设置它的innerhtml了。网上好多种类似的插件,但实现原理都是一样的,设置windowless属性使sl的object不在最顶层显示,这样再设置一个html元素(如p等)浮动到sl上面对应的位置,以此来显示html。但这个解决办法问题更多,先是设置windowless后sl中不能输入中文了,然后在滚动窗口时屏幕会闪烁,再有切换目标时焦点的控制等,总之,效果很不理想。这个方案也被我放弃了。

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

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

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

 

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

 

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

保留空格

 

减少行距

 

最终对比效果如下

 

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

本文来自第八颗流星的博客,原文地址:http://www.cnblogs.com/meteortent/archive/2011/06/28/2091473.html


分享给朋友:
您可能感兴趣的文章:
随机阅读: