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

来源：互联网发布：yum libssl dev 编辑：程序博客网时间：2024/06/13 13:19

在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>

0 0