颜色选择Silverlight工具包图表线系列

我用的Silverlight 4工具包的工作，并使用图表控制，特别是线系列。我还使用了Microsoft Silverlight主题之一，该主题为Chart提供了一些默认样式。颜色选择Silverlight工具包图表线系列

我知道在ToolkitStyles.xaml中有一大堆颜色笔刷被Charting工具包使用 - ChartBrush1，ChartBrush2等等。我不明白的是他们如何被图表本身使用。

我问这个问题的原因是因为我正在尝试为LineSeries更改DataPointStyle - 我已经成功地在Blend中提取了数据点样式的副本，并进行了我想要的更改，即将大小的数据点较小。但只要我这样做，图表中的所有线条系列都具有相同的颜色（橙色），并忽略ChartBrush资源（详见上文）。

是什么力量推动了线系列的颜色选择？它是如何发生的？如果我拿了模板的副本，为什么我会失去它？

谢谢！

来源

2012-02-08 Isaac Abraham

该工具包Chart控制有一个属性Palette是样式资源字典。

您可以找到默认的图表样式“Controls.DataVisualization.Toolkit \图表\图\ Chart.xaml”。

在那里您可以看到Palette是ResourceDictionaryCollection，集合中的每个ResourceDictionary定义了DataPointStyle。每个DataPointStyle以不同的方式设置Background属性，这就是图表中的每一行变成不同颜色的方式。

从这里可以明显看出为什么在xaml中明确设置DataPointStyle的线条系列中的线条总是具有相同的颜色 - 定义颜色的默认DataPointStyle已被替换。

的解决方案是修改由图中使用的调色板。在这里，我创建了一个基本样式，用于设置所需的DataPointStyle属性，然后为字典集合中的每个DataPointStyle设置属性，指定BasedOn="{StaticResource DataPointStyleWithNoPoints}"。

<Style x:Key="DataPointStyleWithNoPoints" TargetType="Control"> 
    <Setter Property="Width" Value="1" /> 
    <Setter Property="Height" Value="1" /> 
</Style> 

<datavis:ResourceDictionaryCollection x:Key="ChartPaletteWithNoDataPoints"> 
    <!-- 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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Width" Value="1" /> 
      <Setter Property="Height" Value="1" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </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> 
     <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}"> 
      <Setter Property="Background" Value="{StaticResource Background}" /> 
     </Style> 
     <Style x:Key="DataShapeStyle" TargetType="Shape"> 
      <Setter Property="Stroke" Value="{StaticResource Background}" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
      <Setter Property="StrokeMiterLimit" Value="1" /> 
      <Setter Property="Fill" Value="{StaticResource Background}" /> 
     </Style> 
    </ResourceDictionary> 
</datavis:ResourceDictionaryCollection>

的你只需指定图表上的调色板：

<toolkit:Chart Palette="{StaticResource ChartPaletteWithNoDataPoints}"> 
    ... 
</toolkit:Chart>

来源

2012-03-22 14:16:56

颜色选择Silverlight工具包图表线系列

回答

相关问题