I am using Silverlight Toolkit from http://silverlight.codeplex.com/ and am having an issue with the styling. Based off microsoft's documents I see the chart is made up of 4 basic components.
ref http://msdn.microsoft.com/en-us/expression/dd433476.aspx
I am still trying to wrap my head around xaml and control templates etc. I know it probably can be done using that, I just don't know how.
Here is an example of what I am trying to achieve:
Here is what it looks like now:
So I copied the style of the Chart control from the Toolkit source code and removed redundant elements from the template.
The styles definitions look so:
<UserControl.Resources>
<Style x:Key="ChartWithoutPaddings" TargetType="chart:Chart">
<Setter Property="Padding" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="ChartAreaStyle">
<Setter.Value>
<Style TargetType="Panel">
<Setter Property="MinWidth" Value="100" />
<Setter Property="MinHeight" Value="20" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chart:Chart">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
<Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
</chartingprimitives:EdgePanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="EmptyDataPoint" TargetType="Control">
<Setter Property="Background" Value="Black" />
<Setter Property="Template" Value="{x:Null}" />
</Style>
<Style x:Key="OnePixelLine" TargetType="Polyline">
<Setter Property="StrokeThickness" Value="1" />
</Style>
</UserControl.Resources>
You should also hide axes and specify height and width of the chart:
<chart:Chart Style="{StaticResource ChartWithoutPaddings}"
VerticalAlignment="Center" HorizontalAlignment="Center"
Width="200" Height="30">
<chart:LineSeries ItemsSource="{Binding Items}" IndependentValuePath="Title" DependentValuePath="Value"
DataPointStyle="{StaticResource EmptyDataPoint}" PolylineStyle="{StaticResource OnePixelLine}" />
<chart:Chart.Axes>
<chart:CategoryAxis Orientation="X" Height="0" Opacity="0" />
<chart:LinearAxis Orientation="Y" Width="0" Opacity="0" />
</chart:Chart.Axes>
</chart:Chart>