Telerik的地鐵XAML的Windows 8圖表控件和綁定

Question

我建立使用Windows 8地鐵XAML預覽控件的應用程序。我已經下載並檢查了示例應用程序，但它主要使用代碼隱藏來定義圖表所需的所有內容。我試圖用綁定來完成類似的事情，並且圖表保持空白。事實上，他們得到的數據，但什麼也沒有（例如，我可以看到RadPieChart的邊界和RadCartesianChart的所有零）。下面是RadPieChart代碼：用數據填充

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得出的數據？

Answer 1

我也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 }); 

     } 
    } 

Answer 2

我看你已經找到了解決辦法，但我想我會在這裏發佈的解決方案。這是我的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; 
} 

希望這節省了其他人至少在我花費的時間。 :)