SilverLight之路（十二）
上一节说了汇总行的模拟实现，效果还不错，但还是有些不完美，比如在表格的最右侧，垂直滚动条的地方就会出现宽度不同步，且两个表格区分太明显，如图
想想实现的原理，就算我们设置了表格的宽度来同步，但垂直滚动条的问题还是解决不了，毕竟是在两个表格中实现的。
想想我们web中的实现，能不能在外面加一个”DIV”呢？以容器的滚动条来代替表格的滚动条，那样又会出现锁行销列的问题，不可行！不过这个方案给我们提供了另外一种思路，既然不能在外面加，那我在里面加不就可以了吗？利用sl强大的控件模板，我们在表格内部加上我们需要的内容，呵呵，这里，就是在gridQuotes表格中把我们的dgSummary表格塞进去。下图是我加完后的结果，可以与原始模板做对比。
在这里，我们可以清楚的看到datagrid的模板组成，发挥想像可以做出各种定制的效果，这就是控件模板的威力。回到我们的项目，我们注意到RowsPresenter这一个元素，它就是我们的主要表格区域，而下面的VerticalScrollbar就是指右侧的垂直滚动条，他们组合在一个grid中，并且位于同一行中，那我们就在原来RowsPresenter的位置入手（注意：上图是我已经加完dgSummary后的结果），加入一个Grid，上下两行，上面是RowsPresenter，下面是我们加入的dgSummary，然后想下我们的布局，与上一节中的反过来了，我们需要设置dgSummary的水平滚动条高度为0（设置不可见的话就不好用了），把gridQuotes的水平滚动条再重新设置出来。我们的ValueChange事件也要反过来，从dgSummary上去掉，加到gridQuotes上。利用上一节介绍的方法来进行相应的修改。
同步列宽：
private
DataGrid FindSummaryDataGrid()
{
FrameworkElement fe
=
this
.gridQuotes
as
FrameworkElement;
DataGrid gd
=
fe.GetVisualDescendants()
.OfType
<
DataGrid
>
()
.Where(s
=>
s.Name
==
"
dgSummary1
"
)
.SingleOrDefault();
return
gd;
}
void
gridQuotes_LayoutUpdated(
object
sender, EventArgs e)
{
DataGrid gd
=
FindSummaryDataGrid();
gd.Columns[
0
].Width
=
new
DataGridLength(
this
.gridQuotes.Columns[
0
].ActualWidth
+
this
.gridQuotes.Columns[
1
].ActualWidth
+
this
.gridQuotes.Columns[
2
].ActualWidth
+
this
.gridQuotes.Columns[
3
].ActualWidth
+
this
.gridQuotes.Columns[
4
].ActualWidth);
for
(
int
i
=
1
; i
<
gd.Columns.Count; i
++
)
{
gd.Columns[i].Width
=
new
DataGridLength(
this
.gridQuotes.Columns[i
+
4
].ActualWidth);
}
}
同步水平滚动条
private
void
HorizontalScrollbar_ValueChanged(
object
sender, System.Windows.RoutedPropertyChangedEventArgs
<
double
>
e)
{
DataGrid gd
=
FindSummaryDataGrid();
gd.Scroll(DataGridScrollExtensions.ScrollMode.Horizontal, e.NewValue);
}
因为我们为了加入汇总表格，已经有了自定义的模板，所以可以直接在模板内部给水平滚动条注册事件。
最终，我们的效果如图
至此，行情的主体列表已经基本完成了，接下来看一个简单的详情页，比如我们在行情列表里点击某只基金的名称时，可以在一个新的窗口中显示这只基金的详细信息，比如净值走势，这个页面我没有加太多的信息，主要是想实现一下走势图，如
利用我们第五节中介绍的Chart控件，修改Series类型为LineSeries，然后绑定就行了，没有太大区别，代码如
LineSeries ls
=
this
.chart1.Series[
0
]
as
LineSeries;
ls.DependentValueBinding
=
new
System.Windows.Data.Binding(
"
Dwjz
"
);
ls.IndependentValueBinding
=
new
System.Windows.Data.Binding(
"
FSRQ
"
);
ls.ItemsSource
=
listJZ.Take(
100
);
不过这里有一个地方要注意，如果按barseries那样，先设置itemsource会报No suitable axis is available for plotting the dependent value.错误。
我们注意到，Chart里面的Series有一个AnimationSequence属性，它可以设置一些动画效果来展示数据，我本想在这里用它实现类似如动态画出曲线的效果，但失败了，网上找到解释说LineSeries不支持Animation，我它的Demo中，我只看到有柱图与饼图有动画效果，其它的都没有见到，不知道是不是只有柱图与饼图才有这个功能。
再介绍一个Tookit中的控件BusyIndicator，它用来显示一个等待窗口，类似之前我们用ChildWindow模拟的效果，但它可以有自己的区域，因为它是一个内容控件，我们可以把需要的控件放到其中，实现效果如
显示全部按钮事件如下
void
btnShowAll_Click(
object
sender, RoutedEventArgs e)
{
this
.biWaiting.IsBusy
=
true
;
ThreadPool.QueueUserWorkItem((state)
=>
{
Dispatcher.BeginInvoke(()
=>
{
LineSeries ls
=
this
.chart1.Series[
0
]
as
LineSeries;
ls.ItemsSource
=
listJZ;
this
.biWaiting.IsBusy
=
false
;
});
});
}
关于BusyIndicator的详细用法，请参考Tookit Demo