Windows 8 XAML RT工具包调色板 - 列图表

时间:2013-07-05 09:48:14

标签: xaml windows-8 winrt-xaml

我正在构建一个Windows应用商店应用并试图在XAML RT Toolkit中使用图表组件。现在问题是我想用特定的colou表示每个列栏。但后来我找不到办法。饼图调色板有一个类似的问题。但这似乎不适用于柱形图。有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

嗨Rajkumar,                  我们也有类似的问题。终于成功了。请检查以下链接。

http://blogs.msdn.com/b/delay/archive/2009/02/04/columns-of-a-different-color-customizing-the-appearance-of-silverlight-charts-with-re-templating-and-mvvm.aspx

为了赋予不同的颜色,本质就是追随。

第1步。

在Page.Resource下创建一个样式,如下所示。

<Page.Resources>
        <Style
    x:Key="**ColorByPreferenceColumn**"
    TargetType="charting:ColumnDataPoint">
            <Setter Property="Background" Value="DarkGray"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate
                TargetType="charting:ColumnDataPoint">
                        <Border
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid Background="{Binding **ColorBackGround**}">
                                <Rectangle>
                                    <Rectangle.Fill>
                                        <LinearGradientBrush>
                                            <GradientStop Color="#77ffffff" Offset="0"/>
                                            <GradientStop Color="#00ffffff" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Border BorderBrush="#ccffffff" BorderThickness="1">
                                    <Border BorderBrush="#77ffffff" BorderThickness="1"/>
                                </Border>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

第2步。

将样式应用于图表控件。

<charting:Chart  x:Name="BuildStatusChart" Title="Build Status" Foreground="Black" Margin="20,20,20,20">
           <charting:Chart.Series>

                <Series:ColumnSeries Title="Build Status" ItemsSource="{Binding Items}" 
                        IndependentValueBinding="{Binding Index}" HorizontalContentAlignment="Center"
                        DependentValueBinding="{Binding BuildTime}"
                        IsSelectionEnabled="False" SelectionChanged="OnSelectionChanged"  DataPointStyle="{StaticResource ColorByPreferenceColumn}" >
                 </Series:ColumnSeries>
            </charting:Chart.Series>
        </charting:Chart>

第3步:

Note : the style name is "ColorByPreferenceColumn"  and color for each bar will be represented by "ColorBackGround". Search the above code segment , to know how it is applied. FInal thing is on code side have class with "ColorBackGround" peoperty.

public class Build : BindableBase
    {
        //Build Class 

 public Build() {}

 private SolidColorBrush _colorBackGround;
        public SolidColorBrush ColorBackGround
        {
            get { return _colorBackGround; }
            set { _colorBackGround = value; }
        }

       // And your properties......
}

第5步:

你知道如何,

设置绑定集合。在我们的例子中它是

((ColumnSeries)this.BuildStatusChart.Series[0]).ItemsSource = items; // items collection of individual objects.

最诚挚的问候, Anish.A.R