Silverlight学习－创建一个信息系统中趋势曲线图库（一）

    笔者从事企业信息管理系统的构建工作，展示企业数据时，一是采用表单方式，传统的Table元素即可；二是采用曲线（图形）方式，这种方式在存在生产控制数据的系统中是必需的。关于曲线（图形）在浏览器中的显示方式，笔者曾写过一篇文章（发表于某学校学报），现简述如下：

1.采用图片方式，简单，性能不好，对浏览器无任何要求。

2.采用浏览器扩展功能，如SVG,VRML等，对浏览器有一定要求。近来HTML5的出现有可能改变这种标准不统一的状况，如果HTML5能被所有浏览器完整支持，这种方法有可能成为一种较好的方法。

3.采用插件方式，如flash,silverlight或其他第三方插件，对浏览器有一定要求，性能最好。sohu,sina中的股票实时信息就采用flash插件显示。

    本文将采用Silverlight+C#创建一个可用于企业信息管理系统的曲线显示模块，并兼顾Silverlight的学习笔记。

    由于曲线的显示都是动态生成，所以与一般的Silverlight应用－构建很炫的显示界面－完全不同，本文将不涉及例如动画之类的内容。

    先来试试动态添加Silverlight控件吧，它是曲线显示的基础。

    以下代码是曲线显示将用到的几种元素(线，矩形，文字，tooltip)的动态创建方式。

 

public MainPage() { InitializeComponent(); canvas1.Clip = new RectangleGeometry() { Rect = new Rect(0,0,200,200)}; } private void button1_Click(object sender, RoutedEventArgs e) { Line line1 = new Line(); line1.Stroke = new SolidColorBrush(Colors.Blue); line1.StrokeThickness = 4.0; line1.X1 = 10; line1.X2 = 100; line1.Y1 = 60; line1.Y2 = 500; canvas1.Children.Add(line1); Label lbl1 = new Label(); lbl1.Content = "你好 World, I'm coming"; lbl1.Margin = new Thickness(50, 50, 0, 0); lbl1.Width = 100.0; lbl1.FontSize = 12.0; lbl1.BorderBrush = new SolidColorBrush(Colors.Gray); lbl1.BorderThickness = new Thickness(1.0); ToolTip tooltip1 = new ToolTip(); tooltip1.VerticalOffset = 10.0; tooltip1.HorizontalOffset = 10.0; tooltip1.Content = "This is a tooltip"; ToolTipService.SetToolTip(lbl1, tooltip1); canvas1.Children.Add(lbl1); } private void button2_Click(object sender, RoutedEventArgs e) { Rectangle rc = new Rectangle(); rc.Width = 50; rc.Height = 50; rc.Fill = new SolidColorBrush(Colors.Red); rc.SetValue(Canvas.LeftProperty, 100.0); canvas1.Children.Add(rc); canvas1.Background = new SolidColorBrush(Color.FromArgb(200, 200, 255, 255)); }

    将以上代码贴到Silverlight后置代码类中，注意有两个button触发事件，所有动态元素均创建到canvas1中。

    Line的创建较简单，注意Stroke相关属性的设置，它类似于画线的笔。Rectangle的创建有一个奇怪的地方是似乎不能直接设置其左上角的位置，而采用rc.SetValue(Canvas.LeftProperty, 100.0)这种方式。文字显示控件Label的创建应注意它宽度、高度的设置，如设置不好，可能发生裁剪，还是不设为好，可自动变化。Tooltip的设置需要通过ToolTipService（还为搞清楚为什么），例子中给文字加上了Tooltip。

    代码中给canvas1设置了一个矩形裁剪框，则超过200×200的范围将不会显示，当然，裁剪区域也可以不限于矩形，将canvas.clip设置成不同的RectangleGeometry即可。企业管理上用到的一般是需要矩形裁剪的。

    最后说说删除UI元素，比较简单，上面代码中没有涉及。删除对象有两种方式，以Index或Name为索引定位对象，再删除。需要注意的是元素的Index有可能变化，所以不可靠，还是采用Name定位吧。先设置元素的Name值，例如 line1.Name = "Line1"，再采用如下代码即可删除。

           object ob = canvas1.FindName("Line1") ;
            if (ob != null)  canvas1.Children.Remove((UIElement)ob);