饼图XAML绑定

时间:2011-05-22 14:41:17

标签: silverlight xaml data-binding mvvm

我正在使用MVVM和SL4。我有一个绑定到ItemsControl的VoteResults集合。我想在每个VoteResult项目中使用PieChart。 VoteResult项目对象属性如下所示:VotedYes 10; VotedNo 4;弃儿2; DidntVote 6;

如何传递这些VoteItem属性值以在XAML中构建饼图的系列ItemSource? 类似的东西:

 <charting:Chart>
    <charting:Chart.Series>
       <charting:PieSeries>
          <charting:PieSeries.ItemsSource>
             <controls:ObjectCollection>

             </controls:ObjectCollection>
          </charting:PieSeries.ItemsSource>
       </charting:PieSeries>
    </charting:Chart.Series>
 </charting:Chart>

1 个答案:

答案 0 :(得分:2)

图表控件旨在呈现已经处理并聚合的数据,可以进行演示。

听起来像你想让PieSeries呈现一个系列,其中包含类别“VotedYes”,“VotedNo”,“Abstained”和“Did not vote”作为其独立值和投票计数作为依赖值。在这种情况下,您需要向ItemsSource传递一个包含这组数据的集合,单个对象不会这样做。

您需要通过返回IEnumerable<KeyValuePair<String, Int32>>之类的函数传递VoteResult对象。

 public IEnumerable<KeyValuePair<String, Int32>> ProcessVoteResult(VoteResult vr)
 {
      yield return new KeyValuePair<String, In232>("Voted Yes", vr.VotedYes);
      yield return new KeyValuePair<String, In232>("Voted No", vr.VotedNo);
      yield return new KeyValuePair<String, In232>("Abstained", vr.Abstained);
      yield return new KeyValuePair<String, In232>("Did Not Vote ", vr.DidntVote );
 }

现在您可能希望绑定VoteResult,因为您似乎正在使用MVVM(通过查看您的其他问题)。您需要一个值转换器: -

 public class VoteResultToEnumerableConverter
 {
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
         if (value != null)
         {
              return ProcessVoteResult((VoteResult)value);
         }
         return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
         throw new NotImplementedException();
    }
 }

然后,您可以将此转换器放在图表上方某处的静态资源中: -

 <local:VoteResultToEnumerableConverter x:Key="vrconv" />

然后你的图表看起来像: -

 <toolkit:Chart>
     <toolkit:PieSeries
         ItemsSource="{Binding SomeVoteResult, Converter={StaticResource vrconv}}"
         DependentValuePath="Key"
         IndependendValuePath="Value"/>
 </toolkit:Chart>