Telerik的地铁XAML的Windows 8图表控件和绑定

我建立使用Windows 8地铁XAML预览控件的应用程序。我已经下载并检查了示例应用程序，但它主要使用代码隐藏来定义图表所需的所有内容。我试图用绑定来完成类似的事情，并且图表保持空白。事实上，他们得到的数据，但什么也没有（例如，我可以看到RadPieChart的边界和RadCartesianChart的所有零）。下面是RadPieChart代码：用数据填充Telerik的地铁XAML的Windows 8图表控件和绑定

private ElementCollection<PieDataPoint> assetsData; 
public ElementCollection<PieDataPoint> AssetsData 
{ 
    get 
    { 
     return assetsData; 
    } 
    set 
    { 
     assetsData = value; 
     Notify("AssetsData"); 
    } 
}

，像这样：

<telerik:RadPieChart> 
    <telerik:PieSeries ItemsSource="{Binding AssetsData}" /> 
</telerik:RadPieChart>

而且AssetsData这样定义，当我用

PieSeries series = new PieSeries(); 
series.RadiusFactor = 0.9; 

foreach (var entry in dataSource) 
{ 
    series.DataPoints.Add(new PieDataPoint() { Value = entry.Percentage, Label = entry.Title }); 
} 

assetsData = series.DataPoints;

一切正常代码 - 在示例应用程序后面（C＃）。我定义了该系列，将数据点添加到系列并将该系列添加到图表控件。当使用相同的数据并尝试像这样绑定时，它不起作用。

我在这里做错了什么？

我检查，如果集合中的值设置是否正确，他们是（因为我使用的是相同的逻辑，当我用代码隐藏，不应该有任何差别真的，并没有）。

此外，有没有一种方法来设置RadCartesianChart缩放它的最小值和最大值根据该就是BEING得出的数据？

来源

2012-06-27 Igor Ralic

我从来没有用过RadPieChart，所以我能不能解决你的问题，但我想你可能会在Telerik的论坛上有更好的运气。 –

谢谢，我也在那里试过，但既然是预览版，我不知道我是否会从他们那里得到支持。所以这里的任何帮助表示赞赏！ :) –

我也struggeled与控制，并且它不是直到我意识到你必须以编程方式定义调色板，我设法图表告诉我任何事情。目前我已经有了这个例子，但下个星期我会继续研究图表，我可以为你发布一些更好的代码。但这至少可以让你开始！

  <Grid Height="520" Grid.Row="1" Margin="10"> 
      <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="Auto" /> 
      </Grid.RowDefinitions> 
      <StackPanel Grid.Row="0" Background="#007EA9" Height="auto" Width="500"> 
      <Border Background="#007EA9"> 
       <telerik:RadCartesianChart x:Name="barChart" Margin="0,6,0,0" Height="250" Width="230"> 
       <telerik:RadCartesianChart.HorizontalAxis> 
        <telerik:CategoricalAxis LabelFitMode="MultiLine"> 
        <telerik:CategoricalAxis.LabelStyle> 
         <Style TargetType="TextBlock"> 
         <Setter Property="MaxWidth" Value="10" /> 
         <Setter Property="Margin" Value="4" /> 
         </Style> 
        </telerik:CategoricalAxis.LabelStyle> 
        </telerik:CategoricalAxis> 
       </telerik:RadCartesianChart.HorizontalAxis> 
       <telerik:RadCartesianChart.VerticalAxis> 
        <telerik:LinearAxis Maximum="200" Minimum="0"> 
        <telerik:LinearAxis.LabelStyle> 
         <Style TargetType="TextBlock"> 
         <Setter Property="Width" Value="10" /> 
         <Setter Property="TextAlignment" Value="Right" /> 
         </Style> 
        </telerik:LinearAxis.LabelStyle> 
        </telerik:LinearAxis> 
       </telerik:RadCartesianChart.VerticalAxis> 
       <telerik:RadCartesianChart.Grid> 
        <telerik:CartesianChartGrid MajorLinesVisibility="Y" /> 
       </telerik:RadCartesianChart.Grid> 
       </telerik:RadCartesianChart> 
      </Border> 
      </StackPanel> 
      <StackPanel Grid.Row="1" Height="auto" Width="500" Margin="0,35,0,0"> 
      <Border Background="#007EA9"> 
       <telerik:RadPieChart x:Name="pieChart" Margin="0,0,0,0" Height="250" Width="230" /> 
      </Border> 
      </StackPanel> 
     </Grid>

C＃代码

 private void CreateSuckyChart() 
    { 
     double value; 

     pieChart.Palette = ChartPalettes.DefaultDark; 
     barChart.Palette = ChartPalettes.DefaultDark; 

     var data = new List<WBDataEntry> { new WBDataEntry { Data = "Benchpress", Value = 70 }, new WBDataEntry { Data = "Squats", Value = 15 }, new WBDataEntry { Data = "Lat pulls", Value = 205 }, new WBDataEntry { Data = "Lunges", Value = 55 } }; 
     var series = new BarSeries(); 
     series.CategoryBinding = new PropertyNameDataPointBinding("Date"); 
     series.ValueBinding = new PropertyNameDataPointBinding("Value"); 
     this.barChart.Series.Add(series); 
     var series2 = new PieSeries(); 
     var labelDefinition = new ChartSeriesLabelDefinition(); 
     labelDefinition.Margin = new Thickness(-10, 0, 0, 0); 
     labelDefinition.DefaultVisualStyle = this.Resources["PieChartLabelStyle"] as Style; 
     series2.LabelDefinitions.Add(labelDefinition); 
     series2.RadiusFactor = 0.7; 
     series2.AngleRange = new AngleRange(-90, 360); 

     this.pieChart.Series.Add(series2); 

     foreach (WBDataEntry indicator in data) // Class WBDataEntry has two properties, Value and Date 
     { 
      series2.DataPoints.Add(new PieDataPoint() { Value = indicator.Value, Label = indicator.Data }); 

      series.DataPoints.Add(new CategoricalDataPoint() { Value = indicator.Value , Label = indicator.Data }); 

     } 
    }

