Silverlightレポートスタイルの定義-Styling a Silverlight Chart
31232 ワード
A article on how to style a standard Silverlight chart to look like the Google Analytics chart.
Download source code - 11.1 KB
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!
We need some data. I created very basic
We also need the Silverlight Toolkit (I used the port to WPF created by Jaime Rodriquez ).
Add the following two namespaces:
Now, let's create a simple line chart:
And here is our master piece:
Not bad, but…
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…
Each
And, here is the style for the
Also update the chart’s
And, here is the result:
There are a few things to notice here. Each
Each
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 to
Then, just set the
The seconds method of removing these is to rather create a new
The new
Each chart has an
MMMM d, yyyy
Changes the format of the labels
True
Shows the grid lines
True
Shows the grid line markers
True
Scales from 0
Days
Indicates what each unit on the axis is
7
Interval between points on the axis
1
Offset used in creating the axis
Days
Offset type
Here is the markup:
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!
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
Download source code - 11.1 KB
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 basic
TrafficInfo
and TrafficInfoCollection
objects 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
Each
LineSeries
has a PolylineStyle
property. The PolylineStyle
controls 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
LineSeries
to 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
DataPoint
has the following properties you can use and display in your tooltip: DependentValue
FormattedDependentValue
IndependentValue
FormattedIndependentValue
Each
LineSeries
can specify the DataPoint
marker size using MarkerWidth
and 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 to
Collapsed
. (This trick also works if you don’t want DataPoint
markers.) <Style x:Key="GoogleNoTitle" TargetType="datavis:Title">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
Then, just set the
TitleStyle
and LedgerStyle
properties on the chart: TitleStyle="{StaticResource GoogleNoTitle}"
The seconds method of removing these is to rather create a new
ControlTemplate
for 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
ControlTemplate
merely 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
Axes
property, 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
Here is the markup:
<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