Windows Phone 7 chart图表编程

最新推荐文章于 2022-06-29 09:08:28 发布

yaosiming2011

最新推荐文章于 2022-06-29 09:08:28 发布

阅读量780

点赞数

文章标签： windows phone 编程 setter silverlight class 图形

利用Silverlight自带的chart组件可以很轻易地编写出各种常用的图表图形。

组件所在命名空间：
System.Windows.Controls.DataVisualization.Charting

在System.Windows.Controls.DataVisualization.Charting空间下可以定义下面7种图形
1、LineSeries 线性图
2、PieSeries 饼图
3、ColumnSeries 柱形图
4、AreaSeries 区域图
5、BarSeries 条状图
6、ScatterSeries 散点图
7、BubbleSeries 气泡图

下面通过静态绑定的方法用Microsoft.Phone.Control.Panorama全景视图控件展现一下LineSeries、PieSeries、ColumnSeries、AreaSeries四种图形。

页面文件省略了重复的代码

View Code

      
      
       
       <
       
       phone:PhoneApplicationPage 
       
       xmlns
       
       ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       
       
                            xmlns:x
       
       ="http://schemas.microsoft.com/winfx/2006/xaml"
       
       
                            xmlns:phone
       
       ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
       
       
                            xmlns:shell
       
       ="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
       
       
                            xmlns:charting
       
       ="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
       
       
                            xmlns:local
       
       ="clr-namespace:DataVisualizationOnWindowsPhone"
       
       
                            xmlns:d
       
       ="http://schemas.microsoft.com/expression/blend/2008"
       
       
                            xmlns:mc
       
       ="http://schemas.openxmlformats.org/markup-compatibility/2006"
       
       
                            xmlns:DataVisualization
       
       ="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
       
       
                            xmlns:controls
       
       ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
       
       
                            x:Class
       
       ="DataVisualizationOnWindowsPhone.MainPage"
       
       
                            SupportedOrientations
       
       ="PortraitOrLandscape"
       
       
                            Orientation
       
       ="Portrait"
       
       
                            mc:Ignorable
       
       ="d"
       
       
                            d:DesignWidth
       
       ="480"
       
       
                            d:DesignHeight
       
       ="800"
       
       
                            shell:SystemTray.IsVisible
       
       ="False"
       
       >
       
       

    
       
       <
       
       phone:PhoneApplicationPage.Resources
       
       >
       
       
        
       
       <!--
       
        Data 
       
       -->
       
       
        
       
       <
       
       local:Activities 
       
       x:Key
       
       ="Activities"
       
        
       
       />
       
       
    
       
       </
       
       phone:PhoneApplicationPage.Resources
       
       >
       
       

    
       
       <
       
       phone:PhoneApplicationPage.FontSize
       
       >
       
       
        
       
       <
       
       StaticResource 
       
       ResourceKey
       
       ="PhoneFontSizeNormal"
       
        
       
       />
       
       
    
       
       </
       
       phone:PhoneApplicationPage.FontSize
       
       >
       
       
    
       
       <
       
       phone:PhoneApplicationPage.Foreground
       
       >
       
       
        
       
       <
       
       StaticResource 
       
       ResourceKey
       
       ="PhoneForegroundBrush"
       
        
       
       />
       
       
    
       
       </
       
       phone:PhoneApplicationPage.Foreground
       
       >
       
       

    
       
       <
       
       Grid
       
       >
       
       
        
       
       <
       
       Grid.RowDefinitions
       
       >
       
       
            
       
       <
       
       RowDefinition 
       
       />
       
       
        
       
       </
       
       Grid.RowDefinitions
       
       >
       
       

        
       
       <!--
       
        Title 
       
       -->
       
       
        
       
       <
       
       controls:Panorama 
       
       Title
       
       ="图表控件"
       
         
       
       >
       
       
            ……
            
       
       <
       
       controls:PanoramaItem 
       
       Header
       
       ="饼图"
       
       >
       
       
                
       
       <
       
       Grid
       
       >
       
       
                    
       
       <
       
       charting:Chart 
       
       x:Name
       
       ="pieChart"
       
       
                                    Style
       
       ="
       
       {StaticResource PhoneChartStyle}
       
       "
       
       
                                    Template
       
       ="
       
       {StaticResource PhoneChartPortraitTemplate}
       
       "
       
        Margin
       
       ="0,0,-7,0"
       
       >
       
       
                        
       
       <
       
       charting:Chart.Palette
       
       >
       
       
                            
       
       <
       
       DataVisualization:ResourceDictionaryCollection
       
       >
       
       
                                
       
       <
       
       ResourceDictionary
       
       >
       
       
                                    
       
       <
       
       Style 
       
       x:Key
       
       ="DataPointStyle"
       
       
                                           TargetType
       
       ="Control"
       
       >
       
       
                                        
       
       <
       
       Setter 
       
       Property
       
       ="Background"
       
       >
       
       
                                            
       
       <
       
       Setter.Value
       
       >
       
       
                                                
       
       <
       
       RadialGradientBrush 
       
       MappingMode
       
       ="Absolute"
       
       >
       
       
                                                    
       
       <
       
       GradientStop 
       
       Color
       
       ="Blue"
       
       
                                                                  Offset
       
       ="0.9"
       
        
       
       />
       
       
                                                    
       
       <
       
       GradientStop 
       
       Color
       
       ="DarkBlue"
       
       
                                                                  Offset
       
       ="1.0"
       
        
       
       />
       
       
                                                
       
       </
       
       RadialGradientBrush
       
       >
       
       
                                            
       
       </
       
       Setter.Value
       
       >
       
       
                                        
       
       </
       
       Setter
       
       >
       
       
                                        
       
       <
       
       Setter 
       
       Property
       
       ="BorderBrush"
       
       
                                                Value
       
       ="Transparent"
       
        
       
       />
       
       
                                    
       
       </
       
       Style
       
       >
       
       
                                
       
       </
       
       ResourceDictionary
       
       >
       
       
                                
       
       <
       
       ResourceDictionary
       
       >
       
       
                                    
       
       <
       
       Style 
       
       x:Key
       
       ="DataPointStyle"
       
       
                                           TargetType
       
       ="Control"
       
       >
       
       
                                        
       
       <
       
       Setter 
       
       Property
       
       ="Background"
       
       >
       
       
                                            
       
       <
       
       Setter.Value
       
       >
       
       
                                                
       
       <
       
       RadialGradientBrush 
       
       MappingMode
       
       ="Absolute"
       
       >
       
       
                                                    
       
       <
       
       GradientStop 
       
       Color
       
       ="Yellow"
       
       
                                                                  Offset
       
       ="0.8"
       
        
       
       />
       
       
                                                    
       
       <
       
       GradientStop 
       
       Color
       
       ="Orange"
       
       
                                                                  Offset
       
       ="1.0"
       
        
       
       />
       
       
                                                
       
       </
       
       RadialGradientBrush
       
       >
       
       
                                            
       
       </
       
       Setter.Value
       
       >
       
       
                                        
       
       </
       
       Setter
       
       >
       
       

                                        
       
       <
       
       Setter 
       
       Property
       
       ="BorderBrush"
       
       
                                                Value
       
       ="Transparent"
       
        
       
       />
       
       
                                    
       
       </
       
       Style
       
       >
       
       
                                
       
       </
       
       ResourceDictionary
       
       >
       
       
                                
       
       <
       
       ResourceDictionary
       
       >
       
       
                                    
       
       <
       
       Style 
       
       x:Key
       
       ="DataPointStyle"
       
       
                                           TargetType
       
       ="Control"
       
       >
       
       
                                        
       
       <
       
       Setter 
       
       Property
       
       ="Background"
       
       >
       
       
                                            
       
       <
       
       Setter.Value
       
       >
       
       
                                                
       
       <
       
       RadialGradientBrush 
       
       MappingMode
       
       ="Absolute"
       
       >
       
       
                                                    
       
       <
       
       GradientStop 
       
       Color
       
       ="Red"
       
       
                                                                  Offset
       
       ="0.8"
       
        
       
       />
       
       
                                                    
       
       <
       
       GradientStop 
       
       Color
       
       ="DarkRed"
       
       
                                                                  Offset
       
       ="1.0"
       
        
       
       />
       
       
                                                
       
       </
       
       RadialGradientBrush
       
       >
       
       
                                            
       
       </
       
       Setter.Value
       
       >
       
       
                                        
       
       </
       
       Setter
       
       >
       
       

                                        
       
       <
       
       Setter 
       
       Property
       
       ="BorderBrush"
       
       
                                                Value
       
       ="Transparent"
       
        
       
       />
       
       
                                    
       
       </
       
       Style
       
       >
       
       
                                
       
       </
       
       ResourceDictionary
       
       >
       
       
                                
       
       <
       
       ResourceDictionary
       
       >
       
       
                                    
       
       <
       
       Style 
       
       x:Key
       
       ="DataPointStyle"
       
       
                                           TargetType
       
       ="Control"
       
       >
       
       
                                        
       
       <
       
       Setter 
       
       Property
       
       ="Background"
       
       >
       
       
                                            
       
       <
       
       Setter.Value
       
       >
       
       
                                                
       
       <
       
       RadialGradientBrush 
       
       MappingMode
       
       ="Absolute"
       
       >
       
       
                                                    
       
       <
       
       GradientStop 
       
       Color
       
       ="Green"
       
       
                                                                  Offset
       
       ="0.8"
       
        
       
       />
       
       
                                                    
       
       <
       
       GradientStop 
       
       Color
       
       ="DarkGreen"
       
       
                                                                  Offset
       
       ="1.0"
       
        
       
       />
       
       
                                                
       
       </
       
       RadialGradientBrush
       
       >
       
       
                                            
       
       </
       
       Setter.Value
       
       >
       
       
                                        
       
       </
       
       Setter
       
       >
       
       

                                        
       
       <
       
       Setter 
       
       Property
       
       ="BorderBrush"
       
       
                                                Value
       
       ="Transparent"
       
        
       
       />
       
       
                                    
       
       </
       
       Style
       
       >
       
       
                                
       
       </
       
       ResourceDictionary
       
       >
       
       
                                
       
       <
       
       ResourceDictionary
       
       >
       
       
                                    
       
       <
       
       Style 
       
       x:Key
       
       ="DataPointStyle"
       
       
                                           TargetType
       
       ="Control"
       
       >
       
       
                                        
       
       <
       
       Setter 
       
       Property
       
       ="Background"
       
       >
       
       
                                            
       
       <
       
       Setter.Value
       
       >
       
       
                                                
       
       <
       
       RadialGradientBrush 
       
       MappingMode
       
       ="Absolute"
       
       >
       
       
                                                    
       
       <
       
       GradientStop 
       
       Color
       
       ="Lime"
       
       
                                                                  Offset
       
       ="0.8"
       
        
       
       />
       
       
                                                    
       
       <
       
       GradientStop 
       
       Color
       
       ="LimeGreen"
       
       
                                                                  Offset
       
       ="1.0"
       
        
       
       />
       
       
                                                
       
       </
       
       RadialGradientBrush
       
       >
       
       
                                            
       
       </
       
       Setter.Value
       
       >
       
       
                                        
       
       </
       
       Setter
       
       >
       
       

                                        
       
       <
       
       Setter 
       
       Property
       
       ="BorderBrush"
       
       
                                                Value
       
       ="Transparent"
       
        
       
       />
       
       
                                    
       
       </
       
       Style
       
       >
       
       
                                
       
       </
       
       ResourceDictionary
       
       >
       
       
                                
       
       <
       
       ResourceDictionary
       
       >
       
       
                                    
       
       <
       
       Style 
       
       x:Key
       
       ="DataPointStyle"
       
       
                                           TargetType
       
       ="Control"
       
       >
       
       
                                        
       
       <
       
       Setter 
       
       Property
       
       ="Background"
       
       >
       
       
                                            
       
       <
       
       Setter.Value
       
       >
       
       
                                                
       
       <
       
       RadialGradientBrush 
       
       MappingMode
       
       ="Absolute"
       
       >
       
       
                                                    
       
       <
       
       GradientStop 
       
       Color
       
       ="LightGray"
       
       
                                                                  Offset
       
       ="0.8"
       
        
       
       />
       
       
                                                    
       
       <
       
       GradientStop 
       
       Color
       
       ="DarkGray"
       
       
                                                                  Offset
       
       ="1.0"
       
        
       
       />
       
       
                                                
       
       </
       
       RadialGradientBrush
       
       >
       
       
                                            
       
       </
       
       Setter.Value
       
       >
       
       
                                        
       
       </
       
       Setter
       
       >
       
       

                                        
       
       <
       
       Setter 
       
       Property
       
       ="BorderBrush"
       
       
                                                Value
       
       ="Transparent"
       
        
       
       />
       
       
                                    
       
       </
       
       Style
       
       >
       
       
                                
       
       </
       
       ResourceDictionary
       
       >
       
       

                            
       
       </
       
       DataVisualization:ResourceDictionaryCollection
       
       >
       
       
                        
       
       </
       
       charting:Chart.Palette
       
       >
       
       
                        
       
       <
       
       charting:PieSeries 
       
       x:Name
       
       ="pieSeries"
       
       
                                            ItemsSource
       
       ="
       
       {StaticResource Activities}
       
       "
       
       
                                            DependentValuePath
       
       ="Count"
       
       
                                            IndependentValuePath
       
       ="Activity"
       
       
                                            AnimationSequence
       
       ="FirstToLast"
       
        
       
       />
       
       
                    
       
       </
       
       charting:Chart
       
       >
       
       
                
       
       </
       
       Grid
       
       >
       
       
            
       
       </
       
       controls:PanoramaItem
       
       >
       
       
            ……
        
       
       </
       
       controls:Panorama
       
       >
       
       

    
       
       </
       
       Grid
       
       >
       
       


       
       </
       
       phone:PhoneApplicationPage
       
       >

