Question

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.

  1. ChartAreaStyle ==> Grid
  2. LegendStyle ==> Legend (a control similar to an ItemsControl with a Title)
  3. PlotAreaStyle ==> Grid
  4. TitleStyle ==> Title (a ContentControl)

ref http://msdn.microsoft.com/en-us/expression/dd433476.aspx

My Question Is

How can I fill the chart container with the chart itself instead of having an empty surrounding area and if possible omit the legend?

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:

Courtesy of Telerik's awesome controls

Here is what it looks like now:

Horrible

Was it helpful?

Solution

So I copied the style of the Chart control from the Toolkit source code and removed redundant elements from the template.

Silverlight line chart

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top