Silverlight DataVisualization Charting Gradient on StackedBarSeries - xaml

Question

I am using the Silverlight charting control: System.Windows.Controls.DataVisualization.Charting and I wish to remove the gradient that is on the bar where the color is solid at the bottom and gets lighter towards the top, so what I am looking for is a solid bar and not with a gradient.
I have managed to get the original style from Blend for the chart control and added the following to my own style:
<Setter Property="PlotAreaStyle">
<Setter.Value>
<Style TargetType="Grid">
<Setter Property="HorizontalAlignment" Value="Left"></Setter>
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Transparent"/>
<GradientStop Color="Black" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
Can someone please help me as I am new to Silverlight and have spent many hours trying to find a solution, I am using this site as a last resort.
This is the code I am using for the chart control.
<charting:Chart Loaded="Loaded" Width="{Binding ElementName=Graph, Path=GraphWidth}" Grid.Column="0" BorderBrush="Transparent" x:Name="SummaryGraph"
Style="{StaticResource SummaryGraphStyle}"
VerticalAlignment="Stretch" HorizontalAlignment="Center">
<charting:ColumnSeries>
<charting:ColumnSeries.DataPointStyle>
<Style TargetType="charting:ColumnDataPoint">
<Setter Property="Background" Value="Black" />
</Style>
</charting:ColumnSeries.DataPointStyle>
</charting:ColumnSeries>
<charting:Chart.Axes>
<DataVisualization:LinearAxisWithAxisLine AxisLabelStyle="{StaticResource YAxisLabel}" FontStyle="Normal" FontWeight="Bold" Title="{Binding ElementName=Graph, Path=YAxisTitle}" Orientation="Y" />
<charting:CategoryAxis AxisLabelStyle="{StaticResource XAxisLabel}" FontSize="{Binding ElementName=Graph, Path=XAxisLabelFontSize}" BorderThickness="0" Background="Transparent" Orientation="X" />
</charting:Chart.Axes>
</charting:Chart>
Many Thanks,
I am now using this code with the style provided:
<charting:Chart Loaded="Loaded" Width="{Binding ElementName=Graph, Path=GraphWidth}" Grid.Column="0" BorderBrush="Transparent" x:Name="SummaryGraph"
Style="{StaticResource SummaryGraphStyle}"
VerticalAlignment="Stretch" HorizontalAlignment="Center">
<!--<charting:ColumnSeries DataPointStyle="{StaticResource ColumnDataPointNoGradientStyle}" />
<charting:ColumnSeries>
<charting:ColumnDataPoint Style="{StaticResource ColumnDataPointNoGradientStyle}"></charting:ColumnDataPoint>
</charting:ColumnSeries>-->
<charting:StackedColumnSeries>
<charting:SeriesDefinition DataPointStyle="{StaticResource ColumnDataPointNoGradientStyle}"/>
</charting:StackedColumnSeries>
<charting:Chart.Axes>
<DataVisualization:LinearAxisWithAxisLine AxisLabelStyle="{StaticResource YAxisLabel}" FontStyle="Normal" FontWeight="Bold" Title="{Binding ElementName=Graph, Path=YAxisTitle}" Orientation="Y" />
<charting:CategoryAxis AxisLabelStyle="{StaticResource XAxisLabel}" FontSize="{Binding ElementName=Graph, Path=XAxisLabelFontSize}" BorderThickness="0" Background="Transparent" Orientation="X" >
</charting:CategoryAxis>
</charting:Chart.Axes>
</charting:Chart>

Answer 1

You need to modify the DataPointStyle Background on the ColumnSeries. Try setting the style directly into the StackedColumnSeries
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
<toolkit:Chart>
<toolkit:ColumnSeries Title="{Binding ...}" ItemsSource="{Binding ...}" IndependentValuePath="..." DependentValuePath="...">
<toolkit:ColumnSeries.DataPointStyle>
<Style x:Key="ColumnDataPointNoGradientStyle" TargetType="toolkit:ColumnDataPoint">
<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="toolkit:ColumnDataPoint">
<Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0">
<ToolTipService.ToolTip>
<ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
</ToolTipService.ToolTip>
<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 Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverHighlight"/>
</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 Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionHighlight"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="RevealStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Shown">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="{TemplateBinding Background}">
<Rectangle Visibility="Collapsed">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="#77ffffff" Offset="0"/>
<GradientStop Color="#00ffffff" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border BorderBrush="#ccffffff" BorderThickness="1" Visibility="Collapsed">
<Border BorderBrush="#77ffffff" BorderThickness="1"/>
</Border>
<Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
<Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</toolkit:ColumnSeries.DataPointStyle>
</toolkit:ColumnSeries>
<toolkit:Chart>
Here is the full DataPointStyle. The only modification is adding a visibility collapsed to the gradient rectangle: <Rectangle Visibility="Collapsed"> (located near the bottom)