后台代码部分

     
     
      
      using
      
       System.Collections.Generic;

      
      using
      
       System.Windows;

      
      using
      
       System.Windows.Controls;

      
      using
      
       Microsoft.Phone.Controls;


      
      namespace
      
       DataVisualizationOnWindowsPhone
{
    
      
      using
      
       System.Windows.Controls.DataVisualization.Charting;
    
      
      using
      
       System.Windows.Media;

    
      
      using
      
       DataVisualizationOnWindowsPhone.CustomPieChart;

    
      
      public
      
       
      
      partial
      
       
      
      class
      
       MainPage : PhoneApplicationPage
    {
        
      
      public
      
       MainPage()
        {
            InitializeComponent();
        }
    }

    
      
      //
      
      活动信息的类
      
      

      
          
      
      public
      
       
      
      class
      
       ActivityInfo
    {
        
      
      public
      
       
      
      string
      
       Activity { 
      
      get
      
      ; 
      
      set
      
      ; }
        
      
      public
      
       
      
      int
      
       Count { 
      
      get
      
      ; 
      
      set
      
      ; }
    }

    
      
      //
      
      活动的活动列表类  数据源
      
      

      
          
      
      public
      
       
      
      class
      
       Activities : List
      
      <
      
      ActivityInfo
      
      >
      
      
    {
        
      
      public
      
       Activities()
        {
            Add(
      
      new
      
       ActivityInfo { Activity 
      
      =
      
       
      
      "
      
      上班
      
      "
      
      , Count 
      
      =
      
       
      
      100
      
       });
            Add(
      
      new
      
       ActivityInfo { Activity 
      
      =
      
       
      
      "
      
      吃饭
      
      "
      
      , Count 
      
      =
      
       
      
      26
      
       });
            Add(
      
      new
      
       ActivityInfo { Activity 
      
      =
      
       
      
      "
      
      聊QQ
      
      "
      
      , Count 
      
      =
      
       
      
      6
      
       });
            Add(
      
      new
      
       ActivityInfo { Activity 
      
      =
      
       
      
      "
      
      陪老婆
      
      "
      
      , Count 
      
      =
      
       
      
      60
      
       });
            Add(
      
      new
      
       ActivityInfo { Activity 
      
      =
      
       
      
      "
      
      旅游
      
      "
      
      , Count 
      
      =
      
       
      
      10
      
       });
            Add(
      
      new
      
       ActivityInfo { Activity 
      
      =
      
       
      
      "
      
      发呆
      
      "
      
      , Count 
      
      =
      
       
      
      18
      
       });
        }
    }
}

组件常用方法：
Refresh：强制该组件从它的数据源刷新数据，然后重新渲染结果序列。

组件的常用属性：
ActualAxes：获取显示在该组件上的实际轴数。
Axes：获取或设置在组件中的轴的序列。
ChartAreaStyle：获取或设置ISeriesHost的图表区域样式。
LegendItems：获取图例项的集合。
LegendStyle：获取或设置图例的样式。
LegendTitle：获取或设置图例的标题内容。
PlotAreaStyle：获取或设置该组件绘图区域的样式。
Series：获取或设置显示在该组件中的数据序列集合。
StylePalette：获取或设置一个由ISeriesHost子项所使用的样式调色板。
Title：获取或设置该组件的标题。
TitleStyle：获取或设置该组件的标题的样式。

标签: Windows Phone 7