类别：.Net 跨平台 / 日期：2015-01-22 / 浏览：3747 / 评论：0
上一次的文章讲述了Xamarin Forms的一些基本的内容，这次主要讲讲使用Telerik公司的UI For Xamarin控件的使用。UI For Xamarin主要是提供图表和日历控件的支持，当然以后会提供更多的控件。 首先我们完成UI For Xamarin的安装，然后进入安装目录的Binaries目录下将所有内容拷贝到项目目录，该文件夹中提供的就是我们要使用的所有类库。这里需要更新我们的NuGet中的包，才能正常使用该控件。
接下来我们要在项目中引用这些类库。这里提醒大家不要把Xamarin Forms的版本升级到1.3以上，否则在IOS项目中会出错。
UI项目中需引用： Telerik.XamarinForms.Chart.dll、 Telerik.XamarinForms.Common.dll
Android项目中需引用： Telerik.Xamarin.Android.Chart.dll Telerik.Xamarin.Android.Common.dll Telerik.Xamarin.Android.Primitives.dll Telerik.XamarinForms.Chart.dll Telerik.XamarinForms.ChartRenderer.Android.dll Telerik.XamarinForms.Common.dll
IOS项目中需引用： Telerik.Xamarin.iOS.dll Telerik.XamarinForms.Chart.dll Telerik.XamarinForms.ChartRenderer.iOS.dll Telerik.XamarinForms.Common.dll
接下来我们需要在每个项目的启动文件中声明一些内容。
Android MainActivity.cs中：
[assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(Telerik.XamarinForms.ChartRenderer.Android.CartesianChartRenderer))] [assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadPieChart), typeof(Telerik.XamarinForms.ChartRenderer.Android.PieChartRenderer))]
IOS AppDelegate.cs中：
[assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(Telerik.XamarinForms.ChartRenderer.iOS.CartesianChartRenderer))] [assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadPieChart), typeof(Telerik.XamarinForms.ChartRenderer.iOS.PieChartRenderer))]
同时需要 FinishedLaunching() 方法中添加如下内容：
new Telerik.XamarinForms.ChartRenderer.iOS.PieChartRenderer(); new Telerik.XamarinForms.ChartRenderer.iOS.CartesianChartRenderer();
到此我们的基本工作就完成了，接下来我们开始创建一个简单的图表。首先我们创建一个新建项，选择Forms Xaml Page，命名为MainPage.xaml。
在前端MainPage.xaml页面中首先添加以下命名空间：
xmlns:telerikChart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"。
接下来将以下代码替换页面中存在的Lable标签。
<telerikChart:RadCartesianChart x:Name="MainChart">
<telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:CategoricalAxis/>
</telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:NumericalAxis/>
</telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:RadCartesianChart.Series>
<telerikChart:BarSeries ItemsSource="{Binding Data}">
<telerikChart:BarSeries.ValueBinding>
<telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
</telerikChart:BarSeries.ValueBinding>
<telerikChart:BarSeries.CategoryBinding>
<telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
</telerikChart:BarSeries.CategoryBinding>
</telerikChart:BarSeries>
</telerikChart:RadCartesianChart.Series>
</telerikChart:RadCartesianChart>然后我们新建一个CategoricalData的类和一个MainViewModel的类，MainViewModel中的会提供一个CategoricalData列表供页面展示使用，具体代码如下： CategoricalData类：
public class CategoricalData
{
public object Category { get; set; }
public double Value { get; set; }
}MainViewModel类：
public class MainViewModel
{
public MainViewModel()
{
Data = GetCategoricalData();
}
public List<CategoricalData> Data { get; set; }
public static List<CategoricalData> GetCategoricalData()
{
var data = new List<CategoricalData>
{
new CategoricalData {Category = "目录A", Value = 0.63},
new CategoricalData {Category = "目录B", Value = 0.85},
new CategoricalData {Category = "目录C", Value = 1.05},
new CategoricalData {Category = "目录D", Value = 0.96},
new CategoricalData {Category = "目录E", Value = 0.78},
};
return data;
}
}接下来我们在页面的后台控制类中MainPage.xaml.cs中添加如下的代码：
this.BindingContext = new MainViewModel(); BackgroundColor = Xamarin.Forms.Device.OnPlatform(Xamarin.Forms.Color.White, Xamarin.Forms.Color.White, Xamarin.Forms.Color.Transparent);
最后我们修改UI项目中的启动类App.cs，将其中的GetMainPage方法修改为：
return new MainPage();
启动项目后我们第一个图表就做完了。
发表评论 /