定义silverlight报表样式-Styling a Silverlight Chart
2010-07-26 18:21
281 查看
A article on how to style a standard Silverlight chart to look like the Google Analytics chart.Download source code - 11.1 KB
Not bad, but…
There are a few things to notice here. Each
Each
Each chart has an
Here is the markup:
The Silverlight Toolkit Chart control is very flexible and powerful! Try it out, and you will be surprised at the endless ways you can style it!
If you found this article useful or interesting, please vote for it!
http://www.codeproject.com/KB/WPF/WPFSLChart.aspx?display=Print
Introduction
I love Google Analytics! I use it to monitor every site I own… Google’s chart looks very slick! Here is a walkthrough on how to style your Silverlight chart to look like the Google Analytics chart!Before we start
We need some data. I created very basicTrafficInfoand
TrafficInfoCollectionobjects with some dummy data that I can bind to.
public class TrafficInfo { public DateTime Date { get; set; } public int Visits { get; set; } }We also need the Silverlight Toolkit (I used the port to WPF created by Jaime Rodriquez).
Let's start with the basics
Add the following two namespaces:xmlns:charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization. Charting;assembly=Microsoft.Windows.Controls.DataVisualization" xmlns:datavis="clr-namespace:Microsoft.Windows.Controls.DataVisualization; assembly=Microsoft.Windows.Controls.DataVisualization"Now, let's create a simple line chart:
<charting:Chart Width="800" Height="175"> <charting:Chart.Series> <charting:LineSeries IsSelectionEnabled="True" Title="Visits" ItemsSource="{StaticResource TrafficInfo}" IndependentValueBinding="{Binding Date}" DependentValueBinding="{Binding Visits}" /> </charting:Chart.Series> </charting:Chart>And here is our master piece:
Not bad, but…
Style, style, style
Let's start styling our chart… I will split the styling into two parts; the first part will be specific to line charts, and the second part might be relevant to other types of charts too…Styling the LineSeries
EachLineSerieshas a
PolylineStyleproperty. The
PolylineStylecontrols how the line looks. Here is our
GooglePolylineStyle:
<Style x:Key="GooglePolylineStyle" TargetType="Polyline"> <Setter Property="StrokeThickness" Value="5"/> </Style>And, here is the style for the
LineDataPoint:
<Style x:Key="GoogleLineDataPointStyle" TargetType="charting:LineDataPoint"> <Setter Property="Background" Value="#0077CC" /> <Setter Property="BorderBrush" Value="White"/> <Setter Property="BorderThickness" Value="2"/> <Setter Property="IsTabStop" Value="False"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="charting:LineDataPoint"> <Grid x:Name="Root" Opacity="1"> <ToolTipService.ToolTip> <StackPanel Margin="2,2,2,2"> <ContentControl Content="{TemplateBinding IndependentValue}" ContentStringFormat="{}{0:MMMM d, yyyy}"/> <ContentControl Content="{TemplateBinding DependentValue}" ContentStringFormat="Visits {0:###,###,###}"/> </StackPanel> </ToolTipService.ToolTip> <Ellipse StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>Also update the chart’s
LineSeriesto use our newly created styles:
<charting:LineSeries IsSelectionEnabled="True" PolylineStyle="{StaticResource GooglePolylineStyle}" DataPointStyle="{StaticResource GoogleLineDataPointStyle}" MarkerHeight="10" MarkerWidth="10" Title="Visits" ItemsSource="{StaticResource TrafficInfo}" IndependentValueBinding="{Binding Date}" DependentValueBinding="{Binding Visits}" />And, here is the result:
There are a few things to notice here. Each
DataPointhas the following properties you can use and display in your tooltip:
DependentValue
FormattedDependentValue
IndependentValue
FormattedIndependentValue
Each
LineSeriescan specify the
DataPointmarker size using
MarkerWidthand
MarkerHeight.
Styling the chart
I want to remove the title and the ledger of the chart. There are two options to removing these items! You can create new styles for the title and the ledger that sets its visibility toCollapsed. (This trick also works if you don’t want
DataPointmarkers.)
<Style x:Key="GoogleNoTitle" TargetType="datavis:Title"> <Setter Property="Visibility" Value="Collapsed"/> </Style>Then, just set the
TitleStyleand
LedgerStyleproperties on the chart:
TitleStyle="{StaticResource GoogleNoTitle}"The seconds method of removing these is to rather create a new
ControlTemplatefor the chart and remove them permanently!
<Style x:Key="GoogleChart" TargetType="charting:Chart"> <Setter Property="PlotAreaStyle"> <Setter.Value> <Style TargetType="Grid"> <Setter Property="Background" Value="White" /> </Style> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="charting:Chart"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="10"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid Grid.Row="1" Margin="0,15,0,15"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}"> <Grid x:Name="PlotArea" Style="{TemplateBinding PlotAreaStyle}" Margin="0,0,0,0" > <Grid x:Name="GridLinesContainer" /> <Grid x:Name="SeriesContainer" /> <Border Margin="0,0,0,0" BorderBrush="#FF919191" BorderThickness="0,1,0,1"/> </Grid> </Grid> </Grid> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>The new
ControlTemplatemerely removes the title and ledger! The last part of the chart we need to style are the axes. If you look at the Google chart, you will notice that the vertical grid lines indicate where a week starts; how difficult would this be?
Each chart has an
Axesproperty, which can contain multiple axis! Here are some of the axis properties I used:
LabelStringFormat | MMMM d, yyyy | Changes the format of the labels |
ShowGridLines | True | Shows the grid lines |
ShowTickMarks | True | Shows the grid line markers |
ShouldIncludeZero | True | Scales from 0 |
IntervalType | Days | Indicates what each unit on the axis is |
Interval | 7 | Interval between points on the axis |
IntervalOffset | 1 | Offset used in creating the axis |
IntervalOffsetType | Days | Offset type |
<charting:Chart.Axes> <charting:Axis Orientation="Horizontal" AxisType="DateTime" ShowGridLines="True" ShowTickMarks="True" LabelStringFormat="MMMM d, yyyy" IntervalType="Days" Interval="7" IntervalOffset="1" IntervalOffsetType="Days" Style="{StaticResource GoogleAxisStyle}" /> <charting:Axis Orientation="Vertical" AxisType="Linear" ShowTickMarks="False" Interval="4000" IntervalType="Number" ShowGridLines="True" ShouldIncludeZero="True" Style="{StaticResource GoogleAxisStyle}"/> </charting:Chart.Axes>And that is it.
The Silverlight Toolkit Chart control is very flexible and powerful! Try it out, and you will be surprised at the endless ways you can style it!
If you found this article useful or interesting, please vote for it!
License
This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)http://www.codeproject.com/KB/WPF/WPFSLChart.aspx?display=Print
相关文章推荐
- Silverlight样式定义
- Silverlight样式(Style)的定义与引用
- Silverlight样式(Style)的定义与引用
- Silverlight Chart 综合运用(样式、多轴、数据绑定、点状图、线形图、DataGrid、Chart导出综合运用)
- SilverLight 后台定义控件样式Style
- [转]silverlight中定义样式
- Silverlight样式定义
- DEV XtraReport 动态构建报表之样式设计
- 微软SQL Server 2012新特性Silverlight报表客户端 - Power View 推荐
- 典型数据报表的样式和作用
- 报表定义文件出现 xmlns="" 造成报表无法解析怎么办?
- CSS定义链接的样式
- 典型数据报表的样式和作用
- WPF-样式的定义和使用
- Button 在布局文件中定义监听器,文字阴影,自定义图片,代码绘制样式,添加音效的方法
- Silverlight中WCF定义的类,在客户端不能发现的问题
- 如何定义html hr 样式(多种效果)
- Silverlight visifire Chart图表下载到PPT文件中
- Android开发Hack1-圆角镂空按钮的样式定义
- Silverlight——施工计划日报表(二)