AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Silverlight图表控件(二)

分类：Silverlight作者：编程之家

kagula

2011-10-30

内容简介

    在《Silverlight图表控件》文章的基础上，进一步以源码的形式展示如何进一步定制化Silverlight图表控件。

   代码很多地方懒的注释了（因为我每天很忙），本文假设你已经读过我写的《Silverlight图表控件》，并有C#基础。

   本文的代码调试环境参考《Silverlight图表控件》。

    本文包括两个例子:

    第一个例子，如何自定义矩形的颜色。

    第二个例子在第一个例子的基础上，展示了，在上一种数据源，如何添加一种颜色信息，又不和原来的颜色信息（源数据源）不冲突。

    根据例一和例二的源代码你可以很容易展示同一数据源的两种不同数据可视化的表达。

    每个例子包括四部份内容：

      [1]App.xaml中的代码主要功能：可视化风格的定义。

      [2]MainPage.xaml中的代码的主要功能：控件位置的摆放，和控件属性的设定。

      [3]MainPage.xaml.cs中的代码的主要功能：产生数据源，数据源同控件的绑定，子控件的添加，控件属性的设定。

      [4]辅助代码，例如记录结构的定义等等。

正文

例一：根据不同的学生显示不同颜色的矩形条，不同矩形条的高代表了不同学生的成绩;

第一步：新建Silverlight4 应用项目，修改App.xaml的代码如下

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
             x:Class="testChart3.App"
             >
    <Application.Resources>
        <Style x:Key="ColorByPreferenceColumn" targettype="charting:ColumnDataPoint">
            <Setter Property="Background" Value="DarkGray"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate targettype="charting:ColumnDataPoint">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid Background="{Binding FavoriteColor}">
                                <Rectangle>
                                    <Rectangle.Fill>
                                        <LinearGradientBrush>
                                            <GradientStop Color="#88ffffff" Offset="0"/>
                                            <GradientStop Color="#00ffffff" Offset="0.9"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Border BorderBrush="#ccffffff" BorderThickness="1">
                                    <Border BorderBrush="#00ffffff" BorderThickness="1"/>
                                </Border>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

第二步：修改MainPage.xaml的清单代码如下

<UserControl x:Class="testChart3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    
    <Grid x:Name="LayoutRoot" Background="White">
        <charting:Chart x:Name="FavoriteColorColumnChart" Title="Grades - By Favorite Color" Grid.Column="0">
        </charting:Chart>
    </Grid>
</UserControl>

第三步：MainPage.xaml.cs的代码清单如下 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using System.Windows.Controls.DataVisualization.Charting;

namespace testChart3
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            //准备数据
            List<Student> dynamicData = new List<Student>();
            dynamicData.Add(new Student("inuyasha",new SolidColorBrush(Color.FromArgb(255,200,255,255))) { Grade = 55.0 });
            dynamicData.Add(new Student("kagula",255))) { Grade = 79.0 });
            dynamicData.Add(new Student("kikoyo",200))) { Grade = 99.5 });
            dynamicData.Add(new Student("sagurajian",200))) { Grade = 27.5 });


            ColumnSeries cs = new ColumnSeries();
            cs.IndependentValueBinding = new System.Windows.Data.Binding("Name");//X轴变量名
            cs.DependentValueBinding = new System.Windows.Data.Binding("Grade");//Y轴变量名
            //如何变量名没有找到，绑定数据源后导致Chart控件显示空白。
            
            /*  ColorByPreferenceColumn网络在App.xaml里也可以这样定义
             *  <style x:Key="ColorByPreferenceColumn" targettype="charting:columnDataPoint">
             *    <Setter Property="Background" Value="{Binding FavoriteColor}"/>
             *  </style>
             */
            cs.DataPointStyle = Application.Current.Resources["ColorByPreferenceColumn"] as Style;//使用在XAML中定义的"ColorByPreferenceColumn"风格
            //如何风格没有找到，绑定数据源后导致Chart控件显示空白。
            
            cs.ItemsSource = dynamicData;//数据绑定
            
            
            FavoriteColorColumnChart.Series.Add(cs); //Series控件放入Chart控件中
        }
    }
}

其它代码：Student的定义

 public class Student : INotifyPropertyChanged
    {
        // Student's name
        public string Name { get; private set; }

        // Student's favorite color
        public Brush FavoriteColor { get; private set; }

        // Student's grade
        public double Grade
        {
            get { return _grade; }
            set
            {
                _grade = value;
                if(PropertyChanged!=null)
                    PropertyChanged(this,new PropertyChangedEventArgs("Grade"));
            }
        }
        private double _grade;

        // Student constructor
        public Student(string name,Brush favoriteColor)
        {
            Name = name;
            FavoriteColor = favoriteColor;
        }

        // INotifyPropertyChanged event
        public event PropertyChangedEventHandler PropertyChanged;
    }

