Выбор цвета из серии Silverlight Toolkit Chart Line Series - PullRequest
Новая
       8

Выбор цвета из серии Silverlight Toolkit Chart Line Series

3 голосов
/ 08 февраля 2012

Я работаю с инструментарием Silverlight 4 и использую элемент управления Charting, в частности Line Series.Я также использую одну из тем Microsoft Silverlight, которая поставляется с некоторыми стилями по умолчанию для диаграммы.

Я знаю, что в ToolkitStyles.xaml есть целый ряд цветных кистей, которые используются инструментарием построения диаграмм.- ChartBrush1, ChartBrush2 и т. Д. И т. Д. Я не понимаю, как они используются самой диаграммой.

Причина, по которой я спрашиваю это, заключается в том, что я пытаюсь изменить DataPointStyle дляLineSeries - я успешно вытащил копию стиля точки данных в Blend и внес нужные изменения, то есть уменьшил размер точки данных.Но как только я это сделаю, все серии линий на графике будут одного цвета (оранжевого цвета) и будут игнорировать ресурсы ChartBrush (подробно описано выше).

Что определяет выбор цвета серии линий?Как это случилось?Почему я теряю его, если беру копию шаблона?

Спасибо!

1 Ответ

3 голосов
/ 22 марта 2012

У набора инструментов Chart есть свойство Palette, которое представляет собой словарь стилей ресурсов.

Стиль диаграммы по умолчанию можно найти в "Controls.DataVisualization.Toolkit \ Charting \ Chart \ Chart.xaml ".

Там вы можете видеть, что Palette - это ResourceDictionaryCollection, и каждый ResourceDictionary в коллекции определяет DataPointStyle.Каждый DataPointStyle устанавливает свойство Background по-разному, и именно так каждая линия на диаграмме становится разного цвета.

Отсюда ясно, почему линии в ряду линий, которые имеют DataPointStyleявно установленный в xaml всегда будет иметь один и тот же цвет - по умолчанию 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>
...