如何自定义visifire图表主题和样式？

如何自定义visifire图表主题和样式？

原创http://www.cnblogs.com/evgetsolutions/archive/2012/03/07/2383832.html

　　visifire中内置了5种主题，然而在实际项目中，你可以根据需要自定义visifire图表主题。今天，我们一起来看看如何自定义visifire图表主题和样式。

　　如何使用一个默认主题：

　　visifire提供了5种内置主题，分别是：

1) Theme1.xaml
2) Theme2.xaml
3) Theme3.xaml
4) Theme4.xaml
5) Theme5.xaml

　　要使用visifire提供的主题，你必须设置Chart XAML中的Theme属性，代码如下：

　　<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"

　　 Theme="Theme1" Width="500" Height="300">

　　如何在silverlight程序中创建自定义主题：

　　第1步：创建一个silverlight托管代码应用程序。

　　第2步：一旦在VS中创建了新的项目，找到Page.xaml文件，在"LayoutRoot" Grid 中编写一个 chart XAML，并在<UserControl>标签中将宽和高分别改为"500"和"300"。

　　蓝色部分为修改 Page.xaml部分。

　　注：vc是用于创建Visifire图表对象的命名空间。

　　<UserControl x:Class="SLVisifireApp.Page"

　　 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

　　 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

　　 xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"

　　 Width="500" Height="300" >

　　 <Grid x:Name="LayoutRoot" Background="White">

　　<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" Theme="Theme1" >

　　 <vc:Chart.Titles>

　　 <vc:Title Text="Global Fortune 5 Companies 2007" />

　　 </vc:Chart.Titles>

　　 <vc:Chart.AxesX>

　　 <vc:Axis Title="Companies" />

　　 </vc:Chart.AxesX>

　　 <vc:Chart.AxesY>

　　 <vc:Axis Title="Revenue in Million dollars" />

　　 </vc:Chart.AxesY>

　　 <vc:Chart.Series>

　　 <vc:DataSeries LegendText="Series1" RenderAs="Column" AxisYType="Primary" >

　　 <vc:DataSeries.DataPoints>

　　 <vc:DataPoint AxisXLabel="Wall-Mart" YValue="351139" />

　　 <vc:DataPoint AxisXLabel="Exxon Mobil" YValue="345254" />

　　 <vc:DataPoint AxisXLabel="Shell" YValue="318845" />

　　 <vc:DataPoint AxisXLabel="BP" YValue="274316" />

　　 <vc:DataPoint AxisXLabel="General Motors" YValue="207349" />

　　 </vc:DataSeries.DataPoints>

　　 </vc:DataSeries>

　　 </vc:Chart.Series>

　　 </vc:Chart>

　　 </Grid>

　　</UserControl>

　　在添加了Chart XAML后，Page.xaml的效果如图所示：

　　

　　第3步：

　　在同一个应用程序域中创建一个自定义主题。

　　右键单击SilverlightApplication文件夹，选择Add > New Item，便会出现一个新的Add New Item 对话框，选择“Silverlight User Control”，将其命名为“MyTheme.xaml”，点击"Add",如图所示：

　　

　　第4步：

　　在Project Explorer中展开MyTheme.xaml，将显示MyTheme.xaml.cs文件。因为我们不需要托管代码文件时，删除MyTheme.xaml.cs文件。

　　

　　第5步：

　　一旦你点击“Add”按钮，便创建了MyTheme.xaml文件。删除XAML文件中的所有内容，以ResourceDictionary取代它。

　　<ResourceDictionary

　　 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

　　 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

　　 xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"

　　 >

　　</ResourceDictionary>

　　

　　第6步：

　　在ResourceDictionary 标签中为图表元素创建图表样式。利用下面的代码创建图表和DataSeries的样式。

　　<Style x:Key="Chart" TargetType="vc:Chart">

　　 <Setter Property="Background" Value="Gray"/>

　　 <Setter Property="View3D" Value="True"/>

　　 <Setter Property="AnimationEnabled" Value="False"/>

　　</Style>

　　<Style x:Key="DataSeries" TargetType="vc:DataSeries">

　　 <Setter Property="RadiusX" Value="5"/>

　　 <Setter Property="RadiusY" Value="5"/>

　　 <Setter Property="Color" Value="Orange"/>

　　</Style>

　　第7步：

　　一旦创建主题文件，找到MyTheme.xaml属性，修改BuildAction to Content。

　　第8步：

　　将主题添加至Page.xaml，如下图红色边框部分：

　　

　　第9步：

　　运行Silverlight应用程序，便可查看到visifire图表的自定义效果：

　　

下载visifire：http://www.evget.com/zh-CN/product/2648/feature.aspx