0

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

Adrian
  • 3,332
  • 5
  • 34
  • 52
  • What is exactly wrong with the second picture? What is the purpose of progress bars and the square? – vortexwolf May 06 '13 at 17:57
  • @vorrtex The second picture shows how the chart located on the third row of the parent grid is not visualizing itself properly. As you can see the surrounding blue area is taking up all the space while the actual chart itself is a thin tiny line in the middle. I want a compact version as in the first image I posted. The progress bars are not relevant to the grid. They have another use for my application. I am creating an application to keep track of certain progression statistics. – Adrian May 06 '13 at 18:03

1 Answers1

1

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>
vortexwolf
  • 13,967
  • 2
  • 54
  • 72
  • May I ask where exactly should I import the from? I am trying to add the namespace found via google "xmlns:chartingprimitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"" but it is not finding the dll – Adrian May 06 '13 at 19:12
  • @Adrian Here: `xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:chartingprimitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"`. Also add the required assembly to the project references. – vortexwolf May 06 '13 at 19:21
  • That is exactly what I have in my project. It seems other people are having this issue as well. I installed my silverlight toolkit via NuGet so it should have all required .dlls in my project. I sifted through my project folder at the NuGet directory and did not find this .dll at all. I found the code for it online; however, I am just going to create a new class with the same code. I don't have time to hunt this file down. – Adrian May 06 '13 at 19:31
  • @Adrian I suggest using a normal link instead of NuGet http://silverlight.codeplex.com/downloads/get/117046, then you will find the necessary dll in `C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Bin\` – vortexwolf May 06 '13 at 20:16
  • I tried that link. I tried versions 5 and 4 and still have the same issues. _Error 2 The type 'chartingprimitives:EdgePanel' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built. – Adrian May 06 '13 at 22:11
  • Undefined CLR namespace. The 'clr-namespace' URI refers to a namespace 'System.Windows.Controls.DataVisualization.Charting.Primitives' that could not be found. This is **very** frustrating – Adrian May 06 '13 at 22:12
  • the project builds successfully but the errors keep popping up. Im going to try to see if it shows at runtime. – Adrian May 06 '13 at 22:16
  • Yup, everything works now. I just don't know why it still is giving me that error. One more question: I can't seem to get the chart to fill a Grid.RowElement. I don't want to have to resort to hardcoded values for its dimensions. Did you alter something in the style to do this? – Adrian May 06 '13 at 23:01
  • @Adrian Remove Height and Width attributes and set `VerticalAlignment="Stretch" HorizontalAlignment="Stretch"` – vortexwolf May 07 '13 at 08:11