上一节说了汇总行的模拟实现，效果还不错，但还是有些不完美，比如在表格的最右侧，垂直滚动条的地方就会出现宽度不同步，且两个表格区分太明显，如图
想想实现的原理，就算我们设置了表格的宽度来同步，但垂直滚动条的问题还是解决不了，毕竟是在两个表格中实现的。
想想我们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