来源

2012-06-28 13:44:43

嗨，谢谢你的回应。我有类似的东西，我一直在使用我的调色板，并且在C＃中定义的时候一切正常，但是当我尝试执行数据绑定时没有任何问题...... –

下周我会在我的图表上工作，我也将使用数据绑定，一旦我得到它的工作，你将成为第一个知道。如果你在我之前成功了，请在这里发布答案，而不是为我节省一些麻烦;）让我们先看看是谁解决了这个问题：D –

嗨Daniela，来自Telerik的人帮助我解决了问题！在这里看到他们的答案：http://www.telerik.com/community/forums/community-forums/about-telerik/metro-xaml-charts-and-binding.aspx 他们甚至附加了一个示例项目！大力支持。 ;）我希望它也能帮助你！ –

我看你已经找到了解决办法，但我想我会在这里发布的解决方案。这是我的XAML：

<Grid> 
    <Grid.Resources> 
     <t:ChartPalette x:Key="CustomPalette"> 
      <t:ChartPalette.FillEntries> 
       <t:PaletteEntryCollection> 
        <SolidColorBrush Color="Red"></SolidColorBrush> 
        <SolidColorBrush Color="Green"></SolidColorBrush> 
        <SolidColorBrush Color="Blue"></SolidColorBrush> 
        <SolidColorBrush Color="Purple"></SolidColorBrush> 
       </t:PaletteEntryCollection> 
      </t:ChartPalette.FillEntries> 
      <t:ChartPalette.StrokeEntries> 
       <t:PaletteEntryCollection> 
        <SolidColorBrush Color="Red"></SolidColorBrush> 
        <SolidColorBrush Color="Green"></SolidColorBrush> 
        <SolidColorBrush Color="Blue"></SolidColorBrush> 
        <SolidColorBrush Color="Purple"></SolidColorBrush> 
       </t:PaletteEntryCollection> 
      </t:ChartPalette.StrokeEntries> 
     </t:ChartPalette> 
    </Grid.Resources> 

    <tpri:RadLegendControl LegendProvider="{Binding ElementName=pieChart}"> 
     <tpri:RadLegendControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Vertical"/> 
      </ItemsPanelTemplate> 
     </tpri:RadLegendControl.ItemsPanel> 

     <tpri:RadLegendControl.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal"> 
        <Ellipse Fill="{Binding Fill}" Stroke="{Binding Stroke}" StrokeThickness="1" Width="10" Height="10"/> 
        <TextBlock Text="{Binding Title}" Foreground="{Binding Fill}" Margin="10" FontStyle="Italic"/> 
       </StackPanel> 
      </DataTemplate> 
     </tpri:RadLegendControl.ItemTemplate> 
    </tpri:RadLegendControl> 

    <t:RadPieChart x:Name="pieChart" Palette="{StaticResource CustomPalette}"> 
     <t:PieSeries ItemsSource="{Binding ScoreCard}" RadiusFactor="0.8"> 
      <t:PieSeries.ValueBinding> 
       <t:PropertyNameDataPointBinding PropertyName="Total"/> 
      </t:PieSeries.ValueBinding> 

      <t:PieSeries.LegendTitleBinding > 
       <t:PropertyNameDataPointBinding PropertyName="Name"></t:PropertyNameDataPointBinding> 
      </t:PieSeries.LegendTitleBinding> 
     </t:PieSeries> 
    </t:RadPieChart> 
</Grid>

对于记分卡绑定，我有这样的：

private ObservableCollection<TestQuestionResult> _scoreCard; 
public ObservableCollection<TestQuestionResult> ScoreCard 
{ 
    get { return _scoreCard; } 
    set { _scoreCard = value; Notify("ScoreCard"); } 
}

数据类看起来是这样的：

public class TestQuestionResult 
{ 
    public string Name { get; set; } 
    public int Correct { get; set; } 
    public int Incorrect { get; set; } 
    public int Total { get; set; } 
}

这种方法测试生成伪数据：

private void Init() 
{ 
    var list = new ObservableCollection<TestQuestionResult>(); 
    var ran = new Random(-1); 

    for (var ix = 0; ix < 7; ix++) 
    { 
     var tq = new TestQuestionResult() 
     { 
      Name = ix.ToString(), 
      Correct = ran.Next(321, 932), 
      Incorrect = ran.Next(321, 932), 
     }; 

     tq.Total = tq.Correct + tq.Incorrect; 
     list.Add(tq); 
    } 

    ScoreCard = list; 
}

希望这节省了其他人至少在我花费的时间。 :)

来源

2012-11-29 14:49:48

Telerik的地铁XAML的Windows 8图表控件和绑定

回答

相关问题