WPF chart control for LinearGradient display

Feb 2, 2010 at 10:35 PM

Hi,

 I am using WPF chart control.I am trying to apply the LinearGradinet style in ColumSeries of Chart using Rectangle Fill, But unable to acheive it.

Below is the code i am using and o/p result.

CHART Code:

    <charting:Chart x:Name="chart" Margin="6,26,34,28">
            <charting:Chart.Series>
                <charting:LineSeries Name="BL"
                    ItemsSource="{Binding}"
                    IndependentValueBinding="{Binding Path=Year}"
                    DependentValueBinding="{Binding Path=BL}" IsSelectionEnabled="True"
                    Title="BL">
                    <charting:LineSeries.DataPointStyle>
                        <Style TargetType="charting:LineDataPoint">
                            <Setter Property="Background" Value="#B1785B"/>
                        </Style>
                    </charting:LineSeries.DataPointStyle>
                </charting:LineSeries>

                <charting:ColumnSeries  Name="V1"
                    ItemsSource="{Binding}"
                    IndependentValueBinding="{Binding Path=Year}"
                    DependentValueBinding="{Binding Path=V1}" Title="V1" Background="Blue"
                    DataPointStyle="{StaticResource ColorByPreferenceColumn}"  >
                </charting:ColumnSeries>

             
            </charting:Chart.Series>
           
            <charting:Chart.Axes>
                 <!-- Axis for custom labels -->
                <charting:LinearAxis Orientation="Y" Title="HC in millions">
                    <charting:LinearAxis.AxisLabelStyle>
                        <Style TargetType="charting:AxisLabel">
                            <!--<Setter Property="StringFormat" Value="{}{0:N0}"/>-->
                            <Setter Property="StringFormat" Value="{}{0:#,,.00}"/>
                        </Style>
                    </charting:LinearAxis.AxisLabelStyle>
                </charting:LinearAxis>

                <charting:CategoryAxis Orientation="X" Title="Year" >
                </charting:CategoryAxis>

            </charting:Chart.Axes>
        </charting:Chart>

STYLE Code:

<Style x:Key="ColorByPreferenceColumn" TargetType="charting:ColumnDataPoint">
                <Setter Property="Background" Value="#7BAAFF"></Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="charting:ColumnDataPoint">
                            <Grid x:Name="Root">
                                <Rectangle Name="columnRectangle" RadiusX="8" RadiusY="8" StrokeThickness="2">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#7BAAFF" Offset="0"/>
                                            <GradientStop Color="Transparent" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <ToolTipService.ToolTip>
                                    <StackPanel>
                                        <ContentControl Content="{TemplateBinding DependentValue}"
                                            ContentStringFormat="HC {0:###,###,###}"/>
                                    </StackPanel>
                                </ToolTipService.ToolTip>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="Button.IsMouseOver" Value="True">
                                    <Setter TargetName="columnRectangle" Property="Fill" Value="#9B98FF" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Kindly help me.

Thanks...Vigith