运行效果图

例二：testChart4项目：根据学生成绩的好坏矩形的颜色分别为绿色、黄色、红色。

第一步：新建Silverlight4 应用项目，修改App.xaml的代码如下

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
             x:Class="testChart4.App"
             >
    <Application.Resources>
        <Style x:Key="ColorByGradeColumn" targettype="charting:ColumnDataPoint">
            <Setter Property="Background" Value="DarkGray"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate
                            targettype="charting:ColumnDataPoint">
                        <Border
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid Background="{Binding GradeColor}">
                                <Rectangle>
                                    <Rectangle.Fill>
                                        <LinearGradientBrush>
                                            <GradientStop Color="#77ffffff" Offset="0"/>
                                            <GradientStop Color="#00ffffff" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Border BorderBrush="#ccffffff" BorderThickness="1">
                                    <Border BorderBrush="#77ffffff" BorderThickness="1"/>
                                </Border>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

第二步：修改MainPage.xaml的清单代码如下 
<UserControl x:Class="testChart4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDeFinitions>
            <RowDeFinition/>
            <RowDeFinition Height="Auto"/>
        </Grid.RowDeFinitions>
        <Grid.ColumnDeFinitions>
            <ColumnDeFinition/>
        </Grid.ColumnDeFinitions>
        <charting:Chart Name="chart" Title="我的图表">
        </charting:Chart>        
        <Button
            Content="Randomize Grades"
            Click="RandomizeGradesClick"
            Grid.ColumnSpan="3"
            Grid.Row="1"/>
    </Grid>
</UserControl>

第三步：MainPage.xaml.cs的代码清单如下 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls.DataVisualization.Charting;
using System.Collections.ObjectModel;

namespace testChart4
{
    public partial class MainPage : UserControl
    {
        // Collection of Student data objects
        private ObservableCollection<Student> _students = new ObservableCollection<Student>();

        // Collection of Studentviewmodel view model objects
        private ObservableCollection<Studentviewmodel> _studentviewmodels = new ObservableCollection<Studentviewmodel>();
        
        // Random number generator
        private Random _random = new Random();

        public MainPage()
        {
            InitializeComponent();

            //准备数据
            _students.Add(new Student("inuyasha",new SolidColorBrush { Color = Colors.Blue }));
            _students.Add(new Student("kagula",new SolidColorBrush { Color = Colors.Blue }));
            _students.Add(new Student("kikyoyo",new SolidColorBrush { Color = Colors.Blue }));
            _students.Add(new Student("sagulajian",new SolidColorBrush { Color = Colors.Blue }));

            foreach (Student _student in _students)
            {
                _studentviewmodels.Add(new Studentviewmodel(_student));
            }

            // Assign random grades
            AssignRandomGrades();

            ColumnSeries cs = new ColumnSeries();
            cs.IndependentValueBinding = new System.Windows.Data.Binding("Student.Name");//X轴变量名
            cs.DependentValueBinding = new System.Windows.Data.Binding("Student.Grade");//Y轴变量名
            cs.DataPointStyle = Application.Current.Resources["ColorByGradeColumn"] as Style;//使用在XAML中定义的"ColorByPreferenceColumn"风格
            cs.ItemsSource = _studentviewmodels;//数据绑定
            IAxis valueAxis = new Linearaxis
            {
                Orientation = AxisOrientation.Y,ShowGridLines = true,Minimum = 0,Maximum = 100,Title = "考试成绩"
            };
            chart.Axes.Add(valueAxis);
            chart.Series.Add(cs); //Series控件放入Chart控件中
        }
        
        // Assign random grades to each Student object
        private void AssignRandomGrades()
        {
            foreach (var student in _students)
            {
                student.Grade = Math.Round((_random.NextDouble() * 70) + 30,1);
            }
        }

        // Handle clicks on the "Randomize Grades" button
        private void RandomizeGradesClick(object sender,RoutedEventArgs e)
        {
            AssignRandomGrades();
        }
    }
}


