Silverlight 4: Chart Toolkit Color Set

Question

Im migrating my Chart code from visifire to Toolkit. I would like to know the counter part of ColorSet property[sample value Caravan,Picasso..] of Visifire to Toolkit.

Is there any?

TIA

Answer 1

At first you need to copy color codes from a Visifire color set. They are defined in the file (Visifire source code)\Common\SLVisifireCharts\ColorSets.xaml or here.

The counterpart of the ColorSet property is the Palette property, which takes complex dictionary of resources. Here is the example for the Caravan color set:

    <SolidColorBrush x:Key="color1" Color="#58706d" />
    <SolidColorBrush x:Key="color2" Color="#4b5757" />
    <SolidColorBrush x:Key="color3" Color="#7c8a6e" />
    <SolidColorBrush x:Key="color4" Color="#b0b087" />
    <SolidColorBrush x:Key="color5" Color="#e3e3d1" />

    <datavis:ResourceDictionaryCollection x:Key="CaravanPalette">
        <ResourceDictionary>
            <Style x:Key="DataPointStyle" TargetType="Control" >
                <Setter Property="Background" Value="{StaticResource color1}"/>
            </Style>
        </ResourceDictionary>

        <ResourceDictionary>
            <Style x:Key="DataPointStyle" TargetType="Control" >
                <Setter Property="Background" Value="{StaticResource color2}"/>
            </Style>
        </ResourceDictionary>

        <ResourceDictionary>
            <Style x:Key="DataPointStyle" TargetType="Control" >
                <Setter Property="Background" Value="{StaticResource color3}"/>
            </Style>
        </ResourceDictionary>

        <ResourceDictionary>
            <Style x:Key="DataPointStyle" TargetType="Control" >
                <Setter Property="Background" Value="{StaticResource color4}"/>
            </Style>
        </ResourceDictionary>

        <ResourceDictionary>
            <Style x:Key="DataPointStyle" TargetType="Control" >
                <Setter Property="Background" Value="{StaticResource color5}"/>
            </Style>
        </ResourceDictionary>
    </datavis:ResourceDictionaryCollection>

And it is applied to the chart so:

<chart:Chart Palette="{StaticResource CaravanPalette}">

Although I have applied the same colors, the toolkit chart differs a lot and has rather bright colors:

I can change the template of the column, but I'm not designer and the result is still different:

    <Style x:Key="columnStyle" TargetType="Control">
        <Setter Property="Background" Value="Orange"/>
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chart:ColumnDataPoint">
                    <Border
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Opacity="0"
                    x:Name="Root">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.1"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation
                                        Storyboard.TargetName="MouseOverHighlight"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.6"
                                        Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.1"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation
                                        Storyboard.TargetName="SelectionHighlight"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.6"
                                        Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="RevealStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.5"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Shown">
                                    <Storyboard>
                                        <DoubleAnimation
                                        Storyboard.TargetName="Root"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Hidden">
                                    <Storyboard>
                                        <DoubleAnimation
                                        Storyboard.TargetName="Root"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid Background="{TemplateBinding Background}">
                            <Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
                            <Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
                        </Grid>
                        <ToolTipService.ToolTip>
                            <ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
                        </ToolTipService.ToolTip>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <datavis:ResourceDictionaryCollection x:Key="CaravanPalette">
        <ResourceDictionary>
            <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource columnStyle}">
                <Setter Property="Background" Value="{StaticResource color1}"/>
            </Style>
        </ResourceDictionary>

        <ResourceDictionary>
            <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource columnStyle}">
                <Setter Property="Background" Value="{StaticResource color2}"/>
            </Style>
        </ResourceDictionary>

        <ResourceDictionary>
            <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource columnStyle}">
                <Setter Property="Background" Value="{StaticResource color3}"/>
            </Style>
        </ResourceDictionary>

        <ResourceDictionary>
            <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource columnStyle}">
                <Setter Property="Background" Value="{StaticResource color4}"/>
            </Style>
        </ResourceDictionary>

        <ResourceDictionary>
            <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource columnStyle}">
                <Setter Property="Background" Value="{StaticResource color5}"/>
            </Style>
        </ResourceDictionary>
    </datavis:ResourceDictionaryCollection>

And one last remark: toolkit chart doesn't render different colors for a single series. If you have 1 item in the legend - all categories will be the same color. And this behavior can't be changed.