Silverlight工具包图表线系列的颜色选择 [英] Colour selection of Silverlight Toolkit Chart Line Series

问题描述

我正在使用Silverlight 4工具包并使用制图控件，特别是Line系列.我还使用了Microsoft Silverlight主题之一，该主题带有Chart的一些默认样式.

I'm working with the Silverlight 4 toolkit and using the Charting control, specifically the Line Series. I'm also using one of the Microsoft Silverlight themes, which comes with some default styling for the Chart.

我知道在ToolkitStyles.xaml中，制图工具包使用了大量的彩色画笔-ChartBrush1，ChartBrush2等.等等.我不了解的是它们如何被图表本身使用.

I know that in the ToolkitStyles.xaml there's a whole host of colour brushes that get used by the charting toolkit - ChartBrush1, ChartBrush2 etc. etc.. What I don't understand is how they get used by the chart itself.

我问这个的原因是因为我试图更改LineSeries的DataPointStyle-我已经成功地在Blend中提取了数据点样式的副本，并进行了所需的更改，即使数据点较小.但是，一旦我这样做，图形中的所有线系列都具有相同的颜色(橙色)，而忽略了ChartBrush资源(如上详细所述).

The reason I'm asking this is because I'm trying to change the DataPointStyle for the LineSeries - I've successfully pulled out a copy of the data point style in Blend and made the changes I wanted i.e. make the size of the data point smaller. But as soon as I do this, all the line series in the graph have the same colour (Orange) and ignore the ChartBrush resources (detailed above).

是什么驱动线系列的颜色选择?它是如何发生的?如果我复制模板，为什么会丢失它?

What's driving the colour selection of the line series? How does it happen? Why do I lose it if I take a copy of the template?

谢谢！

推荐答案

工具箱Chart控件具有属性Palette，它是样式的资源字典.

The toolkit Chart control has a property Palette that is a resource dictionary of styles.

您可以在"Controls.DataVisualization.Toolkit \ Charting \ Chart \ Chart.xaml"中找到默认的图表样式.

You can find the default Chart style in "Controls.DataVisualization.Toolkit\Charting\Chart\Chart.xaml".

在其中您可以看到Palette是ResourceDictionaryCollection，并且集合中的每个ResourceDictionary都定义了DataPointStyle.每个DataPointStyle都将Background属性设置为不同，这就是图表中每条线变为不同颜色的方式.

In there you can see that Palette is a ResourceDictionaryCollection and each ResourceDictionary in the collection defines a DataPointStyle. EachDataPointStyle sets the Background property differently and this is how each line in the chart becomes a different colour.

从这里可以清楚地看到为什么在xaml中显式设置了DataPointStyle的行系列中的行将始终具有相同的颜色-定义该颜色的默认DataPointStyle已被替换.

From here it is clear to see why lines in a line series that have a DataPointStyle set explicitly in xaml will always have the same colour - the default DataPointStyle that defines the colour has been replaced.

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

The solution to this is to modify the palette used by the chart. Here I have created a base style that sets the desired DataPointStyle properties and then for every DataPointStyle in the dictionary collection, specify 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>

您只需在图表上指定调色板:

The you simply specify the palette on the chart:

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

这篇关于Silverlight工具包图表线系列的颜色选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！