Блог

У меня огромная проблема, которую я не могу решить. Допустим, у меня есть пять разных фруктов, и я хочу, чтобы каждый из них был связан с определенным цветом. Допустим, у меня есть три «корзины», которые содержат ноль или более указанных фруктов.

Когда я создаю круговые диаграммы для своих трех корзин, каждый клин представляет собой просто некоторый случайный цвет, который предположительно выбирается элементом управления. Как бы я сказал, сделать голубику синей, бананы желтыми и т.д. На диаграмме?

Я знаю, что это странный вопрос, но я не могу придумать более простого способа его описания.

Мне все равно, находится ли решение в XAML или в коде, главное, чтобы оно работало.

Я нашел решение после долгих ругательств и исследований. Здесь много движущихся частей, поэтому я собираюсь изложить каждую из них как можно короче, сохраняя при этом основные моменты.

Для начала у меня есть коллекция объектов, которые я пытаюсь отслеживать:

 public class PileOfFruit
{
  public string Name {get; set; }
  public int Count { get; set; }
}
  

В моей модели представления у меня есть коллекция этих объектов.

 public class BasketVM
{
...
    private ObservableCollection<PileOfFruit> _FruitBasket = new ObservableCollection<PileOfFruit>();
    public ObservableCollection<PileOfFruit> FruitBasket
    {
      get { return _FruitBasket; }
    }
...
}
  

На мой взгляд, я определю круговую диаграмму, которая будет отображать количество фруктов в корзине. Наиболее важным фактором здесь является привязка шаблона к SliceTemplate

 <chartingToolkit:Chart x:Name="ExampleChart">
    <chartingToolkit:PieSeries ItemsSource={Binding FruitBasket
                               DependentValueBinding="{Binding Count}" 
                               IndependentValueBinding="{Binding Name}">
        <chartingToolkit:PieSeries.Palette>
            <visualizationToolkit:ResourceDictionaryCollection>
            <ResourceDictionary>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Template" Value="{StaticResource SliceTemplate}"/>
                </Style>
  

Теперь в app.xaml или в каком-либо другом месте мы можем добавить шаблон для объекта PieDataSeries. Обратите пристальное внимание на значение при заливке, оно привязано к независимому значению, которое будет чем-то вроде «банана», «винограда» или чего-то еще. Это, в свою очередь, передается преобразователю значений.

 <converters:FruitToColorConverter x:Key="FruitToColorConverter"/>

<ControlTemplate x:Key="SliceTemplate" TargetType="chart:PieDataPoint">
  <Path Data="{TemplateBinding Geometry}"
        Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IndependentValue, Converter={StaticResource FruitToColorConverter}}"
        Stroke="{TemplateBinding BorderBrush}">
    ....
  

Связанный преобразователь данных — это то, что в конечном итоге установит нужный нам цвет. Итак, если мы сделаем что-то вроде этого…

 public class FruitToColorConverter : IValueConverter
{
  private SolidColorBrush Default = new SolidColorBrush(Colors.Black);

  public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
    if (value == null || (!(value is string))) { return Defau< }

    switch (value as string)
    {
      case "Apple":
        return new SolidColorBrush(Colors.Red);
      case "BlueBerry":
        return new SolidColorBrush(Colors.Blue);
      default:
        return Defau<
        ......
  

И именно так вы получаете правильные цвета каждый раз. Если я что-то упустил или должен уточнить, пожалуйста, дайте мне знать, чтобы я мог внести исправления. Здесь много движущихся частей .. =P

Вы можете определить свою собственную цветовую палитру для диаграммы, но она автоматически выберет цвета для элементов данных по мере их отображения в палитре. Таким образом, нет (простого?) способа указать диаграмме, чтобы черника отображалась синей, бананы — желтой и т.д. Что вы можете сделать, так это указать диаграмме отображать первый элемент синим, второй элемент желтым и т.д. и поместить blueberries первым, bannanas вторым и т.д. В источник данных.

Несколько примеров для определения вашей собственной палитры:

 <chartingToolkit:Chart x:Name="ExampleChart">
    <chartingToolkit:PieSeries>
        <chartingToolkit:PieSeries.ItemsSource >
            <toolkit:ObjectCollection>
                <sys:Double>1</sys:Double>
                <sys:Double>2.3</sys:Double>
                <sys:Double>3.5</sys:Double>
                <sys:Double>5</sys:Double>
            </toolkit:ObjectCollection>
        </chartingToolkit:PieSeries.ItemsSource >
        <chartingToolkit:PieSeries.Palette>
            <visualizationToolkit:ResourceDictionaryCollection>
            <ResourceDictionary>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Background" Value="Red"/>
                </Style>
            </ResourceDictionary>
            <ResourceDictionary>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Background" Value="Green"/>
                </Style>
            </ResourceDictionary>
            <ResourceDictionary>
                <Style x:Key="DataPointStyle" TargetType="Control">
                    <Setter Property="Background" Value="Blue"/>
                </Style>
            </ResourceDictionary>
            </visualizationToolkit:ResourceDictionaryCollection>
        </chartingToolkit:PieSeries.Palette>
    </chartingToolkit:PieSeries >
</chartingToolkit:Chart >
  

РЕДАКТИРОВАТЬ: интересные названия:

 xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
  

Вот что я нашел: Цвета на самом деле не случайны: существует последовательность палитр, которая повторяется каждые 5 раз (количество на самом деле не имеет значения). Мой обходной путь проще: каждый раз, когда у меня появляются новые данные для отображения, я воссоздаю точечную диаграмму. Таким образом, палитра цветов всегда будет начинаться с одних и тех же цветов (что означает, что она никогда не изменится). Это означает, что вам нужно иметь метод, который программно перестраивает вашу диаграмму элементов (не используйте его в XAML, просто используйте заполнитель и вызовите метод PieChartBuilder). Я думаю, что это меньше кода (также меньше ошибок 🙂 ).