Style Wpf Charts like windows 8 Metro ui Chats
I wanted to style my wpf chart similar to windows 8 metro UI charts. Tried
various stylings but could not remove the gradient inside the bar columns.
I used System.Windows.Controls.DataVisualization.Toolkit dll to generate
the graph. Here is my xaml for the chart with diagram.
<chartingToolkit:Chart Name="chartDailySales"
Title="Top 5 Products Sold Today"
VerticalAlignment="Top" Margin="10,10,0,0"
Height="262"
BorderBrush="#00000000"
DataContext="{Binding}"
IsHitTestVisible="False"
IsTabStop="True" ForceCursor="True"
Background="#ffbcd5c7"
>
<!-- Plot area-->
<chartingToolkit:Chart.PlotAreaStyle>
<Style TargetType="Grid">
<Setter Property="Background" Value="White" />
</Style>
</chartingToolkit:Chart.PlotAreaStyle>
<!-- Hide Legend-->
<chartingToolkit:Chart.LegendStyle>
<Style TargetType="Control">
<Setter Property="Width" Value="0"/>
<Setter Property="Height" Value="0"/>
</Style>
</chartingToolkit:Chart.LegendStyle>
<!-- Style Column Series -->
<chartingToolkit:ColumnSeries DependentValuePath="Value"
IndependentValuePath="Key"
ItemsSource="{Binding}"
IsSelectionEnabled="False"
>
<chartingToolkit:ColumnSeries.DataPointStyle>
<Style TargetType="chartingToolkit:ColumnDataPoint">
<Setter Property="Background" Value="#ff217346"/>
<Setter Property="BorderBrush" Value="#ff217346" />
<Setter Property="BorderThickness" Value="1" />
</Style>
</chartingToolkit:ColumnSeries.DataPointStyle>
</chartingToolkit:ColumnSeries>
</chartingToolkit:Chart>
And Here's the output
Now the question is how do I remove the column gradient so that the chart
looks similar to windows 8 metro UI like charts. Thanks
No comments:
Post a Comment