Silverlight 4:图表工具包颜色集

时间:2011-04-11 08:18:50

标签: silverlight silverlight-4.0 charts silverlight-toolkit

我将我的Chart代码从visifire迁移到Toolkit。我想知道Visifire to Toolkit的ColorSet属性[样本值Caravan,Picasso ..]的对应部分。

有没有?

TIA

1 个答案:

答案 0 :(得分:5)

首先,您需要从Visifire颜色集中复制颜色代码。它们在文件中定义 (Visifire source code)\Common\SLVisifireCharts\ColorSets.xamlhere

ColorSet属性的对应项是Palette属性,它采用复杂的资源字典。以下是Caravan颜色集的示例:

    <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>

它应用于图表:

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

虽然我使用了相同的颜色,但工具包图表差异很大,颜色相当鲜艳: enter image description here

我可以更改列的模板,但我不是设计师,结果仍然不同:

    <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>

enter image description here

最后一句话:工具包图表不会为单个系列呈现不同的颜色。如果图例中有1个项目 - 所有类别的颜色都相同。并且这种行为无法改变。