Silverlight之路(十二)

来源:互联网 时间:1970-01-01

上一节说了汇总行的模拟实现,效果还不错,但还是有些不完美,比如在表格的最右侧,垂直滚动条的地方就会出现宽度不同步,且两个表格区分太明显,如图

 

想想实现的原理,就算我们设置了表格的宽度来同步,但垂直滚动条的问题还是解决不了,毕竟是在两个表格中实现的。

想想我们web中的实现,能不能在外面加一个”p”呢?以容器的滚动条来代替表格的滚动条,那样又会出现锁行销列的问题,不可行!不过这个方案给我们提供了另外一种思路,既然不能在外面加,那我在里面加不就可以了吗?利用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

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


相关阅读:
Top