重置数据时如何重置 WPF Toolkit 图表调色板 [英] How to reset the WPF Toolkit Chart colour palette when resetting the data

问题描述

我在 WPF 用户控件上有一个饼图，其数据会定期更改，但是我不会每次都实例化一个新的图表控件，只是清除 ItemsSource 中的数据，然后插入新值.

I have a pie chart on a WPF user control whose data changes periodically, however I am not instantiating a new chart control each time, just clearing the data in the ItemsSource and then inserting new values.

每次刷新值时，颜色都会继续滚动选择颜色.

Each time the values get refreshed, the colour palate continues rolling through its colour selections.

图表颜色选择总是以相同的颜色选择开始(首先是红色，然后是蓝色等)，我希望能够在每次重置数据源时告诉图表从头开始重新选择颜色，而不是每次清除和重置数据项时都获得不同的颜色.

The chart colour selection always starts off with the same colour selections (first is red, then blue etc), I would like to be able to tell the chart to restart its colour selection from scratch each time I reset the data source, instead of getting different colours everytime I clear the and reset the data items.

我每次都尝试创建 ObservableCollection 的新实例，但这没有任何区别.

I tried creating a new instance of the ObservableCollection each time but that did not make any difference.

推荐答案

我遇到了同样的问题，我找到了另一个解决方案.也许它不是更好的方法，但它确实有效.

I've got the same problem, and I found another solution. Maybe it's not the better one, but it works.

我在 PieSeries 上的对象绑定中添加了一个 int 属性，它表示 ObservableCollection 中元素的索引.然后我创建了一个 ResourceDictionaryCollection，其中包含调色板的所有默认颜色:

I added an int property to my object binding on the PieSeries, who represent the element's index in the ObservableCollection. Then I created a ResourceDictionaryCollection which contains all the default colors of the Palette:

<datavis:ResourceDictionaryCollection x:Key="CouleursGraphique">
    <!-- Blue -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FFB9D6F7" />
        <GradientStop Color="#FF284B70" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Red -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FFFBB7B5" />
        <GradientStop Color="#FF702828" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Light Green -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FFB8C0AC" />
        <GradientStop Color="#FF5F7143" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Yellow -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FFFDE79C" />
        <GradientStop Color="#FFF6BC0C" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Indigo -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FFA9A3BD" />
        <GradientStop Color="#FF382C6C" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Magenta -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FFB1A1B1" />
        <GradientStop Color="#FF50224F" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Dark Green -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FF9DC2B3" />
        <GradientStop Color="#FF1D7554" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Gray Shade -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FFB5B5B5" />
        <GradientStop Color="#FF4C4C4C" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Blue -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FF98C1DC" />
        <GradientStop Color="#FF0271AE" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Brown -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FFC1C0AE" />
        <GradientStop Color="#FF706E41" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Cyan -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FFADBDC0" />
        <GradientStop Color="#FF446A73" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Special Blue -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FF2F8CE2" />
        <GradientStop Color="#FF0C3E69" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Gray Shade 2 -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FFDCDCDC" />
        <GradientStop Color="#FF757575" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Gray Shade 3 -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FFF4F4F4" />
        <GradientStop Color="#FFB7B7B7" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
    <!-- Gray Shade 4 -->
    <ResourceDictionary>
      <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
        <GradientStop Color="#FFF4F4F4" />
        <GradientStop Color="#FFA3A3A3" Offset="1" />
      </RadialGradientBrush>
    </ResourceDictionary>
  </datavis:ResourceDictionaryCollection>

我添加了一个转换器，用于返回 ResourceDictionaryCollection 的指定索引处的颜色.

I added a converter that returns the color at the specified index of ResourceDictionaryCollection.

 /// <summary>
    /// Convertit une valeur.
    /// </summary>
    /// <param name="value">Valeur produite par la source de liaison.</param>
    /// <param name="targetType">Type de la propriété de cible de liaison.</param>
    /// <param name="parameter">Paramètre de convertisseur à utiliser.</param>
    /// <param name="culture">Culture à utiliser dans le convertisseur.</param>
    /// <returns>
    /// Une valeur convertie. Si la méthode retourne null, la valeur Null valide est utilisée.
    /// </returns>
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        ResourceDictionaryCollection listeCouleurs = parameter as ResourceDictionaryCollection;
        int indice = (int)value;

        return listeCouleurs[indice % listeCouleurs.Count]["Background"];
    }

我在 Xaml 中使用了所有这些元素，如下所示:

And i used all this elements in the Xaml like this:

  <charting:Chart.Series>
<charting:PieSeries ItemsSource="{Binding Path=Donnees}"
                    DependentValuePath="Valeur"
                    IndependentValuePath="Libelle">
  <charting:PieSeries.Palette>
    <datavis:ResourceDictionaryCollection>
      <ResourceDictionary>
        <Style x:Key="DataPointStyle" TargetType="Control">
          <Setter Property="Background" Value="{Binding Path=Index, Converter={StaticResource convCouleur}, ConverterParameter={StaticResource CouleursGraphique}}"/>
        </Style>
      </ResourceDictionary>
    </datavis:ResourceDictionaryCollection>
  </charting:PieSeries.Palette>
</charting:PieSeries>

希望这个回答能帮到你.

I hope that answer can help you.

这篇关于重置数据时如何重置 WPF Toolkit 图表调色板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！