Silverlight学习-创建一个信息系统中趋势曲线图库(一)

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

笔者从事企业信息管理系统的构建工作,展示企业数据时,一是采用表单方式,传统的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);

本文来自guxch博客,转载请标明出处:http://blog.csdn.net/guxch/archive/2011/06/24/6564847.aspx


相关阅读:
Top