其它代码：Studentviewmodel的定义

 public class Studentviewmodel : INotifyPropertyChanged
    {
        // Student object
        public Student Student { get; private set; }

        // Color representing Student's Grade
        public Brush GradeColor { get; private set; }

        // Studentviewmodel constructor
        public Studentviewmodel(Student student)
        {
            Student = student;
            student.PropertyChanged += new PropertyChangedEventHandler(HandleStudentPropertyChanged);
        }

        // Detect changes to the Student's grade and update GradeColor
        void HandleStudentPropertyChanged(object sender,PropertyChangedEventArgs e)
        {
            if ("Grade" == e.PropertyName)
            {
                if (Student.Grade < 50)
                {
                    GradeColor = new SolidColorBrush { Color = Colors.Red };
                }
                else if (Student.Grade < 80)
                {
                    GradeColor = new SolidColorBrush { Color = Colors.Yellow };
                }
                else
                {
                    GradeColor = new SolidColorBrush { Color = Colors.Green };
                }
                if(PropertyChanged!=null)
                    PropertyChanged(this,new PropertyChangedEventArgs("GradeColor"));
            }
        }

        // INotifyPropertyChanged event
        public event PropertyChangedEventHandler PropertyChanged;
    }

运行效果图

点击“Randomize Grades”按钮后，会重新生成图表。

建议你完成本文后再参考资料[1]以不同的代码风格再实现一遍。

参考资料

[1]《Columns of a different color [Customizing the appearance of Silverlight charts with re-templating and MVVM]》

http://blogs.msdn.com/b/delay/archive/2009/02/04/columns-of-a-different-color-customizing-the-appearance-of-silverlight-charts-with-re-templating-and-mvvm.aspx

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

c# – 如何在Silverlight 4中绑定ContextMenu的IsEnabled属性？
如何在Silverlight4(XAML)中绑定IsEnabled属性？我试过简单的IsEnabled=“{BindingABC}”,但这不起作用–MenuItem总是启用.提前感谢您的线索！干杯编辑：有趣的是,当设置Mode=TwoWay时,绑定似乎有效.但是,在菜单项上...
c# – 使用Silverlight / windows手机式控件设置我的.Net桌面应用程序GUI
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,因为我确信即使是一个c#人也可以使用类似的.net实现来回答这个问题).我申请的简短说明：我的桌面应用程序将仅在win平台上运行,使用vb.net,它是一个简单的网...
c# – Silverlight：将服务调用和文件处理移动到后台线程
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如果它在UIThread上,如何将文件请求和ProcessFile()移动到单独的线程？varxClient=newServiceReference1.Service1SoapClient();xClient.Retrieve_File_Compl...
c# – 如何从ASP.NET / Silverlight开发人员成为sharepoint开发人员？
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不在办公室使用sharepoint.所以不知道如何开始.这些是我的新手问题>学习共享点值得努力吗？>学习sharepoint的资源在哪里？>我是否应该考虑开发哪些...
c# – Windows Phone 8 – 将列表保存到IsolatedStorage
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明：Thecollectiondatacontracttype‘System.Collections.Generic.Listcannotbedeserializedbecauseitdoesnothaveapublicparameterlessconstructor.Addingapu...
c# – 在XAML中使用绑定设置样式
我需要根据Silverlight中的某些配置值设置给定控件的Style.我想有可能从两种可用的样式(静态资源)中选择一个控件样式.我试图做一些像：<TextBoxStyle="{BindingABC}"/>哪里publicstringABC{get{retu...
Android设备上的Silverlight / Moonlight
我刚买了第一台Android设备,我喜欢它…我也很喜欢你可以创建自己的应用程序并随意分发它们.我已经阅读了一些关于Monodroid的内容,而且显然微软希望将Silverlight放在这些设备上,尽管没有太多关于它们的信息……但是M...
c# – 从silverlight应用程序访问SQL Server数据库
我们的ASP.NET网站允许用户执行各种查询,并根据从数据库查询的结果显示网络图(如UML图).目前,我们正在生成一个位图并显示它.但由于我们需要支持允许用户以交互方式显示/隐藏某些块的功能,因此我们计划使用Silverligh...
c# – 自定义Silverlight启动画面导致白屏死机
我正在开发一个Silverlight4应用程序,我已经创建了一个自定义的启动画面.乍一看,自定义启动画面运行良好–非常好.几天后,我开始注意到闪屏不再显示,屏幕仍然是空白.这似乎只发生在我打开多个指向同一个应用程序的IE选...
c# – 使用带偏移的RotateTransform问题旋转图像
这是我的XAML：<ImageVerticalAlignment="Center"HorizontalAlignment="Center"Source="{BindingInput,Converter={StaticResourceByteArrayToBitmapConverter}}"><Image.Ren...
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native