顏色選擇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工具包圖表線系列

回答

相關問題