Colour selection of Silverlight Toolkit Chart Line Series

喜夏-厌秋 提交于 2020-01-04 02:22:12

问题


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.

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.

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?

Thanks!


回答1:


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

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

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.

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.

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>


来源:https://stackoverflow.com/questions/9191711/colour-selection-of-silverlight-toolkit-chart-line-series

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!