WindowsPhone8 应用开发学习笔记（四） - Telerik学习

在Windows phone 8美化Ui中telerik貌似不可缺少哦。telerik功能太强大了，我现在只学习telerik for Windows phone中的chart部分。在Windows phone7中，这个chart是有个toolkit自带的，但是到了Windows phone8中就没有了，需要自己写或者使用第三方Ui工具。

下载工具：telerik radcontrols for windows phone8 2014 点击下载

下面所写的都是我自己看demo理解的，可能有不对的地方，还望指出来。

编写xaml时需要添加：   

xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
xmlns:telerikCharting="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"

框架：

<telerikChart:RadCartesianChart x:Name="radChart1">
......
</telerikChart:RadCartesianChart>

横坐标

<telerikChart:RadCartesianChart.HorizontalAxis >
......
</telerikChart:RadCartesianChart.HorizontalAxis>

属性值 （横坐标比较复杂一些）

1、时间坐标 DateTimeCategoricalAxis

<telerikChart:DateTimeCategoricalAxis Style="{StaticResource xAxisStyle}" LabelFitMode="Rotate"
                                                      PlotMode="OnTicks" 
                                                      DateTimeComponent="Day"
                                                      LabelFormat="dd"
                                                      LabelInterval="1"
                                                      LabelOffset="0"
                                                      TickThickness="1"/>

2、文字坐标 CategoricalAxis

<telerikChart:CategoricalAxis Style="{StaticResource baseAxisStyle}" 
                                              LabelTemplateSelector="{StaticResource labelTemplateSelector}"/>

LabelTemplateSelector [我还在研究什么意思，但是这个属性指定了横坐标显示的内容]

在资源里添加 labelTemplateSelector

<local:BarLabelTemplateSelector x:Key="labelTemplateSelector">
            <local:BarLabelTemplateSelector.Templates>
                <DataTemplate>
                    <TextBlock Text="{Binding}" Foreground="{StaticResource Series6Brush}"/>
                </DataTemplate>
            </local:BarLabelTemplateSelector.Templates>
</local:BarLabelTemplateSelector>

但是labelTemplateSelector又使用到了类BarLabelTemplateSelector

class BarLabelTemplateSelector : DataTemplateSelector
    {
        private ObservableCollection<DataTemplate> templates;

        public BarLabelTemplateSelector()
        {
            this.templates = new ObservableCollection<DataTemplate>();
        }

        public ObservableCollection<DataTemplate> Templates
        {
            get
            {
                return this.templates;
            }
        }

        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            if (this.templates.Count == 0)
            {
                return null;
            }

            return this.templates[(item as AxisLabelModel).CollectionIndex % this.templates.Count];
        }
    }

至于怎么精简，我还需要时间来尝试。

纵坐标

<telerikChart:RadCartesianChart.VerticalAxis>
......
</telerikChart:RadCartesianChart.VerticalAxis>

属性值

<telerikChart:LinearAxis  Maximum="150"  LineStroke="Transparent" Style="{StaticResource yAxisStyle}"/>

Maximum=“150” 最大值为150

Minimum="100" 最小值为100，不指定为0.

MajorStep="10" 坐标刻度间隔指为10，不指定为20.

LineStroke="Transparent"  

背景网格

<telerikChart:RadCartesianChart.Grid>
......
</telerikChart:RadCartesianChart.Grid>

属性值

<telerikChart:CartesianChartGrid MajorLinesVisibility="Y" Style="{StaticResource gridStyleDashedAll}"/>

MajorLinesVisibility="Y" 显示Y轴分割线，XY显示X轴Y轴分割线，默认为不显示。如果XY都显示，那就像是网格背景。

StripLinesVisibility="Y" 显示分割区域

<telerikChart:CartesianChartGrid.YStripeBrushes>
                        <SolidColorBrush Color="#33666666"/>
                        <SolidColorBrush Color="Transparent"/>
</telerikChart:CartesianChartGrid.YStripeBrushes>

图表 - 矩形柱子

<telerikChart:BarSeries >
<telerikChart:BarSeries.PointTemplates>
<DataTemplate>
<Border Background="{StaticResource Series2Brush}" BorderBrush="{StaticResource Series2Brush}" BorderThickness="2"/>
</DataTemplate>                    
</telerikChart:BarSeries.PointTemplates>
<telerikCharting:CategoricalDataPoint Value="123.0"/>               
</telerikChart:BarSeries>

图表 - 区域形状

<telerikChart:AreaSeries ItemsSource="{Binding}">
<telerikCharting:CategoricalDataPoint Value="123.0"/>
<telerikCharting:CategoricalDataPoint Value="121.9"/>
</telerikChart:AreaSeries>